Arreglos(Array)

En programación, un array o arreglo, es un tipo de dato estructurado que permite almacenar un conjunto de datos.

A los datos almacenados en un array se los denomina elementos, y para determinar el tamaño o rango de un array se lo hace por el numero de elementos que este contenga.

Arreglos en JavaScript

En Javascript un array se lo declara con llaves [ ], en el que todos los elementos están separados por una coma.

Este array o arreglo puede tener elementos de cualquier tipo, ya sean Cadenas, Boolean, Números, Objetos, inclusive se puede almacenar un arreglo dentro de otro arreglo.

Ejemplos de un array:

const intArray = [10, 20, 30, 40, 50];
const boolArray = [true, false, true, false];
const stringArray = ['test', 'array', 'arreglo'];
const objectArray = [{ age: 20 }, { state: 'Utah' }, { type: 'object' }];
const mixedArray = [25, true, 'javascript', { color: 'green' }, [10, 20]];

La posición de un elemento en el array se lo denomina índice, en el caso de JavaScript el índice del array empieza en el numero 0, e incremente en uno para cada elemento siguiente del array.

const intArray = [10, 20, 30, 40, 50];

Entonces en este ejemplo el 10 es el elemento con el índice 0, el 20 es el elemento con índice 1, el 30 es el elemento con el índice 2, etc.

Formas de obtener los elementos de un arreglo (array) en Javascript.

En JavaScript se puede acceder a un elemento del arreglo usando su índice.

const element = array[index];

Ejemplo:

const intArray = [10, 20, 30];

intArray[0]; // 10
intArray[1]; // 20
intArray[2]; // 30

También podemos iterar un arreglo usando un bucle for o cualquier otro bucle.

for (let i = 0; i < intArray.length; i++) {
  console.log(`Element at index ${i} is ${intArray[i]}`);
}

El resultado es:

Element at index 0 is 10
Element at index 1 is 20
Element at index 2 is 30

Como añadir elementos a un arreglo de JavaScript

Para agregar un elemento a un arreglo se utiliza el método push(), el cual agrega el elemento al final del arreglo.

Ejemplo:

const intArray = [10, 20, 30];intArray.push(40);

El arreglo ahora es:

[10, 20, 30 ,40]

Nota si se desea agregar un elemento al inicio del arreglo se tiene que utilizar el método unshift().

Ejemplo:

const intArray = [10, 20, 30];
intArray.unshift(5);

El arreglo ahora es:

[5, 10, 20, 30]

Como eliminar elementos de un arreglo en JavaScript

Para eliminar el ultimo elemento de un arreglo se usa método pop()

Ejemplo:

const intArray = [10, 20, 30];
intArray.pop();

El arreglo ahora es:

[10, 20];

Para eliminar un elemento desde el inicio del arreglo, se utiliza el método shift().

Ejemplo:

const intArray = [10, 20, 30];
intArray.shift();

El Arreglo ahora es:

[20, 30];

Los métodos de arreglos mas utilizados dentro de los diferentes proyectos.

El método includes()

Con el método includes(), podemos determinar la presencia de un elemento en el array, si este elemento existe, el método retorna true, caso contrario retornará false.

Por ejemplo imaginemos que tenemos un arreglo con el nombre de diferentes personas, y nos interesa saber si en el arreglo hay una persona con el nombre 'Alex' y si existe queremos realizar alguna acción.

Entonces lo haríamos de esta manera:

const names = ['Carlos', 'Andres', 'Jimmy', 'Tom', 'Alex'];

const isAlexHere = names.includes('Alex');

if (isAlexHere) {
  // realizamos la acción que necesitamosComo por ejemplo: console.log(“Alex exist!”)
}

El método filter()

El método filter() crea un nuevo arreglo con todos los elementos que cumplan con la condición establecida dentro de la función.

Por ejemplo supongamos que tenemos un arreglo con diferentes datos de varios estudiantes, y lo necesitamos realizar es solo obtener a los estudiantes mayores de edad.

Ejemplo:

const students = [
  { id: 1, name: 'Carlos', lastName: 'Vera', age: 20 },
  { id: 2, name: 'Andrea', lastName: 'Correa', age: 17 },
  { id: 3, name: 'Tom', lastName: 'Castro', age: 19 },
];

Para filtrarlo por edades haríamos esto:
const filteredStudents = students.filter((student) => student.age > 18);

El resultado será un nuevo array con estos elementos:

[
  { id: 1, name: 'Carlos', lastName: 'Vera', age: 20 },
  { id: 3, name: 'Tom', lastName: 'Castro', age: 19 },
];

El método map()

El método map() crea un nuevo arreglo con los elementos de otro arreglo y aplica lógica que nosotros proveemos en la función como argumento.

Por ejemplo supongamos que necesitamos un array solo con los nombres de los estudiantes, en ese caso usamos este mėtodo.

Ejemplo:

const students = [
  { id: 1, name: 'Carlos', lastName: 'Vera', age: 20 },
  { id: 2, name: 'Andrea', lastName: 'Correa', age: 17 },
  { id: 3, name: 'Tom', lastName: 'Castro', age: 19 },
];

Para obtener un nuevo arreglo con solo los nombres completos de cada estudiante haríamos esto:

const studentsFullName = students.map(
  student => student.name + ' ' + student.lastName
);

El arreglo quedará de esta manera:

['Carlos Vera', 'Andrea Correa', 'Tom Castro'];

