Kapelu Logo

Arrays

Un array en JavaScript es una estructura de datos que se utiliza para almacenar una colección de elementos, como números, cadenas de texto u objetos. Los elementos de un array están indexados numéricamente, comenzando desde cero. Es decir, el primer elemento se encuentra en la posición 0, el segundo en la posición 1, y así sucesivamente.

Para crear un array en JavaScript, se puede utilizar la siguiente sintaxis:

var miArray = []; // Crea un array vacío

O bien:

var miArray = new Array(); // Crea un array vacío

Para crear un array con elementos, se puede utilizar la siguiente sintaxis:

var miArray = [1, 'Hola', [3], true]; // Crea un array con tres elementos

O bien:

var miArray = new Array(1, 2, 3); // Crea un array con tres elementos

Es posible usar las palabras reservadas var, let o const para declarar un array. Por ejemplo:

var miArray = [1, 2, 3]; // Crea un array con tres elementos
let miArray = [1, 2, 3]; // Crea un array con tres elementos
const miArray = [1, 2, 3]; // Crea un array con tres elementos

Para acceder a un elemento de un array, se puede utilizar la siguiente sintaxis:

var miArray = [1, 2, 3]; // Crea un array con tres elementos
console.log(miArray[0]); // Muestra el primer elemento del array en la consola

Para modificar un elemento de un array, se puede utilizar la siguiente sintaxis:

var miArray = [1, 2, 3]; // Crea un array con tres elementos
miArray[0] = 4; // Modifica el primer elemento del array
console.log(miArray[0]); // Muestra el primer elemento del array en la consola

Buenas prácticas

  • Utilizar const en lugar de let para declarar arrays que no serán modificados. De esta manera, se evita que el array sea reasignado accidentalmente y se hace más claro que el array no será modificado.
  • Evitar la mutación directa de los elementos del array, especialmente cuando se trata de arrays anidados. En su lugar, utilizar métodos de array que no mutan el array original, como map(), filter(), reduce(), etc.
  • Evitar el uso de bucles for para recorrer arrays. En su lugar, utilizar métodos de array como forEach(), map(), filter(), reduce(), etc. Estos métodos son más legibles y menos propensos a errores.
  • Utilizar nombres descriptivos y legibles para los arrays y las variables que contienen arrays. Esto hace que el código sea más fácil de entender y depurar.
  • Utilizar el método Array.isArray() para verificar si un valor es un array. Esto es más seguro que utilizar la comprobación de tipo typeof.
  • Ser consciente de las operaciones costosas en términos de rendimiento en los arrays, como la reordenación y la eliminación de elementos. En su lugar, utilizar operaciones que sean más eficientes, como el método splice().

Siguiendo estas buenas prácticas con los arrays en JavaScript, podemos escribir código más legible, eficiente y menos propenso a errores sutiles.

Agregar y eliminar datos de un arreglo

En JavaScript, un arreglo es una estructura de datos que nos permite almacenar una colección de elementos en una sola variable. Una vez que hemos creado un arreglo, podemos agregar nuevos elementos, eliminar elementos existentes y modificar elementos ya existentes en el arreglo.

Agregar elementos a un arreglo

Hay varias formas de agregar elementos a un arreglo en JavaScript:

Método push()

El método push() nos permite agregar uno o más elementos al final de un arreglo. El método devuelve la nueva longitud del arreglo.

// Definición de un arreglo
let miArreglo = ['manzana', 'banana', 'cereza'];
miArreglo.push('durazno');
console.log(miArreglo); // ['manzana', 'banana', 'cereza', 'durazno']

También podemos agregar varios elementos a la vez utilizando el método push():

let miArreglo = ['manzana', 'banana', 'cereza'];
miArreglo.push('durazno', 'fresa', 'uva');
console.log(miArreglo); // ['manzana', 'banana', 'cereza', 'durazno', 'fresa', 'uva']

Método unshift()

El método unshift() nos permite agregar uno o más elementos al inicio de un arreglo. El método devuelve la nueva longitud del arreglo.

let miArreglo = ['manzana', 'banana', 'cereza'];
miArreglo.unshift('durazno');
console.log(miArreglo); // ['durazno', 'manzana', 'banana', 'cereza']

También podemos agregar varios elementos a la vez utilizando el método unshift():

let miArreglo = ['manzana', 'banana', 'cereza'];
miArreglo.unshift('durazno', 'fresa', 'uva');
console.log(miArreglo); // ['durazno', 'fresa', 'uva', 'manzana', 'banana', 'cereza']

Operador spread (ES6)

El operador spread ... nos permite agregar elementos de otro arreglo al final de nuestro arreglo actual:

let miArreglo = ['manzana', 'banana', 'cereza'];
let otrosFrutos = ['durazno', 'fresa', 'uva'];
miArreglo = [...miArreglo, ...otrosFrutos];
console.log(miArreglo); // ['manzana', 'banana', 'cereza', 'durazno', 'fresa', 'uva']

Agregar con el método splice()

El método splice() nos permite agregar elementos a un array en cualquier posición. Para hacerlo, debemos indicar la posición en la que queremos agregar los elementos, la cantidad de elementos que queremos eliminar (en este caso 0, ya que no queremos eliminar nada) y los elementos que queremos agregar.

let numeros = [1, 2, 3, 4, 5];
numeros.splice(2, 0, 6, 7);
console.log(numeros); // [1, 2, 6, 7, 3, 4, 5]

En este ejemplo, hemos agregado los números 6 y 7 en la posición 2 del array numeros. Como segundo argumento, pasamos el valor 0 ya que no queremos eliminar ningún elemento.

Eliminar elementos de un arreglo

Hay varias formas de eliminar elementos de un arreglo en JavaScript:

Método pop()

El método pop() nos permite eliminar el último elemento de un arreglo. El método devuelve el elemento eliminado.

let miArreglo = ['manzana', 'banana', 'cereza'];
let frutaEliminada = miArreglo.pop();
console.log(miArreglo); // ['manzana', 'banana']
console.log(frutaEliminada); // 'cereza'

Método shift()

El método shift() nos permite eliminar el primer elemento de un arreglo. El método devuelve el elemento eliminado.

let miArreglo = ['manzana', 'banana', 'cereza'];
let frutaEliminada = miArreglo.shift();
console.log(miArreglo); // ['banana', 'cereza']
console.log(frutaEliminada); // 'manzana'

Eliminar con el método splice()

El método splice() también nos permite eliminar elementos de un array. Para hacerlo, debemos indicar la posición inicial de los elementos a eliminar y la cantidad de elementos a eliminar.

let numeros = [1, 2, 3, 4, 5];
numeros.splice(2, 2);
console.log(numeros); // [1, 2, 5]

En este ejemplo, hemos eliminado los elementos en las posiciones 2 y 3 del array numeros (el número 3 y 4), ya que hemos indicado que queremos eliminar 2 elementos a partir de la posición 2.

También podemos guardar los elementos eliminados en una variable:

let numeros = [1, 2, 3, 4, 5];
let numerosEliminados = numeros.splice(2, 2);
console.log(numeros); // [1, 2, 5]
console.log(numerosEliminados); // [3, 4]

En este caso, hemos eliminado los elementos en las posiciones 2 y 3 del array numeros y los hemos guardado en la variable numerosEliminados.

Buenas prácticas

  • Utilizar métodos de array que no mutan el array original, como concat(), slice(), map(), filter(), reduce(), etc. Esto es especialmente importante si se está trabajando con un array que no se debe modificar directamente.
  • Utilizar el método push() para agregar elementos al final del array. Este método es más eficiente que utilizar la asignación de índice (array[i] = value) para agregar elementos al final.
  • Utilizar el método unshift() para agregar elementos al inicio del array. Este método es más eficiente que utilizar la asignación de índice (array[i] = value) para agregar elementos al inicio.
  • Utilizar el método pop() para eliminar el último elemento del array. Este método es más eficiente que utilizar la asignación de índice (delete array[i]) para eliminar el último elemento.
  • Utilizar el método shift() para eliminar el primer elemento del array. Este método es más eficiente que utilizar la asignación de índice (delete array[0]) para eliminar el primer elemento.
  • Evitar la eliminación de elementos del medio del array, ya que esto puede provocar la reorganización del resto de los elementos y afectar el rendimiento. En su lugar, utilizar el método splice() para eliminar elementos del medio del array.
  • Ser cuidadoso al utilizar métodos de array que modifican el array original, como sort(), reverse(), splice(), etc. Asegurarse de que la mutación del array sea necesaria y de que se comprenda completamente su impacto.

