El tip de hoy viene inspirado en un programador que estoy entrenando, (ya encontramos a alguien quien trabaje con nosotros, yeah!!! aun asi seguimos buscando mas desarrolladores de vanilla js). El tip de hoy es algo que debemos evadir hacer, este es una de las ocasiones en que uso forEach y bind

Código :

 this.scheduleItems.forEach(function (item, index) {
    if (this === item) {
      this.scheduleItems.splice(index, 1);
    }
  }.bind(this));


El codigo como pueden ver busca en scheduleItems (un array) a item y si es igual lo remueve. Para los que no esten familiarizados bind permite forzar un scope (es decir los nombres de las variables de un objeto), en este caso al ser this, hara que this.scheduleItems.splice haga referencia de vuelta al array que lo llamo inicialmente, de no ser asi no encontraria el array y causaria un error, pues en ese caso buscaria la variable dentro de la funcion:

Código :

function (item, index) {
    if (this === item) {
      this.scheduleItems.splice(index, 1);
    }
  }


como pueden ver poniendo la funcion sola en ningun momento se declaro this.scheduleItems y por eso seria un error. El problema con programar asi es el siguiente, estas declarando una funcion nueva dentro de una funcion, esto puede dificultar el debugeo asi como hacer mas complejo leer el codigo y entenderlo. La unica razon para hacer codigo "bonito" no es porque sea "bonito" sino para que sea mas facil lidear con el. Aqui el scope es forzado con bind, y aunque es soportado en nuestros browsers mas modernos por alla habra alguno que no sea soportado y si podemos hacer lo mismo mas sencillo, pues por que no?


Código :

 
for (var iItem = 0; iItem < this.scheduleItems.length; iItem++)
{
    if (item == this.scheduleItems[iItem])
    {
        this.scheduleItems.splice(item, 1);
    }
}


Si les ponen los dos codigos cual creen entender mas rapido? El primero o el segundo? Otra cosa que rescatar es el numero de lineas son las mismas si indentamos de la misma manera (5 lineas):

Código :

 
for (var iItem = 0; iItem < this.scheduleItems.length; iItem++){
    if (item == this.scheduleItems[iItem]){
        this.scheduleItems.splice(item, 1);
    }
}


Aunque yo prefiero siempre identar usando una nueva linea para {, por que me hace botar a la vista al for mas facil, lo cual es útil al tener codigo de mas de 100 lineas, un ultimo tip este codigo correra por todo el array, asi que si el array tiene 100 elementos y encontro el elemento en la casilla 3, verificara todo el array, si sabemos que solo va a estar en una casilla, entonces podemos hacer lo siguiente

Código :

 
for (var iItem = 0; iItem < this.scheduleItems.length; iItem++)
{
    if (item == this.scheduleItems[iItem])
    {
        this.scheduleItems.splice(item, 1);
        break;
    }
}


Al agregar break; rompemos el for loop en el momento que hallamos el item de nuestro interes, claro esto no es muy util si el elemento estaba al final, pero una ayudita extra a nuestro codigo si sabemos que el array puede ser muy largo (aunque solo sea util para los items que no estan al final del array) siempre viene bien.