Saltar al contenido principal

Funciones de orden superior

@serverSerrverlesskiy

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 utilizado, 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⚙️.

Video

¿Qué es la programación funcional?

La programación funcional es una sección de las matemáticas discretas y un paradigma de programación en el que el proceso de cálculo se interpreta como el cálculo de los valores de las funciones en la comprensión matemática de estas últimas (en contraposición a las funciones como subrutinas en la programación procedimental). [Wikipedia]

Funciones de primera clase

First_class

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 son objetos Function. Por ejemplo:

Editor en vivo
Resultado
Loading...

Ahora sabemos qué son las funciones de primera clase⚙️. Puede pasar a funciones de orden superior.

Funciones de orden superior

Higher

Estas 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 : map() filter() y reduce()

Ejemplo 1. Cambiar números .push

Edit_number

Digamos que tenemos una matriz de números. Queremos crear una nueva matriz que contendrá los valores duplicados 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:

Editor en vivo
Resultado
Loading...

Con la versión de consola ⚙️ función de orden superior mapa:

Editor en vivo
Resultado
Loading...

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

Editor en vivo
Resultado
Loading...

Ejemplo #2. Valores calculados .map

Math

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 una función de orden superior⚙️ (clásico: a través de un bucle for() y push())

Editor en vivo
Resultado
Loading...

С функцией высшего порядка map:

Editor en vivo
Resultado
Loading...

Parpadeando una nueva matriz en una línea de código.

Ejemplo #3. Con verificación de condición .filter()

Check

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

Sin una función de orden superior (clásica - a través de un bucle for() y push()):

Editor en vivo
Resultado
Loading...

Con una función de 'filtro' de orden superior con una condición en línea:

Editor en vivo
Resultado
Loading...

Crear su propia función de orden superior

Create

Hasta ahora, hemos estado analizando funciones de orden superior⚙️ que están integradas en el lenguaje . Ahora vamos a crear esa función nosotros mismos⚙️. Imagina que JavaScript no tiene un método map integrado. 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 números, donde cada elemento representa la longitud de los elementos de la matriz original.

Editor en vivo
Resultado
Loading...

En el ejemplo anterior, creamos nuestra propia función de orden superior mapFor(), que toma una matriz arr 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 la newArray.push() para cada iteración, calculando el número de caracteres en las palabras de la matriz, cuyo algoritmo de cálculo se describe como una segunda variable .

:::nota devolución de llamada Una función de devolución de llamada⚙️ es una función⚙️ que se pasa a otra función⚙️ como argumento, que luego se llama cuando se completa alguna acción. :::

La función Callback⚙️ fn toma el elemento de matriz actual y devuelve la longitud del elemento actual, que ahora está almacenado en newArray. Después de que se complete el bucle For(), newArray devuelve la longitud de los elementos en lenArray.

Помните, любой сколь угодно малый алгоритм состоит из 3-х этапов:

  • 1 этап - Инициализация переменных и функций
  • 2 этап - Функция высшего порядка (логика)
  • 3 этап - Вывод ответа.

Conclusión

Aprendimos qué son las funciones de orden superior y desmantelamos varias de ellas ya integradas en el lenguaje . Aprendió a crear los suyos.

Sin entrar en detalles, sobre funciones⚙️ de orden superior, podemos decir esto: son funciones⚙️ que pueden tomar una función⚙️ como argumento e incluso devolver una función⚙️.

¿Problemas?

Problema

Escribe en Discord o Telegram chat y suscríbete a nuestras noticias

Preguntas:

Pregunta

Funciones de primera clase:

  1. Objetos de primera clase
  2. Objetos de quinta clase
  3. Objetos de la clase más alta

Función de orden superior:

  1. Acepta una función como argumento o devuelve una función como salida
  2. Solo toma una función como argumento
  3. Solo función de retorno como salida

Función de orden superior:

  1. Es imposible crearte a ti mismo
  2. Solo se puede usar a través del método incorporado
  3. Puedes crear el tuyo propio

Para comprender cuánto ha aprendido esta lección, realice una prueba en la aplicación móvil de nuestra escuela sobre este tema o en nuestro bot de Telegram.

EnglishMoji!

Enlaces:

  1. Aprender funciones de orden superior en JavaScript
  2. Artículo "Funciones de orden superior en JavaScript"
  3. Javascript expresivo. Artículo "Funciones de orden superior"
  4. Código para adolescentes: La gran guía de programación para principiantes Volumen 1: Javascript - Jeremy Moritz

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Dmitriy K.


Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

EnglishMoji!