Aprendizaje de funciones de orden superior en JavaScript

Aprenderá qué son las funciones de orden superior y cómo usarlas en JavaScript.

Si está aprendiendo JavaScript, probablemente haya encontrado el término "Funciones de orden superior". Parece que es algo complicado, pero no lo es.

Las funciones de orden superior permiten que JavaScript sea adecuado para la programación funcional.

Tales funciones son ampliamente utilizadas en JavaScript. Si ha realizado alguna programación de JavaScript, probablemente los haya usado, tal vez sin siquiera darse cuenta.

Para comprender completamente este concepto, primero debe comprender la programación funcional y el concepto de funciones de primera clase.

¿Qué es la programación funcional?

En términos simples, la programación funcional es una forma de programación en la que puede pasar funciones como parámetros a otras funciones y también devolverlas como valores. En la programación funcional, pensamos y escribimos código en términos de funciones.

JavaScript, Haskell, Clojure, Scala y Erlang son solo algunos de los lenguajes que utilizan esta forma de programación.

Funciones de primera clase

Si ya está aprendiendo JavaScript, es posible que haya escuchado que JavaScript trata las funciones como objetos de primera clase. En JavaScript, las funciones son objetos, al igual que en otros lenguajes de programación funcional.

En JavaScript, las funciones son un tipo especial de objeto. Estos  Functionson objetos. Por ejemplo:

function greeting() {
  console.log('Hello World');
}

// Invoking the function
greeting();  // prints 'Hello World'

Para probar que las funciones son objetos en JavaScript, puede escribir código como este:

// We can add properties to functions like we do with objects
greeting.lang = 'English';

// Prints 'English'
console.log(greeting.lang);

Nota:

Aunque este es un código válido, no se recomienda usarlo en la práctica. No debe asignar propiedades aleatorias a los objetos de función. Para hacer esto, use objetos.

En JavaScript, puede hacer lo mismo con funciones que con otros tipos, como objetos, cadenas o números. Puede pasarlos como parámetros a otras funciones (devolución de llamada), asignarlos a variables y pasarlos. Por lo tanto, las funciones en JavaScript se denominan "Funciones de primera clase".

Asignación de funciones a variables

En JavaScript, podemos asignar funciones a las variables. Por ejemplo:

const square = function(x) {
  return x * x;
}

// prints 25
square(5);

También podemos transferirlos. Por ejemplo:

const foo = square;

// prints 36
foo(6);

Pasar funciones como parámetros

Podemos pasar funciones como parámetros a otras funciones. Por ejemplo:

function formalGreeting() {
  console.log("How are you?");
}

function casualGreeting() {
  console.log("What's up?");
}

function greet(type, greetFormal, greetCasual) {
  if(type === 'formal') {
    greetFormal();
  } else if(type === 'casual') {
    greetCasual();
  }
}

// prints 'What's up?'
greet('casual', formalGreeting, casualGreeting);

Ahora sabemos qué son las funciones de primera clase. Puede continuar con "Funciones de orden superior".

Funciones de orden superior

Tales funciones operan sobre otras funciones tomándolas como argumentos o devolviéndolas. En pocas palabras, las funciones de orden superior son funciones que toman una función como argumento o devuelven una función como salida.

Por ejemplo, estas funciones de orden superior están integradas en el lenguaje:  Array.prototype.map,  Array.prototype.filter y  Array.prototype.reduce .

Funciones de orden superior en acción

Veamos algunos ejemplos de tales funciones y comparemos el código con y sin funciones de orden superior.

Array.prototype.map

El método  map() crea una nueva matriz llamando a la función de devolución de llamada especificada como argumento para cada elemento de la matriz de entrada. El método  map()toma cada valor de retorno de la función de devolución de llamada y crea una nueva matriz utilizando esos valores.

La función de devolución de llamada enviada al método  map()toma 3 argumentos:  element,  indexy  array.

Veamos ejemplos:

Ejemplo №1

Digamos que tenemos una matriz de números. Queremos crear una nueva matriz que contenga dobles de la primera. Veamos cómo podemos resolver este problema con y sin una función de orden superior.

Sin función de orden superior

const arr1 = [1, 2, 3];
const arr2 = [];

for(let i = 0; i < arr1.length; i++) {
  arr2.push(arr1[i] * 2);
}

// prints [ 2, 4, 6 ]
console.log(arr2);

Con función de orden superior map

const arr1 = [1, 2, 3];

const arr2 = arr1.map(function(item) {
  return item * 2;
});

console.log(arr2);

Podemos escribirlo aún más corto usando la sintaxis de la función flecha:

const arr1 = [1, 2, 3];

const arr2 = arr1.map(item => item * 2);

console.log(arr2);

Ejemplo №2

Digamos que tenemos una matriz que contiene los años de nacimiento de diferentes personas. Necesitamos crear una matriz que almacene su edad. Por ejemplo:

Sin función de orden superior

const birthYear = [1975, 1997, 2002, 1995, 1985];
const ages = [];

