JavaScript: Domina los Arrays

Hola! en este tutorial te aseguro que vamos a dominar los arrays de JavaScript, estos son fundamentales para manejar colecciones de datos. Los únicos requisitos para este tutorial son conocimientos básicos de JavaScript y un navegador web c:

Vamos por partes… Paso a Paso

Paso 1: Introducción a los arrays
Un array es una estructura de datos que almacena una colección de elementos en un orden específico, donde cada elemento se identifica por un índice numérico…

¿Una estructura de datos que almacena una colección de elementos?
Si!, un array se declara asi por ejemplo:

variableArray = [];

Los corchetes “[ ]” son el array y lo que esté dentro de ellos es la “colección de elementos” por ejemplo:

variableArray = [elemento0, elemento1, elemento2];

Dentro del array llamado “variableArray” hay una colección de elementos que si te fijas están separados por comas. Esta separación le da un orden especifico donde cada elemento se identifica por un índice numérico. Y, ¡cada elemento puede ser cualquier tipo de dato! desde numérico, string hasta objetos!

Cambiemos los nombres de los elementos y las variables para tener un ejemplo más practico 😃

let frutas = ["manzana", "pera", "naranja", "banano", "kiwi"];

El array “frutas” contiene 5 frutas (en formato string) con indices del 0 al 4:
0 para “manzana”,
1 para “pera”,
2 para “naranja”,
3 para “plátano”,
4 para “kiwi”.

Pero falta una fruta que me gusta mucho 😦, y seguramente una fruta que te guste también! entonces creemos un pequeño programa donde podamos añadir nuestra fruta a este array 😃

Hay métodos útiles de arrays como .push(), .pop(), .length… varios métodos que nos permiten agregar, acceder y modificar elementos en un array 😮

Si queremos crear un programa que nos deje añadir frutas a nuestro array, podríamos utilizar el método .push() que en JavaScript se utiliza para agregar uno o más elementos al final de un array. Así que vamos a ello:

let frutas = ["manzana", "pera", "naranja", "banano", "kiwi"];

functionagregarFruta(fruta){
	frutas.push(fruta)
	console.log(frutas);
}

Dentro de los parentesis de .push() estará lo que vamos a agregar al final del array, en este caso es el argumento del parámetro fruta. Voy a agregar mi fruta

agregarFruta("mangos")

// (6) ['manzana', 'pera', 'naranja', 'banano', 'kiwi', 'mangos']

¡Ya está! la fruta mango ha sido añadida al array frutas! y ahora el array tiene seis (6) elementos que están enumerados del 0 al 5.

¡Ay! me equivoqué y añadí “mangos” y no “mango” 😮
Es una excelente oportunidad para usar el método .pop() que elimina el ultimo elemento de un array.

frutas.pop();

console.log(frutas);
//(5) ['manzana', 'pera', 'naranja', 'banano', 'kiwi']

agregarFruta("mango")

// (6) ['manzana', 'pera', 'naranja', 'banano', 'kiwi', 'mango']

Ahora si 😄
Si quieres agregar una fruta solo llama a la función AgregarFruta(“fruta”) donde fruta puede ser cualquier fruta.

• Métodos de arrays

  Hay muchos métodos para hacer cosas con los arrays, acabamos de usar dos de ellos, .push() y .pop(). Algunos de los métodos más comunes son:

  • shift(): Elimina el primer elemento del array y lo devuelve.
  • unshift(): Agrega uno o más elementos al principio del array y devuelve la nueva longitud del array.
  • splice(): Agrega o elimina elementos de un array en una posición específica.

Paso 2: Método forEach en Arrays

Este método es una forma de iterar sobre un array.
¿Iterar?
Iterar es la acción de repetir un proceso varias veces. En un array seria realizar una acción, ejecutar algo con cada uno de los elementos dentro del array.

Con eso en mente, ¿Qué proceso podemos iterar sobre nuestro array de frutas?

Podríamos imprimir en consola cada una de nuestras frutas asi:

frutas.forEach(function(fruta) {
  console.log(fruta);
});
}

¡O cualquier cosa que se te ocurra accionar a cada elemento!

Paso 3: Proyecto Practico!: Lista

Vamos a crear una lista, imprimamos cuales frutas tenemos en consola:

frutas.forEach(function(fruta){
	console.log("Tenemos " + fruta + " en la lista")
})

Conclusión
Al finalizar este proyecto, has aprendido cómo los arrays en JS te permiten almacenar y manejar colecciones de datos de manera eficiente. Además, has visto cómo el método “forEach” ofrece una manera sencilla y elegante de iterar sobre cada elemento de un array. Estos conceptos son fundamentales en JS y te serán de gran utilidad en tus futuros proyectos de desarrollo web.

Desafío
Vamos un paso más allá >:D

• Añade la funcionalidad para filtrar frutas:
  • Crea una función que reciba como argumento una letra.
  • Usa forEach para iterar sobre el array frutas.
  • Imprimesolo las frutas que comiencen con la letra dada.

(O no, también es válido si encuentras otra manera 😄)

Este desafío te ayudará a practicar no solo la iteración con forEach, sino también la toma de decisiones dentro de las funciones y el manejo de strings en JavaScript.
¡Buena suerte y diviértete codificando! 🍏🍌🍊🥝🍐🥭