Javascript Arrays — Funciones inmutables

Lista de las funciones inmutables de Javascript para trabajar con arrays

Image for post
Image for post
Funciones inmutables

Desde hace dos años llevo desarrollando en React a nivel profesional lo que me ha permitido profundizar enormemente en Javascript y en conceptos como el de la programación funcional del que ya hablé en su momento:

Esto me ha llevado a interiorizar conceptos como son las funciones puras y la inmutabilidad (ambos base primordial para librerías como Redux) y a tratar de ponerlos en práctica siempre que puedo.

También, por supuesto, me he tenido que enfrentar a bugs de esos que te obligan a tirarte de los pelos por culpa de haber usado una función mutable dentro de un reducer sin haberme dado cuenta por lo que he decidido recopilar en este artículo todas las funciones inmutables que podemos usar a la hora de trabajar con arrays en Javascript

Recordad que una función inmutable es aquella que no modifica el valor sobre el que la estamos aplicando.

Por ejemplo, splice es una función mutable porque modifica el array original, no así slice que devuelve un nuevo array

Sí, podréis pensar que ya existen librerías como ImmutableJS o Immutability Helper que resuelven este problema pero soy partidario de usar Vanilla javascript siempre que se pueda en vez de recurrir a librerías de terceros de cara a no sobrecargar demasiado las depedencias y así practicar un poco con Javascript básico, que nunca está de más. Así que vamos allá.

Inmutable Push

function immutablePush(arr, newEntry){
return [ ...arr, newEntry ]
}

Inmutable Pop

function immutablePop(arr){
return arr.slice(0, -1)
}

Inmutable Unshift

function immutableUnshift(arr, newEntry){
return [ newEntry, ...arr ]
}

Éstas eran fáciles eh, vamos a complicarlo un poco

Sort

El método sort de Javascript por defecto modifica el array original, lo cual nos va a dejar dos opciones: o escribir el nuestro propio o la más sencilla, realizar una copia del array original y aplicarle el dicho método, de forma que el original no se vea affectado:

function immutableSort(arr, compareFunction) {
return [ ...arr ].sort(compareFunction)
}
// o bien...function immutableSort(arr, compareFunction) {
return arr.slice().sort(compareFunction)
}

Reverse

Estamos en el mismo caso que con sort , la función reverse de Javascript modifica el array sobre el que se aplica por lo que para obtener un método reverse que sea inmutable recurriremos a hacer una copia:

function immutableSort(arr, compareFunction) {
return [ ...arr ].reverse()
}
// o bien...function immutableSort(arr, compareFunction) {
return arr.slice().reverse()
}

Splice

El método splice nos permite añadir elementos a partir de una posición dentro de un array (o sustituirlos si indicamos cuantos queremos eliminar), pero por desgracia es mutable. Sin embargo, en este caso podemos reimplementarlo para transformarlo en inmutable (os dejo la versión de ES5 y la de ES6 por si queréis comeros el coco):

// ES5function immutableSplice(arr, start, deleteCount) {
var _len = arguments.length
var items = Array(_len > 3 ? _len - 3 : 0)
for (var _key = 3; _key < _len; _key++) {
items[_key - 3] = arguments[_key];
}
return [].concat(arr.slice(0, start), items, arr.slice(start + deleteCount))
}
// ES6function immutableSplice(arr, start, deleteCount, ...items) {
return [ ...arr.slice(0, start), ...items, ...arr.slice(start + deleteCount) ]
}

Delete

Si queremos eliminar un elemento de un array situado en un índice determinado de forma inmutable podemos realizarlo de la siguiente forma:

function immutableDelete (arr, index) {
return arr.slice(0,index).concat(arr.slice(index+1))
}

Como veis, casi todas son bastante sencillas (aunque abusen de copiar un array mediante slice ) pero creo que es importante conocerlas para evitar los famosos bugs de mutabilidad que tan complicados son de localizar.

¿Quieres recibir más artículos como este?

Suscríbete a nuestra newsletter:

Written by

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store