Funciones de orden superior

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

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

function learnJavaScript() { let greeting = () => 'Hello, World !' return greeting() }

function learnJavaScript() {
  let greeting = () => 'Hello, World !'

  return greeting()
}

Resultado

Loading...

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

Funciones de orden superior

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

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

function learnJavaScript() { const arr1 = [1, 2, 3, 4] const arr2 = [] for (let i = 0; i < arr1.length; i++) { arr2.push(arr1[i] * 2) // array arr2 crece en un bucle } return arr2 // 2, 4, 6, 8 solo sin espacios }

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4]
  const arr2 = []

  for (let i = 0; i < arr1.length; i++) {
    arr2.push(arr1[i] * 2) // array arr2 crece en un bucle
  }

  return arr2 // 2, 4, 6, 8 solo sin espacios
}

Resultado

Loading...

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

Editor en vivo

function learnJavaScript() { const arr1 = [1, 2, 3, 4] const arr2 = arr1.map(function (item) { // versión antigua return item * 2 + ' ' }) return arr2 }

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4]
  const arr2 = arr1.map(function (item) {
    // versión antigua
    return item * 2 + ' '
  })
  return arr2
}

Resultado

Loading...

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

Editor en vivo

function learnJavaScript() { const arr1 = [1, 2, 3, 4, 5] const multTwo = item => item * 2 + ' ' const arr2 = arr1.map(multTwo) // Algoritmo en 1 línea return arr2 }

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4, 5]
  const multTwo = item => item * 2 + ' '

  const arr2 = arr1.map(multTwo) // Algoritmo en 1 línea

  return arr2
}

Resultado

Loading...

Ejemplo #2. Valores calculados .map

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

function learnJavaScript() { const birthYear = [1975, 1997, 2002, 1995, 1985] const ages = [] for (let i = 0; i < birthYear.length; i++) { let ageNew = 2020 - birthYear[i] + ' ' // El valor actual de la nueva matriz. ages.push(ageNew) // poner el nuevo valor en la matriz edades[] } return ages // [ 45, 23, 18, 25, 35 ] solo sin espacios }

function learnJavaScript() {
  const birthYear = [1975, 1997, 2002, 1995, 1985]
  const ages = []
  for (let i = 0; i < birthYear.length; i++) {
    let ageNew = 2020 - birthYear[i] + ' ' // El valor actual de la nueva matriz.
    ages.push(ageNew) // poner el nuevo valor en la matriz edades[]
  }

  return ages // [ 45, 23, 18, 25, 35 ] solo sin espacios
}

Resultado

Loading...

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

Editor en vivo

function learnJavaScript() { const birthYear = [1975, 1997, 2002, 1995, 1985] let ages = birthYear.map(year => 2020 - year + ' ') // Algoritmo en 1 línea a través de una función de flecha return ages // [ 45, 23, 18, 25, 35 ] }

function learnJavaScript() {
  const birthYear = [1975, 1997, 2002, 1995, 1985]
  let ages = birthYear.map(year => 2020 - year + ' ') // Algoritmo en 1 línea a través de una función de flecha
  return ages // [ 45, 23, 18, 25, 35 ]
}

Resultado

Loading...

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

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

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

function learnJavaScript() { const persons = [ { name: 'Niki', 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]) } } return fullAge.length // número de personas mayores de 18 años }

function learnJavaScript() {
  const persons = [
    { name: 'Niki', 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])
    }
  }

  return fullAge.length // número de personas mayores de 18 años
}

Resultado

Loading...

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

Editor en vivo

function learnJavaScript() { const persons = [ { name: 'Niki', age: 34 }, { name: 'Mark', age: 18 }, { name: 'John', age: 27 }, { name: 'Jane', age: 14 }, { name: 'Tony', age: 24 } ] const fullAge = persons.filter(person => person.age >= 18) // Algoritmo con una condición en 1 línea return fullAge.length // número de personas mayores de 18 años }

function learnJavaScript() {
  const persons = [
    { name: 'Niki', age: 34 },
    { name: 'Mark', age: 18 },
    { name: 'John', age: 27 },
    { name: 'Jane', age: 14 },
    { name: 'Tony', age: 24 }
  ]
  const fullAge = persons.filter(person => person.age >= 18) // Algoritmo con una condición en 1 línea

  return fullAge.length // número de personas mayores de 18 años
}

Resultado

Loading...

Crear su propia función de orden superior

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

function learnJavaScript() { // matriz de origen const strArray = ['English', 'JavaScript', 'React', 'TypeScript', 'AWS'] // la función de orden superior mapForEach() toma una función formal (hipotética) fn y una matriz formal arr let mapFor = (arr, fn) => { const newArray = [] for (let i = 0; i < arr.length; i++) { newArray.push(fn(arr[i])) // Aplicar una función fn() oculta a cada elemento } return newArray // Devolver una nueva matriz } // El código de transformación principal - mapForEach() se llama con valores de parámetros específicos const lenArray = mapFor(strArray, item => item.length + ' ') return 'Длина слов: ' + lenArray // [ 7, 10, 5, 10, 3 ] }

function learnJavaScript() {
  // matriz de origen
  const strArray = ['English', 'JavaScript', 'React', 'TypeScript', 'AWS']
  // la función de orden superior mapForEach() toma una función formal (hipotética) fn y una matriz formal arr
  let mapFor = (arr, fn) => {
    const newArray = []
    for (let i = 0; i < arr.length; i++) {
      newArray.push(fn(arr[i])) // Aplicar una función fn() oculta a cada elemento
    }
    return newArray // Devolver una nueva matriz
  }
  // El código de transformación principal - mapForEach() se llama con valores de parámetros específicos
  const lenArray = mapFor(strArray, item => item.length + ' ')

  return 'Длина слов: ' + lenArray // [ 7, 10, 5, 10, 3 ]
}

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?

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

Preguntas:

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.

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 🖋 🐛 🎨