Siguiendo estas buenas prácticas al agregar y eliminar elementos de un array en JavaScript, podemos escribir código más legible, eficiente y menos propenso a errores sutiles.

Iterando arreglos en JavaScript

Iterando arreglos en JavaScript En JavaScript, es muy común trabajar con arreglos y recorrerlos para realizar alguna tarea específica, como mostrar su contenido en la pantalla, realizar cálculos, filtrar elementos, etc.

Para iterar un arreglo en JavaScript, podemos usar varios métodos, como for, for...of, forEach, map, filter, reduce, etc. En este tutorial, veremos algunos ejemplos de cómo utilizar estos métodos.

Iterando un arreglo con for

El método for es el más básico y común para iterar un arreglo en JavaScript. La sintaxis es la siguiente:

for (var i = 0; i < arreglo.length; i++) {
  // código a ejecutar en cada iteración
}

Aquí, i es el índice del arreglo que se va a iterar, arreglo.length es la cantidad de elementos del arreglo, y código a ejecutar en cada iteración es el bloque de código que se ejecutará en cada vuelta del ciclo.

Por ejemplo, supongamos que tenemos un arreglo de números y queremos sumarlos todos. Podemos utilizar el método for de la siguiente manera:

var numeros = [1, 2, 3, 4, 5];
var suma = 0;
 
for (var i = 0; i < numeros.length; i++) {
  suma += numeros[i];
}
 
console.log("La suma de los números es:", suma);

En este ejemplo, el ciclo itera el arreglo numeros y va sumando cada uno de los elementos. La variable suma guarda el resultado final, que se muestra en la consola con console.log().

Iterando un arreglo con for...of

El método for...of es una forma más moderna y sencilla de iterar un arreglo en JavaScript. La sintaxis es la siguiente:

for (var elemento of arreglo) {
  // código a ejecutar en cada iteración
}

Aquí, elemento es el valor de cada elemento del arreglo, y código a ejecutar en cada iteración es el bloque de código que se ejecutará en cada vuelta del ciclo.

Por ejemplo, supongamos que queremos mostrar en la consola todos los nombres de un arreglo. Podemos utilizar el método for...of de la siguiente manera:

var nombres = ["Juan", "María", "Pedro", "Ana"];
 
for (var nombre of nombres) {
  console.log(nombre);
}

En este ejemplo, el ciclo itera el arreglo nombres y muestra cada uno de los elementos en la consola con console.log().

Iterando un arreglo con forEach

El método forEach es otro método común para iterar un arreglo en JavaScript. La sintaxis es la siguiente:

arreglo.forEach(function(elemento, indice) {
  // código a ejecutar en cada iteración
});

Aquí, elemento es el valor de cada elemento del arreglo, indice es el índice de cada elemento, y código a ejecutar en cada iteración es el bloque de código que se ejecutará en cada vuelta del ciclo.

Por ejemplo, supongamos que queremos mostrar en la consola todos los nombres de un arreglo, junto con su índice. Podemos utilizar el método forEach de la siguiente manera:

var nombres = ["Juan", "María", "Pedro", "Ana"];
 
nombres.forEach(function(nombre, indice) {
  console.log(indice, nombre);
});

En este ejemplo, el ciclo itera el arreglo nombres y muestra cada uno de los elementos en la consola con console.log().

Iterando un arreglo con map

El método map() es similar al método forEach(), pero en lugar de realizar una acción en cada elemento del arreglo, el método map() crea un nuevo arreglo con los resultados de aplicar una función a cada elemento del arreglo original.

La sintaxis del método map() es la siguiente:

var nuevoArreglo = array.map(function(elemento) {
  // Función que devuelve un nuevo valor para el elemento
});

Este método llama a la función especificada para cada elemento del arreglo array. La función especificada debe tomar un parámetro, que representa el valor actual del elemento del arreglo, y debe devolver un nuevo valor para ese elemento.

Por ejemplo, si queremos crear un nuevo arreglo dobleNumeros que contenga los valores del arreglo numeros multiplicados por dos, podemos hacer lo siguiente:

var numeros = [1, 2, 3, 4, 5];
 
