Modificando arreglos

Generated avatar
javascript arreglos

Tabla de contenido

Ahora sabemos que los arreglos nos permiten almacenar múltiples valores en una sola variable.

Nos toca aprender a modificarlos: agregando, eliminando o cambiando sus elementos según necesitemos.

Analogía

Piensa en un arreglo como una estantería con cajones numerados. Cada cajón puede guardar un objeto, y podemos:

  • Cambiar lo que hay en un cajón específico
  • Agregar un nuevo cajón al inicio o al final
  • Quitar el primer o último cajón

Esto es exactamente lo que hacemos cuando modificamos un arreglo en JavaScript.

🔄 Sobreescritura

Si queremos cambiar el valor de alguna posición, podemos usar la notación de corchetes y asignar un nuevo valor:

let miArreglo = ["Hola", "desde", "un", "arreglo"];
miArreglo[2] = "otro";
console.log(miArreglo);

Terminal window
["Hola", "desde", "otro", "arreglo"]

Los arreglos tienen distintas características que nos pueden ayudar a modificarlos.

En términos técnicos les llamamos métodos (methods), la forma de usarlos es mediante la notación punto (.).

➕ Para agregar valores

Agregando al final con push()

Podemos acceder al método push() de un arreglo para agregar un elemento al final.

let miArreglo = ["Hola", "desde", "un", "arreglo"];
miArreglo.push("editado");
console.log(miArreglo);

Terminal window
["Hola", "desde", "un", "arreglo", "editado"]

Agregando al inicio con unshift()

Si queremos agregar un elemento al inicio del arreglo, usamos unshift():

let miArreglo = ["Hola", "desde", "un", "arreglo"];
miArreglo.unshift("¡Nuevo!");
console.log(miArreglo);

["¡Nuevo!", "Hola", "desde", "un", "arreglo"];

➖ Para borrar valores

Borrando el último con pop()

Podemos acceder al método pop() de un arreglo para eliminar el último elemento:

let miArreglo = ["Hola", "desde", "un", "arreglo"];
miArreglo.pop();
console.log(miArreglo);

Terminal window
["Hola", "desde", "un"]

Borrando el primero con shift()

Si queremos eliminar el primer elemento, usamos shift():

let miArreglo = ["Hola", "desde", "un", "arreglo"];
miArreglo.shift();
console.log(miArreglo);

Terminal window
["desde", "un", "arreglo"]
INFO

Existen más maneras de modificar arreglos, pero por ahora sólo veremos esas.

📝 Resumen
MétodoSintaxisDescripción
Sobreescrituraarreglo[índice] = valorCambia el valor en una posición específica del arreglo
push()arreglo.push(valor)Agrega un elemento al final del arreglo
unshift()arreglo.unshift(valor)Agrega un elemento al inicio del arreglo
pop()arreglo.pop()Elimina y devuelve el último elemento del arreglo
shift()arreglo.shift()Elimina y devuelve el primer elemento del arreglo
☝️🤓
🏋️‍♂️ Ejercicio

Sobreescribiendo valores

  • Tienes un arreglo con los días de la semana en inglés.
  • Cambia “Wednesday” por “Miércoles”.
  • Cambia “Friday” por “Viernes”.
let diasSemana = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];


// Completa el código aquí
diasSemana[__] = "________";
diasSemana[__] = "________";


console.log(diasSemana);

🏋️‍♂️ Ejercicio

Agregando elementos

  • Tienes un arreglo con una lista de frutas.
  • Agrega “Manzana” al inicio usando unshift().
  • Agrega “Uvas” al final usando push().
let frutas = ["Plátano", "Naranja", "Pera"];


// Completa los métodos necesarios aquí
frutas.______("______");
frutas.______("______");


console.log(frutas);

🏋️‍♂️ Ejercicio

Eliminando elementos

  • Tienes un arreglo con una lista de colores.
  • Elimina el primer color usando shift().
  • Elimina el último color usando pop().
let colores = ["Rojo", "Verde", "Azul", "Amarillo"];


// Completa los métodos necesarios aquí
colores._____();
colores._____();


console.log(colores);

🚀 Extra

Nos toca investigar qué otros métodos existen para los arreglos.

¿Cuál nos sirve para modificar elementos en posiciones específicas dentro de un arreglo? No sólo al inicio y al final.

Comentarios

Compartir

Esta artículo aparece en estas rutas de aprendizaje

El curso más corto de programación (con JavaScript)

Conceptos fundamentales explicados de la manera más superficial para comenzar a entender de qué se trata la programación

Generated avatar