¿Qué es un Array en Javascript?

El operador []

Por otro lado, si lo que queremos es acceder a un elemento específico del array, no hay más que utilizar el operador [], al igual que lo podríamos hacer con los para acceder a un carácter concreto. En este caso, accedemos a la posición del elemento que queremos recuperar sobre el array:

const letters = ["a", "b", "c"];

letters.length;   // 3
letters[0];       // 'a'
letters[2];       // 'c'
letters[5];       // undefined

Recuerda que las posiciones empiezan a contar desde 0 y que si intentamos acceder a una posición que no existe (mayor del tamaño del array), nos devolverá un .

El operador [] no sólo nos permite obtener o acceder a un elemento del array, sino que también nos permite modificar un elemento específico del array, si utilizamos la asignación:

const letters =  ["a", "b", "c"];

letters[1] = "Z";  // Da "Z" y modifica letters a ["a", "Z", "c"]
letters[3] = "D";  // Da "D" y modifica letters a ["a", "Z", "c", "D"]
letters[5] = "A";  // Da "A" y modifica letters a ["a", "Z", "c", "D", undefined, "A"]

El método .at()

Además del clásico operador [], también podemos utilizar el método .at(), añadido en Javascript . Con él, se puede hacer exactamente lo mismo que con [pos], sólo que además permite valores negativos, mediante los cuales se puede obtener elementos en orden inverso, es decir, empezando a contar desde el último elemento:

const letters = ["a", "b", "c"];

letters.at(0);    // "a"
letters.at(1);    // "b"
letters.at(3);    // undefined
letters.at(-1);   // "c"
letters.at(-2);   // "b"

Esta característica hace que acceder al último elemento (o cercanos) sea bastante práctico, ya que hacer la misma operación con el operador [] era algo menos directo que en algunos casos se podría volver confuso o poco intuitivo:

const letters = ["a", "b", "c"];
const lastItem = letters.length - 1;

letters[lastItem];    // "c"

El método .with()

Ten en cuenta que con el nuevo método .with(), se puede hacer esto de una forma más cómoda y sin modificar el array original. Permite encadenar múltiples operaciones, pero ten en cuenta que sólo modifica, no se pueden añadir elementos que no existen antes en el array:

const letters =  ["a", "b", "c"];

letters.with(1, "Z");   // Devuelve "Z" y modifica letters a ["a", "Z", "c"]
letters.with(1, "Z")
       .with(3, "D");   // No se puede hacer porque la posición 3 no existe
letters.with(5, "A");   // No se puede hacer porque la posición 5 no existe

Convertir a array

El método estático Array.from(), aunque ahora quizás no le encontremos mucha utilidad, nos resultará muy interesante más adelante. Este método se suele utilizar para convertir variables «parecidas» a los arrays (pero que no son arrays) en un . Este es el caso de variables como Strings o de lista de elementos del DOM:

const text = "12345";
text.constructor.name;                          // "String"

const letters = Array.from(text);               // ["1", "2", "3", "4", "5"]
const letters = [...text];                      // ["1", "2", "3", "4", "5"]

const divs = document.querySelectorAll("div");
divs.constructor.name;                          // "NodeList"

const elements = Array.from(divs);              // [div, div, div]
const elements = [...divs];                     // [div, div, div]

Como se puede ver, es algo muy similar a lo que hacemos con la desestructuración de arrays. Pero no todos los elementos se pueden convertir a arrays. Por ejemplo, si intentamos convertir un undefined o un null, nos dará un error similar a Uncaught TypeError: null is not iterable.

De forma opcional, Array.from(obj) puede recibir un parámetro adicional: una función que actuará de forma idéntica a una función map(). Veamos el funcionamiento:

const text = "12345";

const numbers = Array.from(text, (number) => Number(number));   // [1, 2, 3, 4, 5]
const numbers = Array.from(text, Number);                       // Equivalente al anterior

