What are and how to use Arrays in JavaScript

In Javascript, Arrays are a data structure that allows us to work with an ordered collection of elements, where each element has a numerical position (known as an index).

Array indices in JavaScript start from 0, meaning the first element has an index of 0, the second an index of 1, and so on.

In JavaScript, arrays are dynamic, meaning they can change in size and contain values of different types.

Creating Arrays

To declare an Array in Javascript, use the following syntax:

let miArray = [valor1, valor2, valor3, ...];

In Javascript, an Array can contain values of any data type (including other objects and functions).

let numeros = [1, 2, 3, 4, 5];
let frutas = ["manzana", "banana", "cereza"];

let numeros = new Array(1, 2, 3, 4, 5);
let frutas = new Array("manzana", "banana", "cereza");

let arrayVacio = [];
let otroArrayVacio = new Array();

let arrayDeTamano = new Array(10); // Creates an array with 10 empty elements

Accessing Elements

To access elements of an Array in Javascript, we use the numerical index corresponding to each element.

The first element of an Array has an index of 0, the second has an index of 1, and so on.

For example, if we want to access the second element of an Array named miArray, we can do it as follows:

let frutas = ["manzana", "banana", "cereza"];
console.log(frutas[0]); // "manzana"
console.log(frutas[1]); // "banana"
console.log(frutas[2]); // "cereza"

console.log(frutas[10]); // undefined

Modifying Elements

We can also modify the value of an Array element using its numerical index:

let numeros = [1, 2, 3, 4, 5];
numeros[2] = 10;
console.log(numeros); // [1, 2, 10, 4, 5]

Basic Usage

const frutas = ["manzana", "naranja"];
frutas.push("plátano");
console.log(frutas); // ["manzana", "naranja", "plátano"]

frutas.unshift("pera");
console.log(frutas); // ["pera", "manzana", "naranja", "plátano"]

const frutas = ["manzana", "naranja", "plátano"];
frutas.pop();
console.log(frutas); // ["manzana", "naranja"]

frutas.shift();
console.log(frutas); // ["naranja"]

const numeros = [1, 2, 3, 4, 5];
const subArray = numeros.slice(1, 4);
console.log(subArray); // [2, 3, 4]

const numeros = [1, 2, 3, 4, 5];
numeros.splice(2, 1, 99); // Replaces the element at index 2 with 99
console.log(numeros); // [1, 2, 99, 4, 5]

const frutas = ["manzana", "naranja", "plátano"];
console.log(frutas.indexOf("naranja")); // 1
console.log(frutas.includes("pera")); // false

const miArray = [10, 20, 30];
console.log(miArray.length); // 3

Multidimensional Arrays

Arrays in JavaScript can contain other arrays as elements, allowing the creation of multidimensional arrays.

let matriz = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];
console.log(matriz[0][0]); // 1
console.log(matriz[1][2]); // 6

Iterating Over an Array

We can iterate over the elements of an Array in different ways

let numeros = [1, 2, 3, 4, 5];
for (let i = 0; i < numeros.length; i++) {
    console.log(numeros[i]);
}

let numeros = [1, 2, 3, 4, 5];
for (let numero of numeros) {
    console.log(numero);
}

let numeros = [1, 2, 3, 4, 5];
numeros.forEach(function(numero) {
    console.log(numero);
});

Practical Examples

const numeros = [10, 20, 30, 40, 50];
const suma = numeros.reduce((acum, num) => acum + num, 0);
const promedio = suma / numeros.length;
console.log(promedio); // 30

const numeros = [1, 2, 3];
const cuadrados = numeros.map((num) => num ** 2);
console.log(cuadrados); // [1, 4, 9]

const numeros = [1, 2, 3, 4, 5];
const pares = numeros.filter((num) => num % 2 === 0);
console.log(pares); // [2, 4]

const numeros = [1, 2, 3, 4];
const suma = numeros.reduce((acumulador, actual) => acumulador + actual, 0);
console.log(suma); // 10