Part II: Understanding arrow functions Click here to view Part III: Understanding standard, embedded, multiline and tagged template literals. Preface This article is designed as a “get started” read for beginner to intermediate developers who wish to gain a better understanding of ES6 arrow functions. As part of my “Getting to Grips with ES6” series, I aim to create a reference containing straight forward explanations ordered in short sections to help us understand and apply these concepts directly to our current development processes. Written by . You can find me on , , , and . Andrew Hill LinkedIn Twitter Instagram GitHub The Arrow Function Arrow functions (often referred to as fat arrow functions or lambda functions) are a concise way of writing functions that do not rebind context ( ) within other functions. Their short syntax is further enhanced by their ability to return values implicitly in one line, single return functions. this Arrow functions can never be named and as such, are always considered anonymous functions. Traditional Function Definitions Until now, JavaScript has made use of the following syntax for anonymous functions: var double = function(a) {return a * 2;} double(100); // Output: 200 There are a wide variety of syntaxes available to arrow functions; a full list of which is available on . The examples in this article will make use of the most common ones in the interest of brevity. EcmaScript.org Arrow Function Definitions With the introduction of arrow functions, we can rewrite the given example as follows: const double = (a) => {return a * 2;} double(100); // Output: 200 Parameters and Parenthesis Parenthesis are required around arrow functions with multiple parameters: const add = (a, b) => {return a + b;} add(100, 200); // Output: 300 Parenthesis are also required in arrow functions that do not contain any parameters at all: const fullName = () => {return 'Andrew Hill';} name(); // Output: Andrew Hill Functions that contain a single allow us to omit the parenthesis from the definition all together: parameter function const double = a => {return a * 2;} double(100); // Output: 200 Implicitly Returning Our example is a simple one line function that returns a value immediately. In a use case such as this, we are allowed to omit the functions curly braces in order to its result: implicitly return const double5 = a => a * 2; double5(100); // Output: 200 Returning Object Literals Implicitly Traditionally, if we wanted to return an object literal we would write our function as follows: var animal = function(type, name) {return {type: type,name: name,}} animal('dog', 'Damon'); // Output: Object {type: "dog", name: "Damon"} Switching to an arrow function and attempting to implicitly return the object will result in errors as the engine is unable to tell if the curly braces belong to the object or the function block: const animal = (type, name) => { type: type, name: name }; animal('dog', 'Damon'); // Output: [SyntaxError] Unexpected token : To get around this we can tell the arrow function we are implicitly returning the object by wrapping the object in an additional set of parenthesis: const animal = (type, name) => ({ type: type, name: name }); animal('dog', 'Damon'); // Output: Object {type: "dog", name: "Damon"} As a side note, keys and values that share a name in ES6 can be written in shorthand as follows: const animal2 = (type, name) => ({ type, name }); animal2('dog', 'Damon'); // Output: Object {type: "dog", name: "Damon"} It’s beautiful! Context Let’s take a look at the way traditional functions handle context by binding an event listener to a button and logging on click: this var button = document.getElementById('contextButton'); button.addEventListener('click', function(){console.log(this);}); // Output on click: <button id="contextButton">...</button> In this example, the traditional function bound the value of to the element that the event listener is assigned to. this Consider the following example using an arrow function instead: const button = document.getElementById('contextButton'); button.addEventListener('click', () => {console.log(this);}); // Output on click: Window { ... } Here we illustrate how arrow functions make use of lexical binding to inherit the value of from the parent context. Since this code exists in the global scope, its parent (and the result of ) is the object. this this Window {} Nuances and Final Thoughts One final nuance to consider is that the object is not available to arrow functions. arguments In the following example, we make use of a traditional function to return an array of “argument values” using the object: arguments var test = function(a, b) {return arguments;} test(100, 200); // Output: [100, 200] Attempting the same thing using an arrow function results in errors: const test = (a, b) => arguments; test(100, 200); // Output: [Uncaught ReferenceError] arguments is not defined Finally, it is important to realise that even though arrow functions are beautiful, short and concise, they are not here to replace traditional functions. Their use of lexical binding means there are definite use cases where we should and should not be using arrow functions. Thanks for reading. If you liked this article please consider supporting future installations of this series by recommending it. 👏 Click here to view Part III: Understanding standard, embedded, multiline and tagged template literals.
