js_funciones_normales_anonimas_arrows

js_funciones_normales_anonimas_arrows.md

JS - Función Normal, Anónima, y Arrow Functions

Función Normal (declaración)

Se crean mediante la declaración function, indicando después el nombre de la función y un paréntesis de apertura y otro de cierre, entre los cuales podemos definir los posibles parámetros que recibe la función.

function hello() {
    return "Hello World!";
}

// invocamos la función
hello();

Función Anónima (expresión)

Es una función sin nombre o identificador que puede ser asignada a una variable. En este caso usaremos el nombre de la variable como identificador de la función.

const hello = function () {
    return "Hello World!";
}

// invocamos la función
hello();

Arrow function o Funciones Flecha

• Las Funciones Flecha se introdujeron en ES6 (ECMAScript v. 6).
• Las Funciones Flecha nos permiten escribir una función con una sintaxis más corta.

La transformación...

1. Eliminamos la palabra clave function y la reemplazamos por =>

const hello = () => {
    return "Hello World!";
}

// invocamos la función
hello();

2. Si la arrow function devuelve un solo valor por defecto. Si la función tiene una sola declaración y la declaración devuelve un valor, entonces eliminamos las llaves { } y la palabra clave return

const hello = () => "Hello World!";

// invocamos la función
hello();

Nota: Esto solo funciona si la función tiene solo una declaración.

3. Arrow function con parámetros. Si tiene parámetros, los enviamos dentro de los paréntesis.

const hello = (name) => "Hello " + name;

// invocamos la función
hello("Joe");

4. Arrow function sin paréntesis. Si solo tiene un parámetro, también puede omitir los paréntesis.

const hello = name => "Hello " + name;

// invocamos la función
hello("Joe");