var dobleNumeros = numeros.map(function(numero) {
  return numero * 2;
});
 
console.log(dobleNumeros); // [2, 4, 6, 8, 10]

En este ejemplo, el método map() llama a la función especificada para cada elemento del arreglo numeros. La función especificada multiplica el valor del elemento por dos y devuelve el resultado.

Iterando un arreglo con filter

El método filter() crea un nuevo arreglo con todos los elementos que cumplan con la condición implementada por la función dada.

La sintaxis del método filter() es la siguiente:

var nuevoArreglo = array.filter(function(elemento) {
  // Función que devuelve true o false
});

Este método llama a la función especificada para cada elemento del arreglo array. La función especificada debe tomar un parámetro, que representa el valor actual del elemento del arreglo, y debe devolver un valor booleano que indica si el elemento debe incluirse en el nuevo arreglo.

Por ejemplo, si queremos crear un nuevo arreglo pares que contenga solo los números pares del arreglo numeros, podemos hacer lo siguiente:

var numeros = [1, 2, 3, 4, 5];
 
var pares = numeros.filter(function(numero) {
  return numero % 2 === 0;
});
 
console.log(pares); // [2, 4]

En este ejemplo, el método filter() llama a la función especificada para cada elemento del arreglo numeros. La función especificada verifica si el valor del elemento es par, y devuelve true o false según corresponda.

Iterando un arreglo con find

El método find() devuelve el primer elemento del arreglo que cumpla con la condición implementada por la función dada.

La sintaxis del método find() es la siguiente:

var elemento = array.find(function(elemento) {
  // Función que devuelve true o false
});

Este método llama a la función especificada para cada elemento del arreglo array. La función especificada debe tomar un parámetro, que representa el valor actual del elemento del arreglo, y debe devolver un valor booleano que indica si el elemento cumple con la condición.

Por ejemplo, si queremos encontrar el primer número par del arreglo numeros, podemos hacer lo siguiente:

var numeros = [1, 2, 3, 4, 5];
 
var primerPar = numeros.find(function(numero) {
  return numero % 2 === 0;
});
 
console.log(primerPar); // 2

En este ejemplo, el método find() llama a la función especificada para cada elemento del arreglo numeros. La función especificada verifica si el valor del elemento es par, y devuelve true o false según corresponda.

Iterando un arreglo con reduce

El método reduce() aplica una función a un acumulador y a cada valor de un arreglo (de izquierda a derecha) para reducirlo a un único valor.

La sintaxis del método reduce() es la siguiente:

var valorFinal = array.reduce(function(acumulador, elemento) {
  // Función que devuelve el nuevo valor del acumulador
}, valorInicial);

Este método llama a la función especificada para cada elemento del arreglo array. La función especificada debe tomar dos parámetros, que representan el valor actual del acumulador y el valor actual del elemento del arreglo, y debe devolver el nuevo valor del acumulador.

Por ejemplo, si queremos sumar todos los números del arreglo numeros, podemos hacer lo siguiente:

var numeros = [1, 2, 3, 4, 5];
 
var suma = numeros.reduce(function(acumulador, numero) {
  return acumulador + numero;
}, 0);
 
console.log(suma); // 15

En este ejemplo, el método reduce() llama a la función especificada para cada elemento del arreglo numeros. La función especificada suma el valor del elemento al valor del acumulador, y devuelve el nuevo valor del acumulador.

Iterando un arreglo con every

El método every() comprueba si todos los elementos del arreglo cumplen con la condición implementada por la función dada.

La sintaxis del método every() es la siguiente:

var resultado = array.every(function(elemento) {
  // Función que devuelve true o false
});

Este método llama a la función especificada para cada elemento del arreglo array. La función especificada debe tomar un parámetro, que representa el valor actual del elemento del arreglo, y debe devolver un valor booleano que indica si el elemento cumple con la condición.

Por ejemplo, si queremos verificar si todos los números del arreglo numeros son pares, podemos hacer lo siguiente:

var numeros = [2, 4, 6, 8, 10];
 
var todosPares = numeros.every(function(numero) {
  return numero % 2 === 0;
});
 
console.log(todosPares); // true

En este ejemplo, el método every() llama a la función especificada para cada elemento del arreglo numeros. La función especificada verifica si el valor del elemento es par, y devuelve true o false según corresponda.