// Equivalente a los dos anteriores
const numbers = [...text].map(Number);

Observa que en este caso, la función pasada por segundo parámetro del Array.from() se ejecutará por cada uno de los elementos de text, y en este caso concretamente, la función (number) => Number(number) fuerza a convertir cada elemento en un número. La diferencia respecto al ejemplo anterior, es que en este caso obtienes un array de números, mientras que el anterior obtenías un array de textos.

Si lo que buscas es convertir un objeto de Javascript en un , probablemente te interese el tema de Iteradores de objetos donde vemos métodos como Object.keys(), Object.values() u Object.entries().

Concatenar arrays

Al igual que en los , en los tenemos el método concat(), que nos permite unir los elementos pasados por parámetro en un array a la estructura que estamos manejando. Se podría pensar que los métodos .push() y concat() funcionan de la misma forma, pero no es exactamente así. Veamos un ejemplo:

const elements = [1, 2, 3];

elements.push(4, 5, 6);     // Devuelve 6. Ahora elements = [1, 2, 3, 4, 5, 6]
elements.push([7, 8, 9]);   // Devuelve 7. Ahora elements = [1, 2, 3, 4, 5, 6, [7, 8, 9]]

Ahora veamos el mismo ejemplo realizado con el método .concat():

const firstPart = [1, 2, 3];
const secondPart = [4, 5, 6];

firstPart.concat(firstPart);              // Devuelve [1, 2, 3, 1, 2, 3]
firstPart.concat(secondPart);             // Devuelve [1, 2, 3, 4, 5, 6]

// Se pueden pasar elementos sueltos
firstPart.concat(4, 5, 6);                // Devuelve [1, 2, 3, 4, 5, 6]

// Se pueden concatenar múltiples arrays e incluso mezclarlos con elementos sueltos
firstPart.concat(firstPart, secondPart, 7);  // Devuelve [1, 2, 3, 1, 2, 3, 4, 5, 6, 7]

Observa un detalle muy importante: El método concat(), a diferencia de push(), no modifica el array sobre el cuál trabajamos y al que le añadimos los elementos, sino que simplemente lo devuelve. Al margen de esto, observa que en el caso de pasar un array por parámetro, push() lo inserta como un array, mientras que concat() inserta cada uno de sus elementos.

También hay que tener cuidado al utilizar el operador + con los arrays. A diferencia de lo que quizás puede parecer intuitivo, utilizando este operador no se añaden los elementos al array, sino que se convierten los arrays en string y luego se concatenan. Veremos más sobre estas conversiones implícitas en temas posteriores.

Separar y unir strings

Además, también tenemos otro método con el que es posible crear un a partir de un . Se trata del método .split() que vimos en el tema de los . En este caso, el método .join() es su contrapartida. Con .join() podemos crear un con todos los elementos del array, separándolo por el texto que le pasemos por parámetro:

const letters = ["a", "b", "c"];

// Une elementos del array por el separador indicado
letters.join("->");       // Devuelve 'a->b->c'
letters.join(".");        // Devuelve 'a.b.c'

// Separa elementos del string por el separador indicado
"a.b.c".split(".");       // Devuelve ['a', 'b', 'c']
"5-4-3-2-1".split("-");   // Devuelve ['5', '4', '3', '2', '1']

Ten en cuenta que, como se puede ver en los ejemplos, .join() siempre devolverá los elementos como , mientras que .split() devolverá un .

Observa un caso especial, en el que pasamos un cadena de texto vacía al .split():

"Hola a todos".split("");   // ['H', 'o', 'l', 'a', ' ', 'a', ' ', 't', 'o', 'd', 'o', 's']

En este caso, le hemos pedido dividir el sin indicar ningún separador, por lo que Javascript toma la unidad mínima como separador: nos devuelve un con cada carácter del original. Ten en cuenta que los espacios en blanco también cuentan como carácter.