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.