03. Arrow function π©βπ«π§βπ«
syntax
// All of the `createGreeting` functions are equivalent
var createGreeting = function(message, name) {
return message + ", " + name + "!";
};
// We can safely swap out function expressions with arrow functions most of the time
var createGreeting = (message, name) => {
return message + ", " + name + "!";
};
// If the arrow function body contains only one expression, we can omit the curly braces and auto return it
var createGreeting = (message, name) => message + ", " + name + "!";
// If an arrow function only has one parameter, we can omit the parens () around the single parameter
var greet = greeting => console.log(greeting);
// We call arrow functions the same way as we call regular functions
var greeting = createGreeting("Hello", "Angie");
// Logs "Hello, Angie!";
greet(greeting);
context
// Depending on the environment `setTimeout` is called in, it may refer to one of two objects
// In the browser, `setTimeout` is a property of the `window` object
// In node, it belongs to a special "Timeout" object
var person = {
name: "Hodor",
saySomething: function() {
console.log(this.name + " is thinking...");
setTimeout(function() {
console.log(this.name + "!");
}, 100);
}
};
person.saySomething(); // prints "Hodor is thinking..."
// prints "undefined!" 100ms later
// Arrow functions bind the `this` keyword to the object it's created inside of
// i.e. whatever `this` is where it's created
var person = {
name: "Hodor",
saySomething: function() {
console.log(this.name + " is thinking...");
setTimeout(() => console.log(this.name + "!"), 100);
}
};
person.saySomething(); // "Prints Hodor is thinking..."
// prints `Hodor!` 100ms later
property method
// Avoid using arrow functions for object methods
var dog = {
name: "Lassie",
sound: "Woof!",
makeSound: () => console.log(this.sound),
readTag: () => console.log("The dog's tag reads: " + this.name + ".")
};
// Prints `undefined`
dog.makeSound();
// Prints `The dog's tag reads: undefined.`
dog.readTag();
// In the makeSound and readTag methods, `this` doesn't refer to `dog`
// If this code run in node, `this` refers to `module.exports` (the object containing all the exports in this file)
// If this code was run in the browser, `this` would refer to the window