Arrays en JavaScript

Introducción

En este laboratorio, explorarás una de las estructuras de datos más fundamentales en JavaScript: el array. Un array es una variable especial que puede contener más de un valor a la vez. Los arrays se utilizan para almacenar colecciones ordenadas de datos, como una lista de elementos, números o cadenas de texto.

Aprenderás a:

• Crear un array.
• Acceder y modificar elementos de un array.
• Añadir y eliminar elementos utilizando métodos comunes de arrays.
• Iterar sobre un array para procesar sus elementos.

A lo largo de este laboratorio, trabajarás dentro del WebIDE. Escribirás tu código JavaScript en el archivo script.js. Para ver los resultados de tu código, utilizarás la consola de desarrollador del navegador, a la que se puede acceder en la pestaña "Web 8080".

Crear literal de array con corchetes

En este paso, aprenderás la forma más común de crear un array en JavaScript: utilizando un literal de array. Un literal de array es una lista de cero o más expresiones, cada una de las cuales representa un elemento del array, encerrada entre corchetes ([]).

Primero, localiza el archivo script.js en el explorador de archivos en el lado izquierdo del WebIDE. Haz clic en él para abrirlo en el editor.

Ahora, añade el siguiente código a script.js para crear un array de frutas y registrarlo en la consola.

const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits);

Después de añadir el código, guarda el archivo (puedes usar Ctrl+S o Cmd+S). Para ver la salida, cambia a la pestaña "Web 8080" en la parte superior de la pantalla. Es posible que necesites abrir la consola de desarrollador de tu navegador (normalmente presionando F12 o haciendo clic derecho en la página y seleccionando "Inspeccionar", luego navegando a la pestaña "Consola"). Deberías ver el array impreso en la consola.

["Apple", "Banana", "Cherry"];

Acceder a un elemento del array por índice

En este paso, aprenderás cómo acceder a elementos individuales dentro de un array. Los arrays de JavaScript están indexados a partir de cero, lo que significa que el primer elemento está en el índice 0, el segundo en el índice 1, y así sucesivamente. Puedes acceder a un elemento refiriéndote a su número de índice entre corchetes.

Continuemos editando el archivo script.js. Añade las siguientes líneas debajo de tu código existente para acceder y registrar el primer elemento del array fruits.

// Acceder al primer elemento (índice 0)
const firstFruit = fruits[0];
console.log("The first fruit is:", firstFruit);

// Acceder al tercer elemento (índice 2)
console.log("The third fruit is:", fruits[2]);

Guarda el archivo script.js y actualiza la pestaña "Web 8080". Revisa la consola de desarrollador. Verás la nueva salida además de la salida del paso anterior.

The first fruit is: Apple
The third fruit is: Cherry

Añadir elemento con el método push

En este paso, aprenderás cómo añadir un nuevo elemento al final de un array existente. La forma más sencilla de hacerlo es con el método push(). Este método añade uno o más elementos al final de un array y devuelve la nueva longitud del array.

Añade el siguiente código al final de tu archivo script.js para añadir "Orange" a tu array fruits.

// Añadir un nuevo elemento al final del array
fruits.push("Orange");

console.log("Array after push:", fruits);

Guarda el archivo y revisa la consola en la pestaña "Web 8080". Verás que el array fruits ahora contiene cuatro elementos.

Array after push: [ "Apple", "Banana", "Cherry", "Orange" ]

Eliminar el último elemento con el método pop

En este paso, aprenderás cómo eliminar el último elemento de un array utilizando el método pop(). Este método elimina el último elemento de un array y devuelve dicho elemento. Esta acción modifica la longitud del array.

Añade el siguiente código al final de tu archivo script.js. Esto eliminará el último elemento que acabas de añadir y registrará tanto el elemento eliminado como el array actualizado.

// Eliminar el último elemento del array
const removedFruit = fruits.pop();

console.log("Removed fruit:", removedFruit);
console.log("Array after pop:", fruits);

Guarda el archivo y observa la salida de la consola en la pestaña "Web 8080". Verás que se ha eliminado "Orange" y el array ha vuelto a sus tres elementos originales.

Removed fruit: Orange
Array after pop: [ "Apple", "Banana", "Cherry" ]

Iterar array usando bucle for

En este paso, aprenderás cómo recorrer todos los elementos de un array. Una forma común de hacerlo es utilizando un bucle for. Puedes usar la propiedad length del array para determinar cuántas veces debe ejecutarse el bucle.

Añade el siguiente bucle for al final de script.js para imprimir cada fruta del array en la consola en una nueva línea.

console.log("Iterating through the array with a for loop:");

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

El bucle comienza con i = 0 y continúa mientras i sea menor que la longitud del array fruits. En cada iteración, imprime el elemento en el índice actual i.

Guarda el archivo y revisa la consola en la pestaña "Web 8080". Verás cada fruta listada individualmente.

Iterating through the array with a for loop:
Apple
Banana
Cherry

Resumen

¡Felicitaciones por completar el laboratorio de Arrays en JavaScript!

En este laboratorio, has aprendido las operaciones esenciales para trabajar con arrays en JavaScript. Has practicado:

• Crear un array utilizando la sintaxis literal [].
• Acceder a elementos por su índice basado en cero, como array[0].
• Añadir un elemento al final de un array con el método push().
• Eliminar el último elemento de un array con el método pop().
• Recorrer cada elemento de un array utilizando un bucle for y la propiedad length.

Los arrays son una piedra angular de la programación en JavaScript. Hay muchos métodos más potentes que puedes explorar, como forEach(), map() y filter(), que pueden hacer tu código aún más conciso y expresivo. Sigue practicando para dominar esta estructura de datos fundamental.