Iterando un arreglo con some

El método some() comprueba si al menos un elemento del arreglo cumple con la condición implementada por la función dada.

La sintaxis del método some() es la siguiente:

var resultado = array.some(function(elemento) {
  // Función que devuelve true o false
});

Este método llama a la función especificada para cada elemento del arreglo array. La función especificada debe tomar un parámetro, que representa el valor actual del elemento del arreglo, y debe devolver un valor booleano que indica si el elemento cumple con la condición.

Por ejemplo, si queremos verificar si al menos un número del arreglo numeros es par, podemos hacer lo siguiente:

var numeros = [1, 3, 5, 7, 9];
 
var algunPar = numeros.some(function(numero) {
  return numero % 2 === 0;
});
 
console.log(algunPar); // false

En este ejemplo, el método some() llama a la función especificada para cada elemento del arreglo numeros. La función especificada verifica si el valor del elemento es par, y devuelve true o false según corresponda.

En conclusión, los métodos map(), filter(), find(), reduce(), every(), some() son muy útiles para iterar un arreglo y realizar operaciones sobre sus elementos. Si bien no son los únicos métodos que nos permiten iterar un arreglo, son los métodos más utilizados.

Buenas prácticas

  • Utilizar métodos de array como forEach(), map(), filter(), reduce(), etc. en lugar de bucles for. Estos métodos son más legibles y menos propensos a errores.
  • Ser cuidadoso al utilizar la indexación de array (array[i]) dentro de un bucle. Asegurarse de que el índice sea válido y de que no se produzca un desbordamiento o subdesbordamiento.
  • Utilizar nombres descriptivos y legibles para las variables del bucle y para los elementos del array. Esto hace que el código sea más fácil de entender y depurar.
  • Utilizar el método Array.isArray() para verificar si un valor es un array antes de iterar sobre él. Esto es más seguro que utilizar la comprobación de tipo typeof.
  • Utilizar la sintaxis de desestructuración para acceder a los elementos de un array en lugar de utilizar la indexación de array. Esto hace que el código sea más legible y menos propenso a errores.
  • Evitar la mutación directa de los elementos del array dentro del bucle, especialmente cuando se trata de arrays anidados. En su lugar, utilizar métodos de array que no mutan el array original, como map(), filter(), reduce(), etc.
  • Utilizar la declaración de const en lugar de let para declarar la variable del bucle si no se va a modificar dentro del bucle.

Siguiendo estas buenas prácticas al iterar con arrays en JavaScript, podemos escribir código más legible, eficiente y menos propenso a errores sutiles.

Arrow Functions

Las arrow functions son una forma más concisa de definir funciones en JavaScript. En lugar de usar la palabra clave function, se usan flechas =>.

La sintaxis general es la siguiente:

(param1, param2, …, paramN) => { sentencias }
  • Los parámetros se escriben dentro de los paréntesis y están separados por comas.
  • La flecha => separa los parámetros de las sentencias de la función.
  • Si la función no recibe parámetros, se escriben los paréntesis vacíos ().
  • Si la función solo tiene una sentencia, no es necesario usar llaves {} y se puede omitir el return.
  • Si la función tiene múltiples sentencias, es necesario usar llaves {} y también incluir el return explícitamente.

Si la función tiene un solo parámetro, los paréntesis pueden ser omitidos:

param => { sentencias }

Si la función tiene un solo parámetro y una sola sentencia, los paréntesis pueden ser omitidos y la sentencia puede ser omitida:

param => sentencia

Si la función no tiene parámetros, los paréntesis deben ser omitidos:

() => { sentencias }

Si la función no tiene parámetros y una sola sentencia, los paréntesis pueden ser omitidos y la sentencia puede ser omitida:

() => sentencia

Ejemplos de Arrow Functions

A continuación, algunos ejemplos de arrow functions:

// Función que suma dos números
const suma = (a, b) => a + b;
 
// Función que eleva un número al cuadrado
const cuadrado = num => num ** 2;
 
// Función que devuelve el doble de un número
const doble = num => {
  const resultado = num * 2;
  return resultado;
};

En el primer ejemplo, se define una función que recibe dos parámetros y devuelve la suma de ambos. Como la función solo tiene una sentencia, se puede omitir las llaves {} y el return.