for(let i = 0; i < birthYear.length; i++) {
  let age = 2018 - birthYear[i];
  ages.push(age);
}

// prints [ 43, 21, 16, 23, 33 ]
console.log(ages);

Con función de orden superior map

const birthYear = [1975, 1997, 2002, 1995, 1985];

const ages = birthYear.map(year => 2018 - year);

// prints [ 43, 21, 16, 23, 33 ]
console.log(ages);

Array.prototype.filter

El método  filter() crea una nueva matriz de elementos que pasan la prueba proporcionada por la función de devolución de llamada. Esta función, enviada al método  filter(), toma 3 argumentos  element,  indexy  array.

Veamos algunos ejemplos:

Ejemplo №1

Tenemos una matriz que contiene objetos con propiedades: nombre y edad. Necesitamos crear una matriz que solo contenga adultos (es decir, edad mayor o igual a 18).

Sin función de orden superior

const persons = [
  { name: 'Peter', age: 16 },
  { name: 'Mark', age: 18 },
  { name: 'John', age: 27 },
  { name: 'Jane', age: 14 },
  { name: 'Tony', age: 24},
];

const fullAge = [];

for(let i = 0; i < persons.length; i++) {
  if(persons[i].age >= 18) {
    fullAge.push(persons[i]);
  }
}

console.log(fullAge);

Con función de orden superior filter

const persons = [
  { name: 'Peter', age: 16 },
  { name: 'Mark', age: 18 },
  { name: 'John', age: 27 },
  { name: 'Jane', age: 14 },
  { name: 'Tony', age: 24},
];

const fullAge = persons.filter(person => person.age >= 18);

console.log(fullAge);

Array.prototype.reduce

El método  reduce ejecuta una función de devolución de llamada para cada elemento de la matriz llamada, lo que da como resultado un único valor de salida. El método  reduce toma dos parámetros: 1) una función reductora (devolución de llamada), 2) y un  initialValue.

La función reductora (devolución de llamada) toma 4 parámetros:  accumulator,  currentValue,  currentIndex,  sourceArray.

initialValue Si se proporciona  el parámetro , accumulator será igual  initialValue a e  currentValue igual al primer elemento de la matriz.

initialValue Si no se proporciona  el parámetro , accumulator será igual al primer elemento de la matriz y  currentValue - al segundo.

Ejemplo №1

Digamos que necesitamos sumar una matriz de números:

Con función de orden superior reduce

const arr = [5, 7, 1, 8, 4];

const sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
});

// prints 25
console.log(sum);

Se llama a la función reducer para cada elemento de la matriz, y el resultado devuelto por el reducer se almacena en  accumulator . B  currentValue contiene el valor actual de la matriz. El resultado final se almacena en una variable  sum .

Podemos establecer el valor inicial de esta función:

const arr = [5, 7, 1, 8, 4];

const sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 10);

// prints 35
console.log(sum);

Sin función de orden superior

const arr = [5, 7, 1, 8, 4];

let sum = 0;

for(let i = 0; i < arr.length; i++) {
  sum = sum + arr[i];
}

// prints 25
console.log(sum);

Observe cómo el uso de una función de orden superior hizo que nuestro código fuera más limpio, más conciso y menos detallado.

Crear su propia función de orden superior

Hasta ahora, hemos analizado las funciones de orden superior integradas en el lenguaje. Ahora vamos a crear esa función nosotros mismos.

Imagine que JavaScript no tiene un método de mapa incorporado. Podemos escribirlo nosotros mismos creando una función de orden superior.

Digamos que tenemos una matriz de cadenas y queremos convertirla en una matriz de enteros donde cada elemento representa la longitud de una cadena de la matriz original.

const strArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C'];

function mapForEach(arr, fn) {
 const newArray = [];
  for(let i = 0; i < arr.length; i++) {
    newArray.push(
      fn(arr[i])
    );
  }

 return newArray;
}

const lenArray = mapForEach(strArray, function(item) {
  return item.length;
});

// prints [ 10, 6, 3, 4, 1 ]
console.log(lenArray);

En el ejemplo anterior, hemos creado una función de orden superior  mapForEach que toma una matriz y una función de devolución de llamada  fn. Esta función recorre la matriz dada y llama a la función de devolución de llamada  fn dentro de la función  newArray.push para cada iteración.

La función de devolución de llamada fn toma el elemento actual de la matriz y devuelve la longitud del elemento actual, que se almacena en  newArray . Una vez que se completa el bucle For,  newArray devuelve el valor en  lenArray .

Conclusión

Aprendimos qué son las funciones de orden superior y desmantelamos varias de ellas ya integradas en el lenguaje. Y también aprendiste a crearlos tú mismo.

Sin entrar en detalles, podemos decir esto sobre las funciones de orden superior: estas son funciones que pueden tomar una función como argumento e incluso devolver una función. Estas funciones son similares a las funciones ordinarias, pero con la capacidad adicional de recibir y devolver otras funciones como argumentos y resultados.

Fuente:

https://elsolitario.org/post/aprendizaje-de-funciones-de-orden-superior-en-javascript/