Would you like to clone this notebook?

When you clone a notebook you are able to make changes without affecting the original notebook.

Cancel

ES6 Arrow Functions

node v18.11.0
version: 1.0.0
endpointsharetweet
Arrow functions (also known as fat arrow functions) have a shorter syntax compared to traditional function expressions and lexically bind the this value. Arrow functions are also always anonymous. Here we are using the shortest form, where the body is a simple expression and we can drop the parenthesis around the parameter since there is only one:
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Same as function(number) { return number * 2 } var doubled = numbers.map(number => number * 2);
If we want multiple parameters, we can add the parenthesis and curly braces back:
// Same as function(runningTotal, number) { return runningTotal + number } var sum = numbers.reduce((runningTotal, number) => runningTotal + number, 0);
Finally, more complex multistatement arrow functions can use curly braces:
// Here all we're really saving is the function() heading. numbers.map(number => { if (number % 3 == 0 && number % 5 === 0) return "Fizz Buzz"; if (number % 3 === 0) return "Fizz"; if (number % 5 === 0) return "Buzz"; return number; }).join("<br/>")
Arrow functions can also make your code less complex since they'll use the "this" of the surrounding scope, instead of introducing their own. This means you can avoid having to bind in many cases:
var cart = { items: [], addItem: function(anItem) { console.log("Added " + anItem + "!"); this.items.push(anItem); }, addAll: function(newItems) { // Before we'd have to do (function(anItem) { this.addItem(anItem) }).bind(this) newItems.forEach(anItem => this.addItem(anItem)); } } cart.addAll(["pickels", "tomatoes", "cheese"])
To learn more about arrow functions, check out https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/ Some of these examples and explanations originally taken and modified from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions https://github.com/lukehoban/es6features#arrows https://en.wikipedia.org/wiki/Fizz_buzz
Loading…

no comments

    sign in to comment