Getting to Grips with Arrow Functions

Arrow functions are undoubtedly one of the more popular features introduced in JavaScript ES6. For those who have no clue what ES6 is, it’s a new JavaScript implementation that brings new features, including the concept of arrow functions. This article will give you a quick introduction to arrow functions, their syntax, and a few pros and cons.

So, what are arrow functions?

Arrow functions are a more concise syntax for writing function expressions. They make our code much more concise, change the way ‘this’ binds in functions, and simplify function scoping. Arrow functions are very similar to Lambdas in other programming languages such as Python in the sense that they’re anonymous functions and have no function names. Moreover, by using arrow functions, we avoid using the ‘function’ keyword, the ‘return’ keyword, and curly brackets.

Basic syntax of arrow functions

The basic syntax of an arrow function is quite simple to understand. There’s a parentheses that takes arguments followed by an arrow (=>) and curly brackets. The body of the function goes within the curly brackets. Let’s take a look at the code below, showing the basic syntax of the JavaScript arrow function.

 
(argument1, argument2, ... argumentN) => {
            	//function body
}
// Following is an example with 2 parameters
var greetings = (firstName, lastName) => {
            	console.log("Hello", firstName, lastName)
}
// is equivalent to
function greetings(firstName, lastName){
            	console.log("Hello", firstName, lastName);
}
 

Next, let’s consider the syntax with no arguments. In this case, we just open and close the bracket with no arguments provided. Let’s take a look at the syntax below.

() => {
            	//function body
}
//Following is an example with no arguments
var noArguments = () =>{
            	greetings("Frederick", "Plange");
}
// is equivalent to
function noArguments(){
            	greetings("Frederick", "Plange");
}
 

With most of the common programming languages, we’ve gotten accustomed to having a parentheses each time we create a function. However, with arrow functions, when there is a single argument, you can remove the parentheses around the argument. Let’s consider the example below.

argument1 => {
            	argument1
}
//Following is an example with a single parameter
var year = theYear => {
            	console.log(theYear)
}
// is equivalent to
function year(theYear){
            	console.log(theYear);
}
 

If you’re wondering how what we’ve done is more concise than what you’re used to, here is where things get more concise. When the function body is a single expression, you can remove the curly brackets and put it inline. The result will be returned by the function. Hence, there’s no need for curly brackets, no need for the return statement, and no need for parentheses. For example:

var functionName = param1 => param1
 
//is equivalent to
 
function functionName(param1){
            	return param1;
}

Arrow functions can also be used to return an object literal expression. However, to do so the body needs to be wrapped in parentheses to distinguish between a block and an object.

function person(name, age){
            	return {
                            	name: name,
                            	age: age
            	}
}
//is equivalent to
 
var person = (name, age) => ({name: name, age: age})
 

Benefits of arrow functions

Shorter syntax

Consider the following regular JavaScript function. The function simply returns the sum of the parameters and prints it to the console.

function functionName(param1, param2){
            	return param1 + param2;
}

This same function can be expressed as an arrow function with just a single line of code. We are able to omit the curly brackets and the return statement.

var functionName = (param1, param2) => param1 + param2

No binding of ‘this’

In regular function expressions, the ‘this’ keyword is bound to different values based on the context in which it is called. With arrow functions, however, this is not the case. Arrow functions don’t bind a ‘this’; instead, it makes use of ‘this’ from the code in which the arrow function was created. In other words, you can use regular function expressions if you need a dynamic ‘this’ and arrow functions for a lexical ‘this’.

Drawbacks of arrow functions
Now we know the ‘this’ keyword works differently with arrow functions. In addition, it’s important to note that the methods apply(), bind() and call() will not change the value of ‘this’. If you would like to have a dynamic ‘this’, you’ll have to use regular function expressions. Therefore, arrow functions cannot be used for object methods.

Arrow functions cannot be used as constructors, as with regular functions. If you attempt to use the keyword ‘new’ to create an instance with an arrow function, it will throw an error. Moreover, arrow functions do not have a prototype property.

I hope this was an informative introduction to arrow functions.