Saltar al contenido

Hacer cumplir la inmutabilidad con ES2015

El método push(), aunque es conveniente, no puede utilizarse cuando queremos imponer la inmutabilidad. He aquí un ejemplo de cómo el método push() afecta a las variables que se pasan a una función.

12345678funciónaddTwo(arr){retorno arr.push(2);}var original =[];var newArray =addTwo(original);console.log(original);// [2]console.log(newArray);// [2]

javascript

Hacer cumplir la inmutabilidad con ES2015
Hacer cumplir la inmutabilidad con ES2015

Cuando se pasan parámetros a una función, normalmente se espera que esa función cree una copia de los parámetros para utilizarlos dentro del cuerpo de la función. Sin embargo, como las matrices son variables de referencia, la referencia que pasemos a una función será la misma referencia que se utiliza dentro del cuerpo de la función. Por lo tanto, cuando realizamos operaciones como push() sobre esa referencia, también afecta al array original fuera de la función.

Podemos evitarlo usando el operador concat() en lugar de push(). concat() devuelve una nueva matriz cuando se llama, que consiste en las dos matrices que se le pasan como parámetros.

El ejemplo anterior se convierte ahora en:

12345678funciónaddTwo(arr){retorno arr.concat(2);}var original =[];var newArray =addTwo(original);console.log(original);// []console.log(newArray);// [2]

javascript

Ahora tenemos una función que añade el número 2 a una matriz sin modificar la matriz original.

Con ES2015, podemos simplemente truncar la sintaxis usando el operador spread (…) en lugar del método concat().

1234/// ES2015funciónaddTwo(arr){retorno[...arr,2];}

javascript

De manera similar, podemos eliminar un elemento de un conjunto usando el operador de dispersión mientras se mantiene la inmutabilidad. En este ejemplo, slice() se utiliza como un método seguro que devuelve una copia poco profunda de un array.

123456789functionremoveItem(arr, index){retorno[...arr.slice(0, index),...arr.slice(index +1)];}let original =["a", "b", "c", "d"];let newArray =removeItem(original,2);console. log(original);// ["a", "b", "c", "d"]console.log(newArray);// ["a", "b", "d"]

javascript