Cómo crear y manejar arrays en JavaScript.

¿Qué es un array en JavaScript?

Un par de corchetes [ ] representan un array en JavaScript. Dentro, sus elementos estarán separados por una coma.

Los arrays en JavaScript son una colección de elementos de distintos tipos. Esto quiere decir que en un array podremos almacenar tanto cadenas (string), números (number), boleanos (boolean), objectos (object) u otros arrays.

Definir un array

La forma de definir un array en JavaScript es la siguiente:

// En una sola línea
const estaciones = ["Primavera", "Verano", "Otoño"];

// En varias líneas
const estaciones = [
"Primavera",
"Verano",
"Otoño"
];

// Array de varios tipos de dato
const mixedTypedArray = [100, -8, 0, false, null, 'lorem ipsum', {}];

Se puede definir en una o en varias líneas, ya que no tiene en cuenta los saltos de línea ni los espacios. Sí es importante destacar que después del último elemento no se debe colocar una coma, porque crearía problemas de inconsistencia a algunos navegadores.

Otra forma de declarar un array es utilizando el constructor Array:

const estaciones = new Array("Primavera", "Verano", "Otoño");

Funciona igual que la anterior, pero se recomienda la primera por simplicidad y rapidez en su ejecución.

Posición de los elementos en un array

La posición de un elemento en un array es conocido como index o índice en español.

En JavaScript el array comienza en la posición 0 y se incrementa en uno con cada elemento que añadimos.

const estaciones = ["Primavera", "Verano", "Otoño"];

En el ejemplo anterior, el índice 0 es «Primavera» y el índice 2 es «Otoño».

El número de elementos en un array determina su tamaño. Por ejemplo, el tamaño del anterior ejemplo es 3.

El tamaño de un array de JavaScript no es fijo, es variable.

Acceder a un elemento del array

Para acceder a un elemento concreto del array, utilizaremos su índice numérico.

const estaciones = ["Primavera", "Verano", "Otoño"];
console.log(estaciones[1]); // Verano

Al igual que en otros lenguajes de programación, el primer elemento de un array de JavaScript es el [0].

Según tus necesidades, puedes acceder a una posición del array de esta forma, o mediante un bucle en el que recorras todas las posiciones.

Podríamos utilizar la longitud del array para acceder a los elemntos hacia atrás, como en el siguiente ejemplo de código:

const estaciones = ["Primavera", "Verano", "Otoño"];
const len = estaciones.length;
console.log(estaciones[len -1]); // Otoño

Para recorrer un array podremos utilizar for, foreach u otro tipo de bucle.

const estaciones = ["Primavera", "Verano", "Otoño"];
for(let i=0; i<estaciones.length; i++) {
    console.log(`La posición ${i} es ${estaciones[i]}`);
}

El resultado sería:

// La posición 0 es Primavera
// La posición 1 es Verano
// La posición 2 es Otoño

Añadir un elemento a un array

La forma más natural de añadir un elemento a un array es utilizar el método push(). Este método añadirá el nuevo elemento al final del array. Por ejemplo:

const estaciones = ["Primavera", "Verano", "Otoño"];
estaciones.push("Invierno");
console.log(estaciones); // [ "Primavera", "Verano", "Otoño", "Invierno" ]

Si en tu caso necesitaras añadir el elemento al principio del array, utilizarías el método unshift(), como en el siguiente ejemplo:

const estaciones = ["Primavera", "Verano", "Otoño"];
estaciones.unshift("Invierno");
console.log(estaciones); // [ "Invierno", "Primavera", "Verano", "Otoño" ]

Cómo eliminar elementos de un array

La forma más sencilla de eliminar un elemento de un array es utilizando el método pop().

Cuando llamas a este método, elimina el último elemento del array. Además, te retorna el elemento que ha sido eliminado.

const estaciones = ["Primavera", "Verano", "Otoño"];
const eliminado = estaciones.pop();
console.log(eliminado); // Otoño
console.log(estaciones); // [ "Primavera", "Verano" ]

Para eliminar el primer elemento de un array disponemos del método shift(). Al igual que en el caso anterior, la llamada a este método nos devolverá el valor eliminado.

const estaciones = ["Primavera", "Verano", "Otoño"];
const eliminado = estaciones.shift();
console.log(eliminado); // Primavera
console.log(estaciones); // [ "Verano", "Otoño" ]

Copiar o clonar arrays en JavaScript

Para copiar y clonar un array utilizaremos el método slice(). Este método no modificará ni alterará en nada el array original. En su lugar, crea una nueva copia superficial de la matriz original.

const estaciones = ["Primavera", "Verano", "Otoño"];
const estacionesCopia = estaciones.slice();
console.log(estaciones); // [ "Primavera", "Verano", "Otoño" ]
console.log(estacionesCopia); // [ "Primavera", "Verano", "Otoño" ]
console.log(estaciones == estacionesCopia); // false
console.log(estaciones === estacionesCopia); // false

Comprobar si un valor es array en JavaScript

Para determinar si un valor es array utilizaremos el método Array.isArray(). Este méodo devolverá true si el valor es un array o false si no lo es.

console.log(Array.isArray([])); // true
console.log(Array.isArray(["Primavera", "Verano", "Otoño"])); // true
console.log(Array.isArray({})); // false
console.log(Array.isArray({'nombre' : 'Manuel'})); // false

Arrays asociativos

En JavaScript no podemos crear arrays asociativos como en otros lenguajes, utilizando como índices un texto, pero sí un utilizando índices numéricos:

	var buscador = [];
	buscador[0] = "Google";
	buscador[1] = "Bing";

	var x = buscador[0]; // Google
	var y = buscador.lenght; //2

Si intentáramos utiliza índices con nombres:

	var coche = [];
	coche["color"] = "Azul";
	coche["marca"] = "Audi";

	var x = coche[0]; // undefined
	var y = coche.length; // 0

Validar una variable tipo array

Partiendo del siguiente array, lo validaremos de varias formas.

	var estaciones = ["Primavera", "Verano", "Otoño"];

Con Array.isArray()

	Array.isArray(estaciones);  // devuelve true

Inconveniente: no está soportado por navegadores antiguos.

Con isArray()

Creamos una función propia:

	function isArray(estaciones) {
  		return x.constructor.toString().indexOf("Array") > -1;
	}

Con instanceof

	estaciones instanceof Array; // devuelve true