Introducción a los arrays en JavaScript

Este capítulo número 11 lo voy a dedicar a explicar un poquito por encima lo que son los arrays. Un tema que ya empieza a poner mucho más interesante el curso, ya que dan para hacer muchas cosas.

Palabra del lenguaje nº 27 encontrada.
Un array es una forma ordenada de guardar un conjunto de elementos en una sola variable.

Los arrays, arreglos o matrices en español, son muy importantes. Son contenedores como las variables normales pero con la gran diferencia que son capaces de almacenar diversos valores y no solo uno como hemos visto en las otras variables hasta ahora.

Como dato "random", si ya sabes programar en Python, que sepas que los array son como las listas, son mutables y pueden almacenar más de un elemento.

Veamos un ejemplo:

let pizzaMargarita = ["masa","tomate","queso","especias"];

Esta variable llamada pizzaMargarita que almacena un array, podría ser la que almacenara los ingredientes que solicita un cliente a una pizzería a través de su sitio web.

Cuando sepas más JavaScript serás capaz de hacer una página de pedidos en la que el usuario vaya seleccionando ingredientes para su pizza y estos se vayan almacenando en un array como el del ejemplo.

Con los elementos guardados en el array, podrás hacer muchas cosas, por ejemplo, mostrarle al cliente lo que ha pedido, generarle una factura con todo detalle, avisar al cocinero de la pizza de lo que tiene que preparar...

Este es un caso práctico de infinitos que puedes diseñar gracias a la puerta que se acaba de abrir, los arrays.

Si tuviéramos que almacenar toda esta información en variables con un solo valor, necesitaríamos cuatro variables en lugar de una:

let pizzaMargaritaIngradiente1 = "masa";
let pizzaMargaritaIngradiente2 = "tomate";
let pizzaMargaritaIngradiente3 = "queso";
let pizzaMargaritaIngradiente4 = "especias";

Por no decir que para que nuestro código fuese generando variables así, de forma autónoma, a medida que el usuario fuese generando el pedido, sería mucho más largo, difícil y tedioso de escribir.

Veamos qué tipo de dato devuelve la consola en esta variable con un array dentro:

La información que nos devuelve es bastante completa, primero muestra el número de elementos totales del array (4), muestra cuales son y no solo eso, también te muestra todas las posiciones del array, que se cuentan como los strings, a partir del número 0.

Acceder a las posiciones de un array

En el capítulo 9 ya te empecé a introducir a esto practicando con las posiciones de los strings. Con los array, podemos acceder de forma similar a cada elemento del array, con su número de posición, el que aparece detallado en la consola. en la imagen superior.

Si queremos acceder al primer elemento, lo haremos con un 0. Y lo que quiero hacer, para practicar es almacenarlo en otra variable. Es decir, crear una copia del elemento cero en otro contenedor (variable).

let pizzaMargarita = ["masa","tomate","queso","especias"];
let guardaElementoPizza = pizzaMargarita[0];

console.log(guardaElementoPizza);

Como puedes ver, funciona como cuando usabas charAt() con un string. Solo que en este caso, no sirve charAt(), ya que este método es para devolver un carácter de un string, no un string entero. Para que lo entiendas bien, solo funciona con strings.

let pizzaMargarita = ["masa","tomate","queso","especias"];
let guardaElementoPizza = pizzaMargarita.charAt(0);

console.log(guardaElementoPizza);

El resultado es un error, ya que intenta leer un carácter de un string y le estoy dando un array.

No obstante, puedes perfectamente acceder primero a un elemento de un array y seguido decirle que te obtenga el carácter de una posición con charAt().

let pizzaMargarita = ["masa","tomate","queso","especias"];
let guardaElementoPizza = pizzaMargarita[0].charAt(3);

console.log(guardaElementoPizza);

El resultado esta vez es correcto, accede primero con los corchetes al elemento que quieras del array y seguidamente, accede a un carácter del elemento seleccionado con charAt().

También puedes acceder a esto sin charAt() con corchetes dobles:

let pizzaMargarita = ["masa","tomate","queso","especias"];
let guardaElementoPizza = pizzaMargarita[0][3];

console.log(guardaElementoPizza);

El resultado es exactamente el mismo, más fácil de escribir incluso:

Ejercicios de JavaScript

24. Crea un array que contenga el nombre de cinco colores escritos como strings.
25. Guarda en una variable el tercer elemento del array del ejercicio anterior. Recuerda que se cuenta desde el 0.
26. Accede desde un console.log() a la posición 0 del string de la posición 0 del array del ejercicio 24.

La solución la encontrarás aquí: Soluciones de ejercicios de JavaScript.