Arrays en JavaScript: qué son y cómo acceder a sus elementos
En esta página
Seguí leyendo
Enterate del próximo post
Un mail cuando publico algo nuevo. Sin spam y te podés dar de baja cuando quieras.
Un mail cuando publico algo nuevo. Sin spam y te podés dar de baja cuando quieras.
El post anterior sobre funciones de orden superior mostró funciones que reciben o devuelven otras funciones. El próximo paso de la serie, los métodos map, reduce y filter, aplica esa misma idea sobre una estructura que todavía no apareció en ningún ejemplo: el array, una colección ordenada de varios valores. Antes de esos métodos hace falta la sintaxis mínima para crear un array, leer uno de sus valores y saber cuántos tiene.
const frutas = ["manzana", "banana", "pera"];
console.log(frutas);
// [ 'manzana', 'banana', 'pera' ]Un array se escribe entre corchetes, con los valores separados por comas. Es otra forma de declarar un valor con let o const, igual que cualquier variable vista hasta acá, solo que en vez de guardar un único valor guarda varios, en un orden fijo. Cada valor dentro del array se llama elemento.
const numeros = [10, 20, 30, 40];
console.log(numeros);
// [ 10, 20, 30, 40 ]Los elementos pueden ser de cualquier tipo ya conocido (números, strings), sin ninguna regla nueva sobre qué puede ir adentro: son los mismos valores que ya podían guardarse en una variable suelta, ahora agrupados varios a la vez.
const frutas = ["manzana", "banana", "pera"];
console.log(frutas[0]);
// manzana
console.log(frutas[1]);
// bananaCada elemento tiene una posición, y se accede a ella con corchetes después del nombre del array. Las posiciones empiezan en 0, no en 1: frutas[0] es el primer elemento, frutas[1] el segundo, y así. Es la misma convención que usan la mayoría de los lenguajes de programación, aunque al principio resulte poco intuitiva.
const frutas = ["manzana", "banana", "pera"];
console.log(frutas[3]);
// undefinedfrutas tiene tres elementos, en las posiciones 0, 1 y 2. La posición 3 no existe. Pedirla no genera ningún error: devuelve undefined, el mismo valor que aparece cuando una función no tiene return. Es una forma silenciosa de indicar que ahí no hay nada, no una falla que detenga el programa.
const frutas = ["manzana", "banana", "pera"];
frutas[1] = "kiwi";
console.log(frutas);
// [ 'manzana', 'kiwi', 'pera' ]El mismo operador = que asigna un valor a una variable sirve para asignar un valor a una posición puntual del array. frutas[1] = "kiwi" no reemplaza el array entero: cambia solo lo que hay en la posición 1, y deja las otras dos posiciones intactas.
const frutas = ["manzana", "banana", "pera"];
frutas[0] = "kiwi";
console.log(frutas);
// [ 'kiwi', 'banana', 'pera' ]
frutas = ["otro"];
// TypeError: Assignment to constant variable.const declarado sobre un array no impide cambiar lo que hay adentro: frutas[0] = "kiwi" funciona sin problema. Lo que const prohíbe es reasignar el nombre frutas a un array distinto, el mismo TypeError que ya apareció al intentar PI = 3 en el post de variables y funciones. const fija el nombre a ese array puntual, no congela su contenido.
const frutas = ["manzana", "banana", "pera"];
console.log(frutas.length);
// 3length es una propiedad del array (un valor asociado a él, al que se accede con un punto) que indica cuántos elementos tiene. Se actualiza sola si el array cambia de tamaño, aunque este post no cubre todavía ninguna forma de agregar o quitar elementos.
const vacio = [];
console.log(vacio.length);
// 0Un array sin ningún elemento sigue siendo un array válido: [] es el literal más chico posible, con length en 0. No tiene ninguna posición para leer, ni siquiera la 0: pedirla da undefined, la misma regla ya vista para cualquier posición fuera de rango.
Un array es una colección ordenada de valores escrita entre corchetes. Cada valor tiene una posición fija que empieza en 0, y se accede a ella con corchetes:
array[posición]. La propiedadlengthindica cuántos elementos tiene. Declarar el array conconstfija el nombre a esa colección puntual, no impide cambiar lo que hay en cada posición.
El próximo post trata map, reduce y filter: los métodos que recorren un array aplicando una función a cada elemento, la misma idea de las funciones de orden superior del post anterior, ahora sobre esta estructura.