Sergio Xalambrí

Conceptos básicos de JS: Array#push

Array#push, o Array.prototype.push, es un método que poseen todos lo arrays en JavaScript. Este método nos sirve para agregar uno o más valores nuevos a un array y el largo final del array con estos nuevos elementos. Veamos un ejemplo:

const numbers = [1, 2, 3];
const total = numbers.push(4, 5);
console.log(numbers); // [1,2,3,4,5]
console.log(total); // 5

Lo que hace Array#push entonces es agregar cada uno de los elementos que le pasemos y nos devuelve la propiedad length del array actualizado con estos elementos.

Si queremos hacer lo mismo que Array#push tendríamos que hacer algo similar a esto:

const numbers = [1, 2, 3];

numbers[numbers.length] = 4;
numbers[numbers.length] = 5;

console.log(numbers); // [1,2,3,4,5]
console.log(numbers.length); // 5

Tendríamos que asignar nuestros nuevos elementos a la posición array.length del array, lo que dado que los arrays empiezan en 0 y length cuenta desde 1 significa agregarlo en una posición nueva inmediatamente después del último elemento que existe hasta ese momento.

Sintaxis

La sintaxis completa de la función es la siguiente

const total = array.push(...elements);

Array#push recibe uno o más argumentos, cada argumento es agregado al array uno por uno hasta que el último argumento quede al final del array. Por último se devuelve el tamaño nuevo del array.

Implementando Array#push a mano

Veamos ahora como crear nuestro propio Array#push para entender mejor su funcionamiento. Vamos a implementarlo como una función llamada push cuyo primer valor va a ser el array al cual hacer push y el resto de los argumentos van a ser los elementos a agregar.

function push(array, ...values) {
  for (let value of values) {
    array[array.length] = value;
  }
  return array.length;
}

const numbers = [1, 2, 3];
const total = push(numbers, 4, 5);
console.log(numbers); // [1,2,3,4,5]
console.log(total); // 5

¿Qué es lo que hicimos? Nuestra función recibe el array al cuál queremos agregarle elemento y uno o más elementos, usando parámetros rest, los ... antes de values, podemos entonces obtener todos estos valores a agregar como un array que si no hay argumentos está vacío y sino tiene todos los que pasemos. Internamente iteramos este array de valores y los vamos agregando uno por uno al array, al final devolvemos el nuevo largo del array.

Casos de uso

Array#push es usado un montón en JavaScript. Por ejemplo para combinar dos arrays en uno solo.

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

const total = numbers1.push(...numbers2);

console.log(numbers1); // [1,2,3,4,5,6]
console.log(total); // 6

Ahora numbers1 va a tener todos los elementos de numbers2.

Nota: ya que Array#push modifica el array en vez de crear uno nuevo cuando se trabaja de forma funcional se suele usar más Array#concat.

Palabras finales

Este método es muy útil y es usado a diario al trabajar con Arrays en JavaScript cuando no se trabaja de forma funcional. Si no lo habías usado antes te recomiendo probar varios ejemplos de uso para familiarizarte e igualmente pruebe Array#concat como alternativa funcional y combinable con Array#map, Array#filter y Array#reduces.