Sintaxis — JS: Arrays

• Declaración de un Array
• Acceder a los Elementos de un Array
• Tamaño de un Array: .length
• Uso de variables como Índices
• Acceder al último elemento con .at()

📝 Imagina que quieres hacer una lista de compras. Puedes escribir cada producto en una variable separada, pero si son muchos, se vuelve poco práctico. Aquí es donde los arrays nos facilitan la vida.

Un array puede usarse para guardar cosas como:

• Una lista de cursos en una plataforma de aprendizaje.
• Los nombres de los estudiantes de un grupo.
• Tus amigos en una red social.

Vamos a ver cómo funcionan paso a paso.

Declaración de un Array

La forma más sencilla de crear un array es usando corchetes []. Podemos empezar con un array vacío o con algunos valores:

// Un array vacío
const items = [];

// Un array con animales
const animals = ['cats', 'dogs', 'birds'];

Aquí animals es un array que contiene tres elementos: 'cats', 'dogs' y 'birds'. En programación, es común nombrar los arrays en plural, porque representan un conjunto de elementos. Esto hace que el código sea más fácil de leer.

Acceder a los Elementos de un Array

Cada elemento del array tiene un índice, que empieza desde 0. Así que el primer elemento se encuentra en la posición 0, el segundo en la 1, y así sucesivamente.

const animals = ['cats', 'dogs', 'birds'];

console.log(animals[0]); // 'cats'
console.log(animals[1]); // 'dogs'
console.log(animals[2]); // 'birds'

Si intentamos acceder a un índice que no existe, el resultado será undefined:

console.log(animals[3]); // undefined

Tamaño de un Array: .length

Los arrays tienen una propiedad llamada .length, que nos dice cuántos elementos hay en la lista.

const animals = ['cats', 'dogs', 'birds'];

console.log(animals.length); // 3

Como los índices comienzan en 0, el último índice siempre será length - 1.

console.log(animals[animals.length - 1]); // 'birds'

Este truco es útil cuando queremos acceder al último elemento sin importar cuántos haya en el array.

Uso de variables como Índices

En muchos casos, el índice que queremos usar se calcula o viene de otra parte del programa. Podemos usar variables para manejar esto:

let i = 1;
const animals = ['cats', 'dogs', 'birds'];

console.log(animals[i]); // 'dogs'

También podemos hacer operaciones dentro de los corchetes []:

let i = 1;
let j = 1;
console.log(animals[i + j]); // 'birds'

Incluso podemos usar funciones para obtener el índice de forma dinámica:

const getIndexOfSecondElement = () => 1;
console.log(animals[getIndexOfSecondElement()]); // 'dogs'

Acceder al último elemento con .at()

En lugar de calcular manualmente length - 1, JavaScript nos ofrece el método .at(), que permite acceder a elementos con índices negativos.

const animals = ['cats', 'dogs', 'birds'];

console.log(animals.at(0));  // 'cats'
console.log(animals.at(1));  // 'dogs'
console.log(animals.at(-1)); // 'birds' (último elemento)
console.log(animals.at(-2)); // 'dogs' (penúltimo elemento)

Esto nos ahorra trabajo cuando queremos obtener elementos desde el final del array sin hacer cálculos.

Con estas herramientas, ya puedes empezar a trabajar con arrays en JavaScript y organizar datos de forma más eficiente.

Materiales adicionales

1. Array / MDN Web Docs