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.

// Declaración de 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...

Eliminamos la palabra clave function y la reemplazamos por =>

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

// invocamos la función
hello();

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.

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");

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");

Return explícito e implícito en una función

Antes de iniciar:

Explícito: Que expresa algo con claridad.
Implícito: Que está incluido, sin que está lo especifique.

Retorno explícito.

Las funciones regulares y las funciones flecha pueden comportarse de forma similar, ya que podemos devolver un valor explícitamente, utilizando la palabra reservada “return”.

Función standard / regular.

function add(x, y) {
    // Statements
    return x + y;
}

Función flecha.

const add = (x, y) => {
    return x + y;
}

Retorno implícito.

Las funciones flecha tiene una ventaja sobre las funciones regulares, ya que las funciones flecha pueden devolver un valor de forma implícitamente, simplemente omitimos las llaves que normalmente envuelven el cuerpo de una función.

Nota: El implícito es exclusivo de las funciones flecha.

//
const increment = x => ++x;

Cuando se usan retornos implícitos, los objetos deben estar entre paréntesis para que las llaves no se confundan con la apertura del cuerpo de la función.

const obj = () => {name: "Victor", age: 15};  // Devuelve undefined
const obj = () => ({name: "Victor", age: 15});  // Devuelve { name: "Victor"}

¿Cuándo usarlos?

Si tu función necesita varias declaraciones entonces retorna de forma explícita.

hchocobar/js_funciones_normales_anonimas_arrows.md