En el segundo ejemplo, se define una función que recibe un número y devuelve su cuadrado. Como la función solo tiene una sentencia, se pueden omitir las llaves {} y el return.

En el tercer ejemplo, se define una función que recibe un número y devuelve su doble. Como la función tiene múltiples sentencias, se deben usar llaves {} y se debe incluir el return explícitamente.

Ventajas de las Arrow Functions

  • Son más concisas y fáciles de leer que las funciones tradicionales.
  • Tienen un contexto léxico this más claro y predecible que las funciones tradicionales.
  • Permiten crear funciones anónimas de manera más simple y elegante.

Desventajas de las Arrow Functions

  • No pueden ser usadas como constructores (no tienen un objeto prototype).
  • No tienen un arguments propio, por lo que si se desea acceder a los argumentos de la función, se deben usar argumentos predeterminados o rest parameters.

Buenas Prácticas

  • Utilizar arrow functions en lugar de funciones anónimas en callbacks. Las arrow functions son más cortas, legibles y evitan el uso de la palabra clave this.
  • Utilizar paréntesis alrededor de los parámetros de la función si hay más de uno. Esto hace que el código sea más legible y evita errores sutiles.
  • Utilizar la sintaxis de una sola línea (=>) para arrow functions que tienen una sola expresión en el cuerpo. En su lugar, utilizar la sintaxis de bloque ({}) para arrow functions que tienen varias líneas de código en el cuerpo.
  • Utilizar la declaración de const en lugar de let para asignar arrow functions a variables. Esto evita que la variable sea reasignada accidentalmente.
  • Utilizar nombres descriptivos y legibles para las variables que contienen arrow functions. Esto hace que el código sea más fácil de entender y depurar.
  • Evitar el uso excesivo de arrow functions. Las arrow functions son útiles para funciones simples y para callbacks, pero pueden hacer que el código sea más difícil de leer si se utilizan en exceso.
  • Asegurarse de que el contexto de this sea el deseado dentro de la arrow function. En algunos casos, puede ser necesario utilizar la función bind() para establecer explícitamente el contexto de this.

Siguiendo estas buenas prácticas al utilizar arrow functions en JavaScript, podemos escribir código más legible, eficiente y menos propenso a errores sutiles.

Como usar arrow functions con arreglos

Las arrow functions son una forma de escribir funciones de una manera más corta y con un comportamiento diferente al de las funciones normales. En este caso, vamos a ver cómo podemos usarlas con arreglos.

Ejercicio 1: Usando una arrow function y un ciclo for, imprime cada elemento de un arreglo de números multiplicado por 2.

const numeros = [1, 2, 3, 4, 5];
 
const multiplicarPor2 = (arr) => {
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i] * 2);
  }
}
 
multiplicarPor2(numeros);

Ejercicio 2: Usando una arrow function y el método forEach, suma todos los elementos de un arreglo de números y muestra el resultado.

const numeros = [1, 2, 3, 4, 5];
 
const sumar = (arr) => {
  let suma = 0;
  arr.forEach(num => suma += num);
  console.log(suma);
}
 
sumar(numeros);

Ejercicio 3: Usando una arrow function y el método map, devuelve un nuevo arreglo de números que son el doble de los números de un arreglo original.

const numeros = [1, 2, 3, 4, 5];
 
const doble = (arr) => {
  const nuevoArr = arr.map(num => num * 2);
  console.log(nuevoArr);
}
 
doble(numeros);

Ejercicio 4: Usando una arrow function y el método filter, devuelve un nuevo arreglo de números que son mayores a 3 de un arreglo original.

const numeros = [1, 2, 3, 4, 5];
 
const mayoresA3 = (arr) => {
  const nuevoArr = arr.filter(num => num > 3);
  console.log(nuevoArr);
}
 
mayoresA3(numeros);

Ejercicio 5: Usando una arrow function y el método find, encuentra el primer número par en un arreglo de números y muestra su valor.

const numeros = [1, 3, 5, 4, 7, 9, 6];
 
const encontrarPar = (arr) => {
  const primerPar = arr.find(num => num % 2 === 0);
  console.log(primerPar);
}
 
encontrarPar(numeros);

Ejercicio 6: Usando una arrow function y el método reduce, calcula la suma de un arreglo de números.

