Curso javascript nivel medio

Las funciones de orden superior en JavaScript son aquellas que pueden recibir otras funciones como argumentos, o bien, pueden devolver funciones. Estas funciones son fundamentales para escribir código más limpio, modular y reutilizable. Aquí te explico para qué se usan y por qué son importantes:

Beneficios de usar funciones de orden superior:

  • Modularidad: Facilitan la creación de piezas de código reutilizables y modulares, lo que mejora la mantenibilidad.
  • Legibilidad: Las operaciones en arrays y otros contextos se pueden expresar de manera declarativa, lo que suele ser más fácil de entender que los bucles tradicionales.
  • Facilitan la programación funcional: Permiten implementar conceptos clave de la programación funcional, como la inmutabilidad, composición y uso de funciones puras.

Aquí tienes una explicación detallada de cada una de las funciones de orden superior, con ejemplos para ayudarte a entender cómo se utilizan en JavaScript:

1. Array.prototype.map()

Descripción: Crea un nuevo array con los resultados de aplicar una función a cada uno de los elementos del array original.

Ejemplo:

1const numeros = [1, 2, 3];
2const dobles = numeros.map(num => num * 2);
3console.log(dobles); // [2, 4, 6]
Salida de Consola!:
[ 2, 4, 6 ]

2. Array.prototype.filter()

Descripción: Crea un nuevo array con todos los elementos que pasen una prueba especificada por una función.

Ejemplo:

1const numeros = [1, 2, 3, 4];
2const pares = numeros.filter(num => num % 2 === 0);
3console.log(pares); // [2, 4]
Salida de Consola!:
[ 2, 4 ]

3. Array.prototype.reduce()

Descripción: Aplica una función a un acumulador y a cada valor del array (de izquierda a derecha) para reducirlo a un solo valor.

Ejemplo:

1const numeros = [4, 7, 1, 5];
2const suma = numeros.reduce((acumulador, num) => acumulador + num, 0);
3console.log(suma); // 17
Salida de Consola!:
17
representación de reduce

4. Array.prototype.forEach()

Descripción: Ejecuta una función para cada elemento del array. A diferencia de map, forEach no devuelve un nuevo array.

Ejemplo:

1const frutas = ["manzana", "banana", "cereza"];
2frutas.forEach(fruta => console.log(fruta));
Salida de Consola!:
manzana
banana
cereza

5. Array.prototype.find()

Descripción: Devuelve el primer elemento del array que cumpla con la condición especificada en la función. Si no se encuentra, devuelve undefined.

Ejemplo:

1const numeros = [1, 2, 3, 4];
2const encontrado = numeros.find(num => num > 2);
3console.log(encontrado); // 3
Salida de Consola!:
3

6. Array.prototype.some()

Descripción: Verifica si al menos un elemento del array cumple con la condición especificada en la función. Devuelve true o false.

Ejemplo:

1const numeros = [1, 2, 3, 4];
2const hayMayorQueTres = numeros.some(num => num > 3);
3console.log(hayMayorQueTres); // true
Salida de Consola!:
true

7. Array.prototype.every()

Descripción: Verifica si todos los elementos del array cumplen con la condición especificada en la función. Devuelve true o false.

Ejemplo:

1const numeros = [1, 2, 3, 4];
2const todosSonMenoresQueCinco = numeros.every(num => num < 5);
3console.log(todosSonMenoresQueCinco); // true
Salida de Consola!:
true

8. Array.prototype.sort()

Descripción: Ordena los elementos de un array en su lugar y devuelve el array. Por defecto, ordena los elementos como cadenas de texto.

Ejemplo:

1const numeros = [4, 2, 3, 1];
2numeros.sort();
3console.log(numeros); // [1, 2, 3, 4]
Salida de Consola!:
[ 1, 2, 3, 4 ]

9. Array.prototype.reduceRight()

Descripción: Aplica una función a un acumulador y a cada valor del array (de derecha a izquierda) para reducirlo a un solo valor.

Ejemplo:

1const letras = ['a', 'b', 'c', 'd'];
2const resultado = letras.reduceRight((acumulador, letra) => acumulador + letra);
3console.log(resultado); // "dcba"
Salida de Consola!:
dcba

10. Array.prototype.flatMap()

Descripción: Primero aplica una función a cada elemento, luego aplana el resultado en un nuevo array. Es equivalente a map seguido de flat con profundidad 1.

Ejemplo:

1const arr = [1, 2, 3];
2const resultado = arr.flatMap(x => [x, x * 2]);
3console.log(resultado); // [1, 2, 2, 4, 3, 6]
Salida de Consola!:
[ 1, 2, 2, 4, 3, 6 ]

11. Array.prototype.concat()

Descripción: Combina dos o más arrays y devuelve un nuevo array sin modificar los arrays originales.

Ejemplo:

1const arr1 = [1, 2];
2const arr2 = [3, 4];
3const combinado = arr1.concat(arr2);
4console.log(combinado); // [1, 2, 3, 4]
Salida de Consola!:
[ 1, 2, 3, 4 ]

