Crear y Acceder a Elementos de Arreglos

Generated avatar
javascript

Tabla de contenido

🛠️ Creando Arreglos

Ahora que sabemos qué son los arreglos, veamos cómo podemos crearlos en JavaScript.

1. Arreglos Literales (La forma más común)

La manera recomendada es usar corchetes [] y separar los elementos con comas ,:

// Un arreglo vacío
let tareasPendientes = [];


// Un arreglo de números
let numerosFavoritos = [7, 13, 42];


// Un arreglo de strings
let coloresPrimarios = ["Rojo", "Verde", "Azul"];


// Un arreglo mixto
let misCosasFavoritas = ["Fido", 3, "Perro", true];

2. Con el constructor new Array()

También podemos usar la palabra clave new Array(). Sin embargo, tiene algunos comportamientos que pueden ser confusos, por lo que generalmente se prefiere la forma literal [].

// Crear un arreglo con elementos
let frutas = new Array("Manzana", "Banana", "Naranja");
// Equivale a:
// let frutas = ["Manzana", "Banana", "Naranja"];

CUIDADO

Si pasamos un solo número, crea un arreglo vacío con esa longitud

let arregloVacioLargo = new Array(5);
// Crea [ , , , , ] (un arreglo con 5 espacios vacíos)


console.log(arregloVacioLargo.length); // Muestra 5
console.log(arregloVacioLargo[0]); // Muestra undefined

AVISO

⚠️ Por la confusión que puede generar new Array(numero), es mejor usar [] para crear arreglos.

🔍 Accediendo a Elementos

Una vez que tenemos un arreglo, ¿cómo obtenemos un valor específico?

Usamos el índice del elemento. ¿Recuerdas la analogía de los casilleros? Se numeran empezando por el 0.

Para acceder a un elemento, escribimos el nombre del arreglo seguido de corchetes [] con el número del índice dentro.

let herramientas = ["Martillo", "Destornillador", "Llave inglesa", "Sierra"];


// Acceder al primer elemento
console.log(herramientas[0]); // Muestra "Martillo"


// Acceder al tercer elemento
console.log(herramientas[2]); // Muestra "Llave inglesa"

¿Qué pasa si intento acceder a un índice que no existe?

Si intentas usar un índice que está fuera de los límites del arreglo (mayor o igual a su longitud, o negativo), JavaScript devolverá undefined.

console.log(herramientas[4]); // Muestra undefined (no hay elemento en el índice 4)
console.log(herramientas[-1]); // Muestra undefined (los índices negativos no funcionan así por defecto)

✏️ Modificando Elementos

Podemos cambiar el valor de un elemento existente de la misma forma que accedemos a él, usando el operador de asignación =.

let calificaciones = [7, 8, 5];
console.log(calificaciones[2]); // Muestra 5


// Cambiamos la calificación en el índice 2
calificaciones[2] = 9;


console.log(calificaciones[2]); // Muestra 9
console.log(calificaciones); // Muestra [7, 8, 9]

CUIDADO

Si asignamos un valor a un índice que está más allá del final del arreglo, JavaScript agrandará el arreglo y llenará los espacios intermedios con undefined (o valores vacíos llamados empty slots).

let numeros = [10, 20];
numeros[3] = 40; // Asignamos al índice 3
console.log(numeros); // Muestra [10, 20, <1 empty item>, 40]
console.log(numeros[2]); // Muestra undefined
console.log(numeros.length); // Muestra 4

Esto puede llevar a errores, ¡así que ten cuidado!

☝️🤓
🏋️‍♂️ Ejercicio
  1. Crea un arreglo llamado planetas que contenga los nombres de los planetas del sistema solar en orden desde el Sol.
  2. Muestra por consola el nombre del tercer planeta.
  3. Muestra por consola el nombre del último planeta.
  4. Crea una variable llamada planetaFavorito y asígnale el valor del quinto planeta del arreglo.
  5. Muestra la variable planetaFavorito por consola.
🏋️‍♂️ Ejercicio
  1. Crea un arreglo llamado inventario con los siguientes strings: "Manzanas", "Plátanos", "Naranjas".
  2. Cambia el segundo elemento (Plátanos) por "Fresas".
  3. Muestra el arreglo completo por consola para verificar el cambio.
  4. Intenta mostrar por consola el elemento en el índice 1
  5. ¿Qué resultado obtienes y por qué?
🚀 Extra

Investiga sobre:

  1. ¿Qué son los “empty slots” o “agujeros” (holes) en los arreglos de JavaScript y por qué es mejor evitarlos?
  2. ¿Puedes tener un arreglo dentro de otro arreglo? ¿Cómo accederías a un elemento del arreglo interno?
  3. ¿Hay alguna forma de acceder al último elemento de un arreglo sin saber su longitud exacta de antemano? (Pista: método .at())

Comentarios

Compartir

Esta artículo aparece en estas rutas de aprendizaje

Dominando conceptos: Arreglos

Aprende a trabajar con arreglos, desde los fundamentos hasta las técnicas avanzadas, una de las estructuras de datos más esenciales en JavaScript.

Generated avatar
DEV