Lección 11: Arrow | Curso JavaScript

Lección 11: Arrow

Las funciones de flecha (arrow) es una alternativa compacta de las funciones tradicionales. No son para todas las situaciones ya que no posee su propio contexto, hace referencia a su padre. Por lo que no es recomendable para construir objetos: no puede usarse en constructores, métodos, this, super, call, apply, bind y yield. No obstante, a pesar de todo, ayuda a simplificar la sintaxis y funciona bien en una programación orientada a funciones.

const listaDeNumeros = [1, 2, 3, 4];

const listaDeNumerosMas10 = listaDeNumeros.map(numero => numero + 10);

console.log(listaDeNumerosMas10);

// [11, 12, 13, 14]

Si deseas que no se comporte como una función anónima puedes guardarla en una variable.

const aumentar10 = numero => numero + 10;

console.log(aumentar10(5));

// 15

Su estructura varía dependiendo de su número de argumentos o líneas en su cuerpo.

Sin argumento

() => cuerpo

Su equivalencia sería la siguiente.

function () {
    return cuerpo
}

Por ejemplo.

setTimeout(() => console.log("He tardado 2s en aparecer"), 2000)

Un argumento

argumento1 => cuerpo

Su equivalencia sería la siguiente.

function (argumento1) {
    return cuerpo
}

Otra muestra sería la función del inicio.

numero => numero + 10

O también.

function (numero) {
    return numero + 10;
}

Varios argumentos

(argumento1, argumento2, argumento3) => cuerpo

Su equivalencia sería la siguiente.

function (argumento1, argumento2, argumento3) {
    return cuerpo
}

Un ejemplo.

const total = [10, 20, 30].reduce((total, numero) => total + numero);

console.log(total);

// 60

O también.

const total = [10, 20, 30].reduce(function (total, numero) {
    return total +  numero;
})

console.log(total);

// 60

Varias líneas en cuerpo

() => {
    cuerpo
    return cuerpo
}

Su equivalencia sería la siguiente.

function () {
    cuerpo
    return cuerpo
}

Un ejemplo.

setInterval(() => {
    const miFecha = new Date();
    console.log(miFecha.getSeconds());
}, 1000);

// 34
// 35
// ...

O también.

setInterval(function() {
    const miFecha = new Date();
    console.log(miFecha.getSeconds());
}, 1000);

// 34
// 35
// ...

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario