Métodos

Una lista que no puedes tocar sirve de poco. Lo normal es querer saber cuántos elementos tiene, añadir uno nuevo o quitar el que sobra. Los arrays de JavaScript ya traen de serie métodos y propiedades para hacer todo eso.

La longitud de un array#

¿Cuántos elementos hay en la colección? Te lo dice la propiedad .length:

const frutas = ["manzana", "pera", "plátano", "fresa"]console.log(frutas.length) // -> 4

Y .length no solo se lee. Si le asignas un número más pequeño, el array se recorta y pierde lo que sobra:

const frutas = ["manzana", "pera", "plátano", "fresa"]frutas.length = 2console.log(frutas) // -> ["manzana", "pera"]console.log(frutas.length) // -> 2

Métodos de arrays#

Con una colección vas a querer hacer cosas: añadir un elemento, eliminarlo, buscarlo… Empezamos por los cuatro métodos básicos, que añaden o quitan elementos en los extremos del array.

.push()

Añade un elemento al final. Mira cómo queda el array después de llamarlo:

const frutas = ["plátano", "fresa"]frutas.push("naranja")console.log(frutas) // -> ["plátano", "fresa", "naranja"]

Además, .push() te devuelve algo: la nueva longitud del array. Puedes guardarla en una variable si te hace falta.

const frutas = ["plátano", "fresa"]console.log(frutas.length) // -> 2const newLength = frutas.push("naranja")console.log(newLength) // -> 3console.log(frutas) // -> ["plátano", "fresa", "naranja"]

.pop()

Hace lo contrario: elimina el último elemento. Y no lo tira sin más, te lo devuelve por si lo quieres usar.

const frutas = ["plátano", "fresa", "naranja"]const ultimaFruta = frutas.pop()console.log(frutas) // -> ["plátano", "fresa"]console.log(ultimaFruta) // -> "naranja"

.shift()

Es como .pop(), pero por el otro lado: elimina y devuelve el primer elemento.

const frutas = ["plátano", "fresa", "naranja"]const primeraFruta = frutas.shift()console.log(frutas) // -> ["fresa", "naranja"]console.log(primeraFruta) // -> "plátano"

.unshift()

Y este es como .push(), pero añade el elemento al principio en lugar de al final:

const frutas = ["plátano", "fresa", "naranja"]frutas.unshift("manzana")console.log(frutas) // -> ["manzana", "plátano", "fresa", "naranja"]

Para que no se te olvide cuál actúa en cada extremo, aquí tienes un resumen visual de los cuatro métodos:

Concatenar arrays#

¿Tienes dos arrays y quieres uno solo con los elementos de ambos? Para eso está el método concat(). Fíjate en que no toca ninguno de los dos originales: devuelve un array nuevo.

const numbers = [1, 2, 3]const numbers2 = [4, 5]const allNumbers = numbers.concat(numbers2)console.log(allNumbers) // -> [1, 2, 3, 4, 5]

Hay otra forma muy habitual de conseguir lo mismo: el operador ..., conocido como spread operator. Lo que hace es propagar los elementos de un array, como si los escribieras uno a uno.

const numbers = [1, 2, 3]const numbers2 = [4, 5]//                    1, 2, 3        4, 5const allNumbers = [...numbers, ...numbers2]console.log(allNumbers) // -> [1, 2, 3, 4, 5]

Más adelante hablaremos más de este operador y de sus diferentes utilidades.