Javacript y arrow functions. Todo lo que deberías saber

Resumen de las principales características de las “arrow functions” de Javascript

¿Cómo se declaran?

const giveMeAMessage = () => 'hi arrow functions';
const giveMeAMessage = () => 'hi arrow functions';const aMessage = giveMeAMessage();console.log(aMessage); // hi arrow functions
❌ const giveMeADeveloper = () => { name: 'Gerardo', age: '33' };✅ const giveMeADeveloper = () => ({ name: 'Gerardo', age: '33' });
const giveMeAMessage = () => {
const foo = 'hi arrow functions';
return foo;
}

Argumentos en las arrow functions

const triple = x => x*3;const foo = triple(3); // 9
const sum = (a, b) => a + b;const foo = sum(1, 2); // 3
const pow = (a, b = 2) => Math.pow(a, b);const foo = pow(2); // 4const bar = pow(3, 3); // 27

🎩 Truco: Hacer un parámetro requerido

Image for post
Image for post

🎩 Truco: Emplear un parámetro anterior

Image for post
Image for post

High Order Functions

const generateAMultiplier = function(a) {
return function(b) {
return b * a;
}
};
const multiplier = generateAMultiplier(5);
const foo = multiplier(10); // 50
const generateAMultiplier = a => b => a * b;const multiplier = generateAMultiplier(5);
const foo = multiplier(10); // 50

Arrow functions y destructuring

const printAge = ({age}) => console.log(age);printAge({name: 'Gerardo', age: 33});
const printAge = ({age} = {age: 20}) => console.log(age);printAge({name: 'Gerardo', age: 33}); // 33
printAge(); // 20
Image for post
Image for post
Photo by Aziz Acharki on Unsplash

This y arrow functions

const foo = {
log: function() {
return function() {
console.log(this);
}
}
}
foo.log()(); // Window
const foo = {
log: function() {
console.log(this); // 1. foo
return function() {
console.log(this); // 2. Window
}
}
}
const log = foo.log(); // 1. foo
log(); // 2. Window
const foo = {
log: function() {
console.log(this); // 1. foo
return () => {
// this is lexically scoped to the surrounding scope,
// ie, the foo object
console.log(this); // 2. foo
}
}
}
const log = foo.log(); // 1. foo
log(); // 2. foo

Limitaciones de las arrow functions

No podemos emplearlas para construir objetos.

const MyClass = () => {};
const object = new MyClass();

No poseen prototype

const MyClass = () => {};
console.log(MyClass.prototype); // undefined

No pueden ser usadas como funciones generadoras

El método call y apply es ignorado

const saySomething  = function(message) {
console.log(`${this.name} says ${message}`);
}
console.log(saySomething.call(
{name: 'Gerardo'}, // value of this inside saySomething function
'hello'
));

Conclusiones

const anArray = [1, 2, 3];const filtered = anArray.filter(value => value % 2 === 0);

¿Quieres recibir más artículos como este?

Written by

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store