const numeros = [1, 2, 3, 4, 5];
 
const suma = (arr) => {
  const total = arr.reduce((acc, num) => acc + num, 0);
  console.log(total);
}
 
suma(numeros);

Buenas prácticas

  • Las arrow functions son una forma más concisa de definir funciones en JavaScript. En lugar de usar la palabra clave function, se usan flechas =>.
  • Utilizar métodos de array como map(), filter(), reduce(), etc. en lugar de bucles for con arrow functions. Estos métodos son más legibles y menos propensos a errores.
  • Utilizar la sintaxis de una sola línea (=>) para arrow functions que tienen una sola expresión en el cuerpo. En su lugar, utilizar la sintaxis de bloque ({}) para arrow functions que tienen varias líneas de código en el cuerpo.
  • Utilizar la declaración de const en lugar de let para asignar arrow functions a variables. Esto evita que la variable sea reasignada accidentalmente.
  • Utilizar nombres descriptivos y legibles para las variables que contienen arrow functions. Esto hace que el código sea más fácil de entender y depurar.
  • Utilizar la sintaxis de desestructuración para acceder a los elementos del array dentro de la arrow function. Esto hace que el código sea más legible y menos propenso a errores.
  • Evitar la mutación directa de los elementos del array dentro de la arrow function, especialmente cuando se trata de arrays anidados. En su lugar, utilizar métodos de array que no mutan el array original, como map(), filter(), reduce(), etc.
  • Utilizar el método Array.isArray() para verificar si un valor es un array antes de utilizar una arrow function. Esto es más seguro que utilizar la comprobación de tipo typeof.

Siguiendo estas buenas prácticas al utilizar arrow functions con arrays en JavaScript, podemos escribir código más legible, eficiente y menos propenso a errores sutiles.

Ejercicios de arrays

Esta sección contiene ejercicios para practicar los conceptos de arrays en JavaScript.

Arrays

Los ejercicios de esta sección se basan en la declaración de arrays.

Ejercicio 1

Crear un método que reciba un array de calificaciones y obtenga el promedio con el uso de los métodos de arrays. Si el promedio es mayor a 70 imprima que aprobó / si es menor, que no aprobó.

promedio([70, 80, 80, 90, 60]) // Aprobado: 76. promedio([70, 50, 75, 70, 60]) // No Aprobado: 65.

// Función que recibe un array de calificaciones y obtiene el promedio
function promedio(calificaciones) {
  var suma = 0; // Inicializamos una variable suma en 0
 
  for (var i = 0; i < calificaciones.length; i++) {
    // Creamos un bucle for que se ejecutará mientras i sea menor que la longitud del array
    suma += calificaciones[i]; // Sumamos a la variable suma el elemento en la posición i del array
  }
 
  var promedio = suma / calificaciones.length; // Calculamos el promedio dividiendo la suma entre la longitud del array
 
  if (promedio > 70) {
    // Si el promedio es mayor a 70
    console.log("Aprobado: " + promedio); // Imprimimos en consola que aprobó
  } else {
    // Si el promedio es menor o igual a 70
    console.log("No Aprobado: " + promedio); // Imprimimos en consola que no aprobó
  }
}
 
promedio([70, 80, 80, 90, 60]); // Aprobado: 76
promedio([70, 50, 75, 70, 60]); // No Aprobado: 65

Ejercicio 2

Método que reciba un array e imprima en la consola cada uno de sus elementos. imprimeArray([‘uno’, 2, null, 0]); uno 2 null 0

// Función que recibe un array e imprime en consola cada uno de sus elementos
function imprimeArray(array) {
  for (var i = 0; i < array.length; i++) {
    // Creamos un bucle for que se ejecutará mientras i sea menor que la longitud del array
    console.log(array[i]); // Imprimimos en consola el elemento en la posición i del array
  }
}
 
imprimeArray(["uno", 2, null, 0]); // Imprimimos en consola cada uno de los elementos del array

Ejercicio 3

Crear un método que a partir de un array de calificaciones, filtre las notas aprobatorias y retorne el nuevo array. aprobadas([50, 80, 100, 69, 70, 10]) // [80, 100, 70] aprobadas([90, 90, 50, 45, 100, 80]) // [90, 90, 100, 80]

