Listado completo de tutoriales

ES6 - Arrow functions (funciones flecha)

Las funciones flecha es una nueva sintaxis propuesta en ES6 para expresar las funciones anónimas.

Un ejemplo de definir una arrow function es:

const mayor = (x,y) => {
    if (x>y)
        return x;
    else
        return y;
}

document.write(mayor(10,2));

Como es una función anónima si queremos guardar una referencia a la misma se la debemos asignar a una constante o variable. Indicamos entre paréntesis los parámetros de la función luego la flecha => y finalmente entre llaves el algoritmo propiamente de la función.

Con la sintaxis anterior de JavaScript este algoritmo lo codificamos con la sintaxis:

const mayor = function(x,y) {
    if (x>y)
        return x;
    else
        return y;
}

document.write(mayor(10,2));

Problema

Ordenar un vector de enteros mediante el método sort, pasar una arrow function.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        const vec = [100, 22, 17, 50, 3];
        vec.sort((x, y) => {
            if (x > y)
                return 1;
            else
                return -1;
        })

        document.write(vec.toString());
    </script>

</body>

</html>

A la función sort le pasamos una función flecha.

Funciones flecha con un único parámetro.

Cuando una función flecha tiene un parámetro no es necesario encerrarlo entre paréntesis:

const vec = [100, 22, 17, 50, 3];
vec.forEach(elemento => {
    document.write(elemento+' ');
})

En este ejemplo el parámetro 'elemento 'es único y por eso no lo encerramos entre paréntesis.

Funciones flecha de una única línea.

Podemos definir funciones flecha de una única línea, en dichas situaciones no es necesario encerrar entre llaves el algoritmo.

const doble = x => x*2;

document.write(doble(10)); //20
document.write(doble(7)); //14

La función tiene un único parámetro llamado x y su algoritmo es multiplicar el valor que llega por 2. La función retorna el resultado sin tener que indicar la palabra clave return.

Otro ejemplo de arrow function con dos parámetros y resuelto con una única expresión:

const mayor = (x, y) => (x>y)?x:y;

document.write(mayor(7, 20)) // 20
document.write(mayor(60, 40)) // 60

Conociendo entonces que podemos definir funciones flecha de una única línea podemos plantear el algoritmo de ordenar un vector con una sintaxis más concisa:

const vec = [100, 22, 17, 50, 3];
vec.sort((x,y) => (x>y)?1:-1);

document.write(vec.toString());

Problema

Definir un vector con un conjunto de elementos. Generar un nuevo vector llamando al método filter pasando una función de flecha para definir cuales rescatar.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        const vec = [100, 22, 17, 50, 3, 78];
        const pares = vec.filter(elemento => elemento % 2 == 0);
        document.write('Vector completo:' + vec.toString());
        document.write('<br>');
        document.write('Vector generado con elementos pares:' + pares.toString());
    </script>

</body>

</html>

Funciones flecha sin parámetros.

Una función flecha que no tiene parámetros debemos disponer en forma obligatoria los paréntesis abiertos y cerrados previos a la flecha:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        window.addEventListener(
            'DOMContentLoaded',
            setTimeout(() => alert('pasó 3 segundos desde que se cargó la página'), 3000),
            false);
    </script>

</body>

</html>

Registramos en el evento 'DOMContentLoaded' de la página la referencia de la llamada a la función setTimeout pasando a esta función una función de flecha que no tiene parámetros y que tiene por objetivo mostrar una ventana de alerta.

El uso de las arrow functions se está generalizando en la programación en JavaScript.

Diferencia con las funciones tradicionales cuando se trata de un método.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        var objeto1 = {
            x: 10,
            metodo1: function() {
                alert(this.x);
            },
            metodo2: () => {
                alert(this.x);
            }
        }
        objeto1.metodo1(); //10
        objeto1.metodo2(); //undefined
    </script>

</body>

</html>

Cuando definimos un método con funciones flecha no existe el contexto de this para acceder a las propiedades del objeto. Es decir que las funciones flecha son más adecuadas cuando las trabajamos como funciones independientes y no como métodos de un objeto.

Retornar