Funciones de JavaScript

Las funciones de JavaScript son capaces de algo más que simplemente encerrar un montón de códigos mientras esperan que se ejecute la llamada. Las funciones han evolucionado con el tiempo y han llevado a nuevas definiciones, métodos de ejecución y sintaxis. Esta publicación cubrirá algunos de los roles actuales que han jugado hasta ahora.

Conocer las diferentes formas de expresar y definir funciones abre la posibilidad de Implementando una lógica de una manera más óptima. en JavaScript. Además, es posible que pueda responder las preguntas de la entrevista más fácilmente..

Expresiones de funciones

Cuando simplemente indica una función con función palabra clave, parámetros opcionales y cuerpo de código, es un función declaración.

Poner esa declaración en una expresión de JavaScript (como en una asignación o expresión aritmética), se convierte en un función expresión.

// declaración de función function function_name () ; // Expresión de la función var function_name = function () ;

Todas las declaraciones de JavaScript se elevan (se suben en el alcance) durante la evaluación. Por lo tanto, escribir una llamada de función antes de que la declaración de función esté bien (ya que la declaración se moverá hacia arriba de todos modos).

function_name (); // function call [WORKS] function function_name () ;

Sin embargo, las expresiones de funciones no se elevan ya que las funciones se convierten en parte de las expresiones y no son declaraciones independientes..

function_name (); // function call [WON'T WORK] var function_name = function () ;

Expresión de función inmediatamente invocada (IIFE)

Es una expresión de función, cuyo código se ejecuta inmediatamente (solo una vez cuando se evalúa). Puedes crear uno simplemente agregando () (sintaxis utilizada para llamar a una función) justo después de una expresión de función. Pueden ser anónimos (sin nombre para llamarlo).

A continuación se muestran las dos sintaxis más comunes para crear IIFE:

(function optional_function_name () // body ());

(function optional_function_name () // body) ();

El paréntesis alrededor de la declaración de función lo convierte en una expresión y luego agrega () después llama a la función. Puede utilizar otras formas de crear IIFE durante el tiempo que agregue () después de una expresión de función (como a continuación), pero los métodos preferidos son los dos anteriores.

// Algunas de las formas de crear la función IIFEs! () / *… * / (); + función () / *… * / (); nueva función () / *… * /;

IIFE es ideal para escribir código que necesita ejecutarse solo una vez, espacios de nombres, creación de cierres, creación de variables privadas y más. A continuación se muestra un ejemplo de uso de IIFE..

var page_language = (function () var lang; // Code para obtener el idioma de la página return lang;) ();

El código para obtener el idioma de la página se ejecuta solo una vez (preferiblemente después de que se cargue la página). El resultado se almacena en. page_language para uso posterior.

Métodos

Cuando una función es una propiedad de un objeto, se llama método. Como una función es también un objeto, una función dentro de otra función también es un método. A continuación se muestra un ejemplo para un método dentro de un objeto..

var calc = add: function (a, b) return a + b, sub: function (a, b) return a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); // 78

los añadir y sub Las funciones son métodos de calc objeto.

Ahora para una función dentro del ejemplo de función:

función add (a) return function (b) return a + b; console.log (add (1) (2)); // La salida es 3

La función anónima devuelta es un método de función. añadir.

Nota: Desde el parámetro (una) de la función añadir en el ejemplo anterior está disponible para la siguiente función invocar, este tipo de proceso se llama zurra.

Constructores

Cuando añades nuevo palabra clave antes de una función y llámala, se convierte en un constructor que crea instancias. A continuación se muestra un ejemplo donde se utilizan constructores para crear instancias de Fruta y los valores se añaden a cada uno Frutapropiedades de.

función Fruta () nombre var, familia; // Nombre científico y familia this.getName = function () return name;; this.setName = function (value) name = value; this.getFamily = function () return family;; this.setFamily = function (value) family = value;  var manzana = nueva fruta (); apple.setName ("Malus domestica"); apple.setFamily ("Rosaceae"); var naranja = nueva fruta (); orange.setName ("Citrus Ã ?? Â ?? Ã¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? sinensis "); orange.setFamily (" Rutaceae "); console.log (orange.getName ()); //" Citrus Ã ?? Â ?? Ã¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? sinensis "console.log (apple.getName ()); //" Malus domestica "console.log (orange.getFamily ()); //" Rutaceae "

Funciones de flecha (estándar ES6) [solo en Firefox]

Una nueva definición de función de ES6 Standard proporciona una sintaxis más corta para la expresión de función. La sintaxis es

() => / * cuerpo * /

Esta función de muestra:

var sing = function () console.log ('cantando ...');

es lo mismo que:

var sing = () => console.log ('cantando ...');

Las funciones de flecha son anónimas y no tienen la suya propia. esta valor, esta dentro será igual que esta en el codigo adjunto. Además, no puedes cambiarlo a un constructor con nuevo palabra clave.

Son útiles para cuando quieras. esta dentro de una función para que sea igual que afuera y su sintaxis más corta hace que el código para escribir la función sea más conciso (como a continuación)

setInterval (function () console.log ('message'), 1000);

dentro

setInterval (() => console.log ('mensaje'), 1000);

Funciones del generador (estándar ES6) [solo en Firefox]

Otra nueva definición de función del estándar ES6 es la función de generador. Las funciones del generador son capaces de detener y continuar su ejecución. Su sintaxis es:

function * function_name ()

function * function_name ()

Las funciones del generador crean iteradores. El iterador de siguiente El método se utiliza para ejecutar el código dentro de la función del generador hasta que el rendimiento palabra clave se alcanza. Después de eso, el valor iterado identificado por el rendimiento la palabra clave es devuelta por la función del generador y la ejecución se detiene.

La función del generador se ejecuta de nuevo cuando el siguiente El método se llama hasta el siguiente. rendimiento palabra clave se alcanza. Una vez que todos los rendimiento Se ejecutan las expresiones, devuelve el valor cedido. indefinido.

A continuación se muestra un ejemplo simple:

función * generator_func (cuenta) para (var i = 0; i Aquí hay otro ejemplo:
 función * randomIncrement (i) rendimiento i + 3; rendimiento i + 5; rendimiento i + 10; rendimiento i + 6;  var itr = randomIncrement (4); console.log (itr.next (). value); // 7 console.log (itr.next (). Value); // 9 console.log (itr.next (). Value); // 14 
 También hay un rendimiento* Expresión que pasa el valor a otra función del generador.
 función * frutas (fruta) rendimiento * verduras (fruta); rendimiento "Uvas";  function * veggies (fruit) produce fruit + "and Spinach"; dar fruto + "y brócoli"; ceder fruto + "y pepino";  var itr = frutas ("Apple"); console.log (itr.next (). value); // "Apple and Spinach" console.log (itr.next (). Value); // "Apple y brócoli" console.log (itr.next (). Value); // "Apple and Cucumber" console.log (itr.next (). Value); // "Grapes" console.log (itr.next (). Value); // indefinido 
 Las funciones del generador son útiles si desea pasar por los valores uno por uno en su punto preferido en el código haciendo una pausa, en lugar de hacerlo de una en una como en bucle a través de una matriz.
 Conclusión
 He incluido una lista de referencias a continuación, donde encontrará enlaces a referencias y artículos que profundizan en diferentes temas por separado.. Ambas funciones estándar de ES6 funcionarán solo en Firefox en este momento.
 Referencias
 Lenguaje ECMAScript: Funciones y Clases
 Expresión de función inmediatamente invocada (IIFE)
 Los fundamentos de los generadores ES6
 Funciones de flecha
 Función - Red de desarrolladores de Mozilla