// Función que recibe un array de calificaciones y retorna un nuevo array con las notas aprobatorias
function aprobadas(calificaciones) {
  var aprobadas = []; // Inicializamos un array vacío
 
  for (var i = 0; i < calificaciones.length; i++) {
    // Creamos un bucle for que se ejecutará mientras i sea menor que la longitud del array
    if (calificaciones[i] >= 70) {
      // Si el elemento en la posición i del array es mayor o igual a 70
      aprobadas.push(calificaciones[i]); // Agregamos el elemento en la posición i del array al array aprobadas
    }
  }
 
  return aprobadas; // Retornamos el array aprobadas
}
 
console.log(aprobadas([50, 80, 100, 69, 70, 10])); // [80, 100, 70]
console.log(aprobadas([90, 90, 50, 45, 100, 80])); // [90, 90, 100, 80]

Ejercicio 4

Crear un método que reciba un array de nacionalidades y cuente las diferentes nacionalidades que existen. (México/Argentina/Venezuela/Perú) contar(["mexicano", "argentino", "argentino", "venezolano", "peruano", "mexicano", "argentino", "peruano", "venezolano"]); // Mexicanos: 2 // Venezolanos: 2 // Argentinos: 3 // Peruanos: 2

// Función que recibe un array de nacionalidades y cuenta las diferentes nacionalidades que existen
function contar(nacionalidades) {
  var nacionalidadesContadas = {}; // Inicializamos un objeto vacío
 
  for (var i = 0; i < nacionalidades.length; i++) {
    // Creamos un bucle for que se ejecutará mientras i sea menor que la longitud del array
    if (nacionalidadesContadas[nacionalidades[i]]) {
      // Si el elemento en la posición i del array existe como propiedad del objeto nacionalidadesContadas
      nacionalidadesContadas[nacionalidades[i]]++; // Incrementamos en 1 el valor de la propiedad del objeto nacionalidadesContadas
    } else {
      // Si el elemento en la posición i del array no existe como propiedad del objeto nacionalidadesContadas
      nacionalidadesContadas[nacionalidades[i]] = 1; // Agregamos una propiedad al objeto nacionalidadesContadas con el nombre del elemento en la posición i del array y le asignamos el valor 1
    }
  }
 
  for (var nacionalidad in nacionalidadesContadas) {
    // Creamos un bucle for in para recorrer las propiedades del objeto nacionalidadesContadas
    console.log(
      nacionalidad + ": " + nacionalidadesContadas[nacionalidad] // Imprimimos en consola el nombre de la propiedad y su valor
    );
  }
}
 
contar([
  "mexicano",
  "argentino",
  "argentino",
  "venezolano",
  "peruano",
  "mexicano",
  "argentino",
  "peruano",
  "venezolano",
]); // Mexicanos: 2, Venezolanos: 2, Argentinos: 3, Peruanos: 2

Ejercicio 5

Crear un array con el nombre de tus compañeros de clase y posteriormente realizar una función que reciba un nombre y muestre en un alert si se encuentra en la clase o no.

// Función que recibe un nombre y muestra un alert diciendo si el nombre se encuentra en el array de compañeros de clase
function estaEnClase(nombre) {
  var clase = ["Cristina", "María", "Javier", "Miguel", "Sergio"]; // Creamos un array con los nombres de los compañeros de clase
  var encontrado = false; // Inicializamos una variable encontrado en false para indicar que no hemos encontrado el nombre en el array
 
  for (var i = 0; i < clase.length; i++) {
    // Creamos un bucle for que se ejecutará mientras i sea menor que la longitud del array
    if (clase[i] === nombre) {
      // Si el elemento en la posición i del array es igual al nombre que hemos recibido como parámetro
      encontrado = true; // Cambiamos el valor de encontrado a true
    }
  }
 
  if (encontrado) {
    // Si encontrado es true
    alert("El nombre " + nombre + " se encuentra en la clase"); // Mostramos un alert indicando que el nombre se encuentra en la clase
  } else {
    // Si encontrado es false
    alert("El nombre " + nombre + " no se encuentra en la clase"); // Mostramos un alert indicando que el nombre no se encuentra en la clase
  }
}
 
estaEnClase("Cristina"); // Llamamos a la función pasando como parámetro el nombre de un compañero

Anterior

Inicio

Siguiente