JavaScript Crash Course; Arrow functions

Welcome to the JavaScript Crash course-Arrow functions. In this article, we will understand the basics of the new arrow function in ES6.

Important note: This post is the part of ES 6+ crash course / Modern JavaScript Refresher. Please click here to check other articles of the series.

The arrow functions were introduced in Java Script with ES 6, released in 2015. It is one of the most commonly used ES6 features in modern JS code.

What is an arrow function?

An arrow function expression is a compact alternative to a traditional function. Thus, it makes the function code very compact (small). However, arrow functions have some limitations and can not be used in all situations.

Let’s check some examples to understand arrow functions.

Traditional functions

You must be aware of traditional functions. However, let’s see an example of a traditional function as a quick recap.

// Traditional function
function square(a) {
    return a * a;
}

// calling a traditional function
console.log(square(2));

This is a simple function, we defined a function ‘square’ and called it. Output is very obvious ‘4’.

Function variable

You must also know we can assign an anonymous function to a variable. Just as a refresher, let’s write the above program in that way.

// Let's make an anonymous function and assign it to a variable.
let square = function(a) {
    return a * a;
}

// let's call the function
console.log(square(2));

This program is exactly the same as the previous example. The only difference, instead of defining a function, we made an anonymous function and assigned it to a variable. It will work exactly as above with the only difference being function scope. Now the function scope is the same as the variable scope.

Arrow function

Now let’s rewrite the above example with an arrow function:

// Let's make an arrow function and assign it to a variable.
let square = (a) => {
    return a * a;
}

// let's call the arrow function
console.log(square(2));

Now that syntax might start looking a little different. We actually removed the keyword ‘function’ and added an arrow (=>) after the function brackets.

This is the most basic form of arrow function.

One line arrow function

Our function in the above example is a one-liner function. The only line of function body just calculates and returns the value. In such a case, we can make it even shorter.

// Let's make an arrow function and assign it to a variable in one line.
let square = (a) => a * a;

// let's call the arrow function
console.log(square(2));

This makes our arrow function one-liner. In case our function body just has one line return statement, we can remove body parenthesis ({}) and the ‘return’ keyword.

One liner arrow function with a single parameter

If we notice, our function has only one parameter. In that special case, we do not even need to wrap it with parameter brackets.

// Single parameter do not need ()
let square = a => a * a;

// let's call the arrow function
console.log(square(2));

With these examples, I hope you can define and understand the arrow function in the code easily.

Next topic

In this article, we discussed the arrow functions. If you have any doubt, feel free to ask questions in the comments below or tweet your question by tagging @kapsnotes.

If you like this article, you may want to look next topic in the series for/of or different topics in the ES6+ crash course.