12. Array.prototype.slice()

Descripción: Devuelve una copia de una porción del array dentro de un nuevo array, sin modificar el array original.

Ejemplo:

1const numeros = [5, 7, 3, 4, 9];
2const subarray = numeros.slice(1, 3);
3console.log(subarray); // [7, 3]
Salida de Consola!:
[ 7, 3 ]
representación de slice

13. Array.prototype.splice()

Descripción: Cambia el contenido de un array eliminando, reemplazando, o añadiendo nuevos elementos.

Ejemplo:

1const numeros = [5, 3, 7, 2, 9, 1];
2numeros.splice(1, 3, 'a', 'b');
3console.log(numeros); // [ 5, 'a', 'b', 9, 1 ]
Salida de Consola!:
[ 5, 'a', 'b', 9, 1 ]
representación de splice

14. Array.prototype.flat()

Descripción: Aplana un array de arrays en un solo array. Puedes especificar la profundidad del aplanado.

Ejemplo:

1const arr = [1, [2, [3, [4]]]];
2const plano = arr.flat(2);
3console.log(plano); // [1, 2, 3, [4]]
Salida de Consola!:
[ 1, 2, 3, [ 4 ] ]

15. Array.prototype.reverse()

Descripción: Invierte el orden de los elementos de un array in situ.

Ejemplo:

1const numeros = [1, 2, 3];
2numeros.reverse();
3console.log(numeros); // [3, 2, 1]
Salida de Consola!:
[ 3, 2, 1 ]

16. Array.prototype.includes()

Descripción: Verifica si un array contiene un elemento específico. Devuelve true o false.

Ejemplo:

1const numeros = [1, 2, 3];
2const incluyeDos = numeros.includes(2);
3console.log(incluyeDos); // true
Salida de Consola!:
true

17. Array.prototype.indexOf()

Descripción: Devuelve el primer índice en el que se encuentra un elemento dado en el array, o -1 si no se encuentra.

Ejemplo:

1const numeros = [1, 2, 3, 2];
2const indice = numeros.indexOf(2);
3console.log(indice); // 1
Salida de Consola!:
1

18. Array.prototype.lastIndexOf()

Descripción: Devuelve el último índice en el que se encuentra un elemento dado en el array, o -1 si no se encuentra.

Ejemplo:

1const numeros = [1, 2, 3, 2];
2const ultimoIndice = numeros.lastIndexOf(2);
3console.log(ultimoIndice); // 3
Salida de Consola!:
3

19. Array.prototype.join()

Descripción: Une todos los elementos de un array en una cadena, separada por un delimitador opcional.

Ejemplo:

1const numeros = [1, 2, 3];
2const cadena = numeros.join('-');
3console.log(cadena); // "1-2-3"
Salida de Consola!:
1-2-3

20. Array.prototype.keys()

Descripción: Devuelve un nuevo objeto de iterador de array que contiene las claves de índice para cada elemento del array.

Ejemplo:

1const numeros = [6, 8, 2];
2const iterador = numeros.keys();
3for (let key of iterador) {
4  console.log(key); // 0 1 2
5}
Salida de Consola!:
0
1
2

21. Array.prototype.values()

Descripción: Devuelve un nuevo objeto de iterador de array que contiene los valores para cada índice del array.

Ejemplo:

1const numeros = [6, 8, 2];
2const iterador = numeros.values();
3for (let valor of iterador) {
4  console.log(valor); // 6 8 2
5}
Salida de Consola!:
6
8
2

22. Array.prototype.entries()

Descripción: Devuelve un nuevo objeto de iterador de array que contiene pares clave/valor para cada índice en el array.

Ejemplo:

1const numeros = [6, 8, 2];
2const iterador = numeros.entries();
3for (let [indice, valor] of iterador) {
4  console.log(indice, valor);
5}
Salida de Consola!:
0 6
1 8
2 2

Estas funciones de orden superior son fundamentales para trabajar de manera eficiente con arrays en JavaScript, proporcionando herramientas poderosas para manipular y procesar datos.

  • Loading...
  • Crea utilizando funciones de orden superior:

    una función llamada getPares que tome un array de números y devuelva un nuevo array solo con los números pares utilizando el método filter.

    Puedes usar funciones tradicionales o arrow functions.

    Ejemplos:

    • getPares([1, 2, 3, 4]) debe devolver [2, 4]
    Loading...
  • Crea utilizando funciones de orden superior:

    una función llamada triplica que tome un array de números y devuelva un nuevo array con los valores triplicados, utilizando el método map.

    Puedes usar funciones tradicionales o arrow functions.

    Ejemplos:

    • triplica([1, 2, 3, 4]) debe devolver [3, 6, 9, 12]
    Loading...
  • Crea utilizando funciones de orden superior:

    una función llamada sumalos que tome un array de números y devuelva el valor de la suma de todos sus elementos. Usa el método reduce.

    Puedes usar funciones tradicionales o arrow functions.

    Ejemplos:

    • sumalos([1, 2, 3, 4]) debe devolver 10
    Loading...