- Cambiar elementos de un Array
- Agregar elementos al final: push()
- Agregar elementos al Inicio: unshift()
- Eliminar elementos de un array
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
[]), 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()
push().
const animals = ['gatos', 'perros', 'aves'];
animals.push('caballos');
console.log(animals); // => [ 'gatos', 'perros', 'aves', 'caballos' ]
Agregar elementos al Inicio: unshift()
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
delete.
const animals = ['gatos', 'perros', 'aves'];
delete animals[1]; // Eliminamos el segundo elemento
console.log(animals); // => [ 'gatos', <1 empty item>, 'aves' ]
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)
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:
deletefunciona, 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!
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
