Introducción a los arrays en JavaScript - Curso de JavaScript de cero a máster - Capítulo 11


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.

Arrays de JavaScript

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:

Código JavaScript

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 pizzeria 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 4 variables en lugar de una:

Código JavaScript

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, dificil y tedioso de escribir.

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

Resultado en el navegador

Array en JavaScript

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).

Código JavaScript

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

console.log(guardaElementoPizza);

Resultado en el navegador

posiciones de array en JavaScript

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 caracter de un string, no un string entero. Para que lo entiendas bien, solo funciona con strings.

Código JavaScript erróneo

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

console.log(guardaElementoPizza);

Resultado en el navegador

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

Error con charat en array JavaScript

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

Código JavaScript

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

console.log(guardaElementoPizza);

Resultado en el navegador

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

Acceder a un caracter de un string en un array de JavaScript

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

Código JavaScript

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

console.log(guardaElementoPizza);

Resultado en el navegador

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

Acceder a un caracter de un string en un array de JavaScript

Ejercicios de JavaScript

  1. Crea un array que contenga el nombre de cinco colores escritos como strings.

  2. Guarda en una variable el tercer elemento del array del ejercicio anterior. Recuerda que se cuenta desde el 0.

  3. Accede desde un console.log a la posición 0 del string de la posición 0 del array del ejercicio 20.

La solución la encontrarás aquí: Haz click aquí.

Capítulos


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.