JS: Arrays

Teoría: Modificación

Hemos trabajado con datos primitivos en JavaScript como números y cadenas de texto, y sabemos que estos no pueden cambiar. Cuando aplicamos un método a ellos, obtenemos un nuevo valor, pero la variable original sigue igual.

const name = 'Códica';
name.toUpperCase(); // 'CÓDICA'
console.log(name); // 'Códica' (el valor original sigue igual)

Sin embargo, los arrays son diferentes. Podemos modificar sus elementos, agregar o eliminar valores.

Cambiar elementos de un Array

Para cambiar un elemento dentro de un array, usamos la notación de corchetes ([]), igual que cuando lo accedemos, pero asignándole un nuevo valor. 
const animals = ['gatos', 'perros', 'aves'];
animals[0] = 'caballos'; // Cambia el primer elemento
console.log(animals); // => [ 'caballos', 'perros', 'aves' ]

Un dato curioso aquí es que animals está declarado con const, pero aun así podemos modificar su contenido. Esto se debe a que const solo impide reasignar toda la variable, pero no evitar modificar los datos dentro del array.

const animals = ['gatos', 'perros', 'aves'];
animals[2] = 'peces'; // Modificamos un valor dentro del array
console.log(animals); // => [ 'gatos', 'perros', 'peces' ]

// Esto sí da error porque intentamos reemplazar toda la referencia del array
animals = ['peces', 'gatos']; 
// Uncaught TypeError: Assignment to constant variable.

Agregar elementos al final: push()

Cuando queremos añadir un elemento al final de un array, usamos push(). 
const animals = ['gatos', 'perros', 'aves'];
animals.push('caballos');
console.log(animals); // => [ 'gatos', 'perros', 'aves', 'caballos' ]

Agregar elementos al Inicio: unshift()

Si necesitamos agregar un elemento al inicio de un array, usamos unshift(). 
const animals = ['gatos', 'perros', 'aves'];
animals.unshift('caballos');
console.log(animals); // => [ 'caballos', 'gatos', 'perros', 'aves' ]

Agregar elementos en una posición específica

Podemos agregar un valor en una posición específica con la misma sintaxis usada para modificar elementos:

const animals = ['gatos', 'perros', 'aves'];
animals[3] = 'caballos';
console.log(animals); // => [ 'gatos', 'perros', 'aves', 'caballos' ]

Si intentamos asignar un valor en un índice más grande que la longitud actual del array, JavaScript llenará los espacios intermedios con undefined:

const animals = ['gatos', 'perros'];
animals[5] = 'caballos';
console.log(animals); 
// => [ 'gatos', 'perros', <3 empty items>, 'caballos' ]

Eliminar elementos de un array

Para eliminar un elemento sin modificar la estructura del array, podemos usar delete. 
const animals = ['gatos', 'perros', 'aves'];
delete animals[1]; // Eliminamos el segundo elemento
console.log(animals); // => [ 'gatos', <1 empty item>, 'aves' ]
⚠️ El método delete no reduce el tamaño del array, solo deja un "hueco" con un empty item.

⏬ Por ejemplo:

console.log(animals.length); // 3 (aunque eliminamos un elemento)
Por esta razón, no es recomendable usar delete con arrays.

En próximas lecciones veremos mejores formas de eliminar elementos sin dejar vacíos en el array.

Resumen

  • Los arrays pueden modificarse, a diferencia de los tipos primitivos.
  • Podemos cambiar sus elementos accediendo con su índice y asignando un nuevo valor.
  • Para agregar elementos:
    • push() los añade al final.
    • unshift() los añade al inicio.
  • Para eliminar elementos: delete funciona, pero deja espacios vacíos, por lo que no se recomienda.

Más adelante exploraremos métodos más adecuados para eliminar elementos sin afectar la integridad del array. ¡Práctica estos cambios en un editor y experimenta con los diferentes métodos!

Siguiente→
NavegaciónTeoría

Completado

0 / 21

→