Fundamentos de JavaScript (parte V) —arrays

4 min readMay 19, 2021

En el anterior artículo vimos los tipos básicos (cadenas, numéricos y booleans), pero nos dejamos 2 tipos “básicos” en la gestión de variables.

Uno de ellos, y del que vamos a hablar hoy, son los Arrays

Arrays

Los arrays (o arreglos en angloparlante), representan una colección de variables accesibles desde un mismo nombre.

Veamoslo con un ejemplo.

Supongamos que estamos diseñando una aplicación para almacenar las notas de los alumnos. Cuando asignemos una nota a un alumno, podríamos hacer algo tal que:

let nota = 6

Si tuviéramos más de un alumno, podríamos ir utilizando distintas variables:

let notaOliver = 7
let notaJuan = 8

Sin embargo, esto no es gestionable cuando empiezan a crecer los alumnos (y ya ni hablemos de gestionar varias clases!!).

Para poder gestionar este tipo de estructuras, existen los arrays. Para que nos hagamos una idea mental, sería como tener un conjunto de elementos agrupados bajo un mismo nombre. Es decir, algo así como un archivador de documentos, donde puedes acceder a cada uno de los documentos (elementos) mirando en el archivador

let archivador = [1,1,1,2,2,2]

En el código anterior, hemos creado un array en el que hemos almacenado 6 valores (tres unos y tres doses).

Podemos generar arrays de cualquier tipo de dato soportado por JS

let numericArray = [1,2,3,2,1]
let stringArray = ['uno','dos','tres','catorce','dieciséis']
let floatArray = [1.0,1.1,1.2]

Incluso, podemos mezclar los tipos en el array

let mixArray = [1,'dos',3.1415]

e inicializarlo sin ningún tipo de valor

let archivador = []

Manejo

Para el manejo básico de los elementos del array, utilizaremos la sintáxis

let valor = nombreArray[índice]   // leer el valor a una variable
nombreArray[índice] = valor       // cambiar el valor del elemento

Por ejemplo

let miArray = [1,2,3]    // inicializaciónlet valor = miArray[2]   // valor = 3
valor[0] = 3             // miArray = [3,2,3]

Es importante saber que, los arrays SIEMPRE EMPIEZAN EN LA POSICIÓN 0. Por lo tanto, el primer elemento siempre será array[0] y, el último elemento array[longitud -1].

Para poder trabajar con los arrays, necesitamos conocer también:

Cómo recorrer el array (iterarlo)
Cómo acceder a cada uno de los elementos
Cómo añadir/eliminar/modificar los elementos

los arrays siempre empiezan en la posición 0

Acceso

El acceso a los elementos de un array, como ya hemos visto, se realiza mediante la sintáxis

array[indice]

Esto nos permite acceder a los elementos del array.

Para conocer cuantos elementos tiene un array, utilizaremos la propiedad .length

let array = [1,2,3]console.log(array.length)
$> 3

Podemos acceder a los elementos de un array para leer su valor o para cambiarlo:

let array = [1,2,3]array[0] = 4  // modificamos el valor 
console.log(array[0]) // leemos el valor
// salida: 4console.log(array)
// salida: [4,2,3]

Iterar

Una vez que conocemos cuantos elementos tiene el array y, como acceder a cada elemento individual, ya podemos iterar los distintos elementos del array. Para ello, podemos hacerlo de varias formas

let miArray = [1,1,1,2,2,2]for (let index = 0; index < miArray.length; index++) { // clásica
  console.log(index + ': ' + miArray[index])
}
$> 0: 1 
$> 1: 1 
$> 2: 1 
$> 3: 2 
$> 4: 2 
$> 5: 2for (const item of miArray) { // item contendrá cada elemento
  console.log(item)
}
$> 1 
$> 1 
$> 1 
$> 2 
$> 2 
$> 2for (const index in miArray) { // index contendrá los índices
  console.log(index + ': ' + miArray[index])
l
$> 0: 1 
$> 1: 1 
$> 2: 1 
$> 3: 2 
$> 4: 2 
$> 5: 2

Es importante conocer la diferencia entre los distintos métodos. No hay ninguno mejor ni peor, simplemente usaremos uno u otro cuando necesitemos acceder al índice o no.

Podemos utilizar la iteración para modificar los valores de los elementos:

let miArray = [1,1,1,2,2,2]for (let index = 0; index < miArray.length; index++) { 
  miArray[index] = miArray[index] * 2
}console.log(miArray)
// salida: [2,2,2,4,4,4]

Modificación

Los arrays en JavaScript pueden ser modificados dinámicamente en tamaño. Esto quiere decir que puedo añadir y eliminar elementos del array en función de las necesidades del programa.

Para añadir y eliminar elementos de un array, podemos utilizar las funciones push y pop

let array = [] // inicializamos el array vacíoarray.push('mundo') // añadimos 'mundo' al principio del array
console.log(array)
// salida: ['mundo']array.push('hola') // añadimos 'hola' al principio del array
console.log(array)
// salida: ['hola','mundo']let primeraPalabra = array.pop() // sacamos el primer elemento
console.log(primeraPalabra)
// salida: 'hola'console.log(array)
// salida: ['mundo']

push: Añade elementos en el inicio del array (en la posición 0), desplazando el resto de elementos una posición
pop: Devuelve y eliminar el primer valor del array

Enlaces: