Expresiones de función

Las funciones expressions son funciones cuando se espera una expresión. Con frecuencia, encontrarás funciones expresiones como valores asignados a una variable. Aunque una declaración de función siempre requiere un nombre, puedes usar expresiones de funciones para crear si omites el identificador y sigues la palabra clave function con un par de paréntesis que contiene parámetros opcionales:

const myVariable = function() { };

Luego, podrás llamar a esos expresiones de funciones con el identificador de la variable:

const myVariable = function() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

También puedes usar expresiones de funciones para crear funciones con nombre mediante una sintaxis de manera similar a las declaraciones de funciones:

const myVariable = function myFunction() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

Sin embargo, a diferencia de las declaraciones de funciones, una expresión de función con nombre puede ser se accede por el nombre de la función solo dentro de la función en sí:

const myVariable = function myFunction() {
  console.log( `I'm a ${ typeof myFunction }.`);
};

typeof myFunction;
> "undefined"

typeof myVariable;
> "function"

myVariable();
> "I'm a function."

Los nombres asociados con expresiones de funciones son útiles principalmente para la depuración. R la expresión de función con nombre también puede llamarse a sí misma de manera recursiva, aunque no es un caso de uso muy común en el desarrollo moderno:

const myVariable = function myFunction() {
    console.log( "One second elapsed." );
    setTimeout( myFunction, 1000 );
};

setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."
…

Expresiones de las funciones de flecha

Las expresiones de funciones de flecha (a menudo llamadas "funciones de flecha" o, en raras ocasiones, "funciones lambda") se introdujeron en ES6 para proporcionar una sintaxis concisa para crear expresiones de funciones anónimas con algunos comportamientos únicos.

Puedes crear una función de flecha siempre que se espere una expresión, por ejemplo, ejemplo, como un valor asignado a una variable. En su forma más común, una flecha la función se compone de un par de paréntesis coincidentes que contienen cero o más parámetros, una flecha formada por un solo signo igual y mayor que (=>) y un par de llaves coincidentes que contienen el cuerpo de la función:

const myFunction = () => {};

En ciertas condiciones, puedes hacer que la sintaxis sea aún más compacta. Si estás usando solo un parámetro, puedes omitir los paréntesis de inicio:

const myFunction = myParameter => {};

Cuando quieras que el cuerpo de la función devuelva el valor de una sola expresión, no encierras el cuerpo de la función entre llaves ni la palabra clave return son obligatorias:

const myFunction = () => 2 + 2

myFunction()
> 4

Las funciones de flecha son únicas en el sentido de que no tienen su propio contexto para arguments o Valores this. En cambio, heredan de la función Flecha entorno que lo encierra léxicamente, el entorno que proporciona esos contextos.

function myParentFunction() {
    this.myProperty = true;
    let myFunction = () => {
            console.log( this );
    }
    myFunction();
};

let myInstance = new myParentFunction();
> Object { myProperty: true }

Funciones con flechas de llamada

Las funciones de flecha no vinculan argumentos de la misma manera que otros tipos de funciones. Un objeto arguments en el cuerpo de una función de flecha hereda su valor del entorno de cierre léxico más cercano de esa función de flecha:

function myFunction() {
    let myArrowFunction = () => {
            console.log( arguments[ 0 ] );
    }
    myArrowFunction( true );
};

myFunction( false );
> false

En este ejemplo, una función externa a la que se llama con el argumento false llama a un función de flecha interna con el argumento true. Debido a que el objeto arguments dentro de la función flecha se resuelve en la vinculación en la función externa, la función interna registra el false de la función externa.

Si no hay un objeto arguments para heredar del contexto superior, la flecha objeto arguments de la función no están definidos, y intentar acceder a él genera una error:

let myArrowFunction = () => {
    console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined

Expresiones de funciones invocadas de inmediato (IIFE)

Una expresión de función invocada de inmediato (IIFE), también a veces llamada “función anónima de ejecución automática”, es una expresión de función que se llama de inmediato cuando se defina. Un IIFE usa una expresión de función creada por delimita la función en un operador de agrupación. Un segundo par de paréntesis coincidente luego llama a la función, ya sea inmediatamente después de la definición de la función o inmediatamente después de la agrupación como "autor" y "título" usando un operador lógico. Si usas una función estándar, no hay diferencia práctica entre los dos enfoques:

(function() {
    console.log( "IIFE.")
    }
)();
> "IIFE."

(function() {
    console.log( "IIFE.")
    }
());
> "IIFE."

En el primer ejemplo, se llama a la expresión de función agrupada. El segundo ejemplo llama a una declaración de función dentro de los operadores de agrupación y el resultado final se evalúa como una expresión agrupada. El resultado es el mismo en para determinar si este es el caso.

Sin embargo, existe una diferencia cuando tu IIFE es una función flecha. En este caso, los paréntesis que se usan para llamar a la función deben estar fuera de la agrupación operadores, porque una función de flecha por sí sola no es una expresión, sino que crearse en un contexto en el que se espera una expresión. ¿Intento llamar al la función flecha dentro del alcance de los operadores de agrupación implicaría llamando a una función flecha que aún no se ha creado en el contexto de una expresión:

( () => {
    console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical

Debido a que los operadores de agrupación esperan una expresión, se define la función de flecha dentro de ellos, lo que permite que los paréntesis que los siguen llamen a la expresión agrupada:

( () => {
    console.log( "IIFE." );
} )();
> "IIFE."

Aplicaciones heredadas, IIFE utilizado con frecuencia para administrar el alcance, específicamente para evitar contaminar el alcance global con variables con alcance de función y declaraciones de funciones. Antes de la introducción del alcance de bloque en ES6, era común unir una secuencia de comandos completa en un IIFE para evitar la contaminación accidental del alcance global.

Verifica tu comprensión