Arrow Functions

Es una forma diferente de crear una función.

const aprendiendo = function() {
    console.log('Aprendiendo JavaScript');
}

const aprendiendo = () =>  {
    console.log('Aprendiendo JavaScript');
}

// una linea no requiere llaves
const aprendiendo = () => console.log('Aprendiendo JavaScript');

// retornar un valor
const aprendiendo = () => 'Aprendiendo JavaScript';


console.log(aprendiendo());

Entiendo que es una modificación de la creación de una expresión.

Las principales características

  • el return está implícito
  • si el cuerpo de la función es de una sola línea entonces no requiere las llaves
  • no se usa la palabra reservada function

Se entiende entonces que el nombre de la variable pasa a ser la función en si. La puedo llamar solo agregando los paréntesis. Entonces al crearla asigno o no parámetros en los paréntesis y luego la flecha indica lo que voy a hacer con ellos.

En el ejemplo de abajo está más limpio

const aprendiendo = (tecnologia) => console.log(`aprendiendo ${tecnologia}`);
aprendiendo('JavaScript');

// si es un solo parmetro no ocupamos el parentesis
const aprendiendo1 = tecnologia2 => console.log(`aprendiendo ${tecnologia2}`);
aprendiendo1('JavaScript');

// multiples parametros si requieren parentesis
const aprendiendo2 = (tecn1, tecn2) => console.log(`Aprendiendo ${tecn1} ${tecn2}`);
aprendiendo2('JS', 'ES');
  • Se usa la expresión de función para crear una arrow function
  • si se va a usar un solo parámetro, los paréntesis no hacen falta
  • la palabra function se elimina y en su lugar se coloca una flecha del otro lado del paréntesis
  • si el código es una sola línea entonces los llaves no hacen falta
  • llamo la función por medio del nombre de la variable y el paréntesis para pasar argumentos

Es un código más corto y directo.

Métodos .map() y .forEach() con arrow function

En la sección de arrays vimos el comportamiento de .map y .forEach, abajo podemos ver cómo se reescribe el mismo código pero usando arrow functions. En el caso de map el return está implícito, se arma el nuevo arreglo en la variable nuevoArray y luego se muestra por console.log.

Luego en el forEache se aplica el console.log en cada interacción. 

const carrito = [
    { nombre: 'Monitor 20 Pulgadas', precio: 500},
    { nombre: 'Televisión 50 Pulgadas', precio: 700},
    { nombre: 'Tablet ', precio: 300},
    { nombre: 'Audifonos', precio: 200},
    { nombre: 'Teclado', precio: 50},
    { nombre: 'Celular', precio: 500},
]

const nuevoArray = carrito.map(  producto =>  `Articulo: ${ producto.nombre } Precio: ${producto.precio} `);
console.log(nuevoArray);

carrito.forEach( producto =>  console.log( `Articulo: ${ producto.nombre } Precio: ${producto.precio} `));

Arrow functions con métodos de propiedad

Un ejemplo de los arrow functions con métodos de propiedad explicado en la clase de arrays. También un adelanto de Set y Get pero que no se entiende del todo.

// Arrow functions en métodos de propiedad

const reproductor = {
    cancion: '',
    reproducir: id => console.log(`Reproduciendo canción id ${id}`),
    pausar: () => console.log('pausando...'),
    borrar: id => console.log(`Borrando canción con id: ${id}`),
    crearPlaylist: nombre =>  console.log(`Creando la Playlist ${nombre}`),
    reproducirPlaylist: nombre =>  console.log(`Reproduciendo la Playlist ${nombre}`),

    // También existen los Set y Get si tienes experiencia con esos términos, y si no, set es para añadir un valor, get es para obtenerlo...

    set nuevaCancion(cancion) {
        this.cancion = cancion;
        console.log(`Añadiendo ${cancion}`)
    },
    get obtenerCancion() {
        console.log(`${this.cancion}`)
    }
}
reproductor.reproducir(30);
reproductor.pausar();
reproductor.borrar(20);
reproductor.crearPlaylist('Heavy Metal');
reproductor.reproducirPlaylist('Heavy Metal');

// Probando set y get se utilizando de la siguiente forma
reproductor.nuevaCancion = 'Enter Sandman';
reproductor.obtenerCancion;

El resultado en consola:

Finalizando

Hasta aquí la parte de funciones, se llevó finalmente 3 páginas.