El método some()

Este método comprueba si al menos un elemento del array cumple con la condición implementada por la función proporcionada. retornando un valor booleano (true/false).

Para este método usemos como ejemplo este arreglo:

const people = [
  { id: 1, name: 'Carlos', lastName: 'Vera', age: 20, city: 'NY' },
  { id: 2, name: 'Andrea', lastName: 'Correa', age: 17, city: 'Quito' },
  { id: 3, name: 'Tom', lastName: 'Castro', age: 19, city: 'Ambato' },
];

y nos piden que investiguemos si al menos una persona vive en la ciudad de 'Ambato'.

Entonces podemos utilizar este método para hacer esta tarea, de esta manera podemos resolverlo así:

const isOnePersonInAmbatoCity = people.some(person => person.city === 'Ambato');
if (isOnePersonInAmbatoCity) {
  console.log('a person is in Ambato city');
}

El método find()

El método find() nos permite devolver un elemento del arreglo que cumpla con la condición establecida en la función.

Para este ejemplo tememos el mismo arreglo del anterior método, y ahora imaginemos que la tarea nos pide los datos de la persona que vive en la ciudad de 'Ambato'.

const perinInAmbatoCity = people.find(person => person.city === 'Ambato');
console.log(perinInAmbatoCity);

al imprimir por consola el resultado será este:

{ id: 3, name: "Tom", lastName:"Castro", age: 19, city: "Ambato"}

El método flatMap()

Este método retorna un nuevo arreglo, primero mapea cada elemento usando una función de mapeo, luego aplana el resultado en un nuevo arreglo.

Este método puede ser muy útil, imaginemos este arreglo:

const numbers = [1, 2, [3], [4, 5], 6];

y nos piden en una tarea mostrar en un solo arreglo todos los elementos del arreglo y que sea fácil acceder a ellos.
Cómo podemos observar seria un poco complejo tomar ciertos elementos del arreglo, entonces resolveríamos esto de esta manera:

const flattenArray = numbers.flatmap(number => number);
console.log(flattenArray);

lo que veremos en la consola será esto:

[1, 2, 3, 4, 5, 6]

y con este nuevo array ya podemos acceder de manera más sencilla a los datos que necesitemos.

Ejemplo de una tarea real que requiere el uso correcto de arreglos

Una tarea nos pide que mostremos los datos de una lista de personas y su respectiva escuela, pero la Api solo tiene los datos de la persona y un campo con el id de la escuela, y las escuelas son una lista distinta que contiene los datos de cada escuela incluido su id.

Observemos los 2 arreglos:

const persons = [
  {
    id: 1,
    name: 'Alex',
    lastName: 'Castellanos',
    city: 'Quito',
    schoolId: '3',
  },
  { 
    id: 2, 
    name: 'Carlos', 
    lastName: 'Vera', 
    city: 'Guayaquil', 
    schoolId: '2' 
  },
  { 
    id: 3, 
    name: 'Andy', 
    lastName: 'Leon', 
    city: 'Ambato', 
    schoolId: '1' 
  },
];

const schools = [
  { id: 1, name: 'Montalvo', city: 'Ambato' },
  { id: 2, name: 'Calderon', city: 'Guayaquil' },
  { id: 3, name: 'Montufar', city: 'Quito' },
];

para este ejemplo estamos usando dos arreglos pequeños, pero imagines que estos dos arreglos son mucho mas grande de 100 elementos. la manera común  de hacerlo seria comparar un array con el otro y crear un nuevo arreglo que contenta tanto los datos del usuario como de su escuela (ya que solo contiene el id de la escuela actualmente).
Pero necesito que se imaginen el trabajo y tiempo que tomaría comparar un array con otro, elemento por elemento para encontrar el correcto, eso tomaría mucho tiempo y procesos.

En ese caso la mejor solución es aplicar mejor los conceptos, e inclusive usar librerías que nos ayuden a solucionar este tipo de cosas de manera eficiente. Para ellos podemos usar 'lodash' que tiene muchos métodos para el manejo de arreglos.

Entonces en este caso la mejor solución sera transformar el arreglo de las escuelas en un objeto que contenga todos los schools para luego compararlo con el id que ya tiene cada persona en el arreglo de persons.

const schoolsObject = groupBy(schools, 'id'); // este método crea un objeto basado en el id de los schools.

ahora podemos hacer esto para comparar de una manera eficaz los datos y unirlos en un solo arreglo:

const personsWithSchoolData = persons.map(person => {
  const schoolData = schoolsObject[person.schoolId];
  return { ...person, school: schoolData };
});
console.log(personsWithSchoolData);

Al hacerlo de esta manera se realizará de una manera eficaz y rápida, y obtendremos este resultado que sera un nuevo array que contiene los datos de las personas y de su escuela:

[
  {
    id: 1,
    name: 'Alex',
    lastName: 'Castellanos',
    city: 'Quito',
    schoolId: '3',
    school: { id: 3, name: 'Montufar', city: 'Quito' },
  },
  {
    id: 2,
    name: 'Carlos',
    lastName: 'Vera',
    city: 'Guayaquil',
    schoolId: '2',
    school: { id: 2, name: 'Calderon', city: 'Guayaquil' },
  },
  {
    id: 3,
    name: 'Andy',
    lastName: 'Leon',
    city: 'Ambato',
    schoolId: '1',
    school: { id: 1, name: 'Montalvo', city: 'Ambato' },
  },
];