Arrow Functions Explained | JavaScript Basics

We have already discussed about the latest standard of JavaScript which is ES6. Let and const was one of the most needed addition. If you have not already, you can read it here. Let us move on to another important concept in ES6 known as arrow functions.

Functions in JavaScript

If you are familiar with programming, you must know what a function does. Anyways, functions are nothing but a piece of code assigned to do a particular task that can be called multiple times. In JavaScript, you can create a function in multiple ways. The usual method of declaring a function is as follows:

function info(name, age, readsGeekyMinds) {
  console.log("Name : "+name);
  console.log("Age : "+age);
  console.log("Reader : "+readsGeekyMinds);
}

info('John Doe', 20, true);

Here info() is the name of the function and ‘name’, ‘age’ and ‘readsGeekyMinds’ are parameters having values of string, integer and boolean type respectively.

Alternatively, you may also re-write the same method as –

const info = function(name, age, readsGeekyMinds){
  console.log("Name : "+name);
  console.log("Age : "+age);
  console.log("Reader : "+readsGeekyMinds);
} 

info('John Doe', '20', true);

Here, we are storing an anonymous function to the constant. Anonymous functions are those which are declared dynamically and are declared using the function operator. The above works the same way as the usual method. However, there is another newer method known as the arrow function.

Understanding Arrow Functions

Arrow functions are a more compact way to write our usual JavaScript functions. Let us look at the syntax before diving into some examples.

//Multiple parameters
(parameter_1, parameter_2, ..., parameter_n) => { statements }  

//Single Parameter
parameter => { statements }

//No Parameter
() => { statements }

Now, you may wonder why do we use arrow functions in the first place? The reason is arrow functions add a so called ‘lexical’ this, which directly addresses scoping issues that programmers often faced with the this keyword. You may find this concept a bit difficult to understand. No worries, you can read more about it here in this article by Academind.

Examples

Multiple Parameters

Now that we know the syntax, let us redo the info() as we were doing till now.

const info = (name, age, readsGeekyMinds) => {
  console.log("Name : "+name);
  console.log("Age : "+age);
  console.log("Reader : "+readsGeekyMinds);
} 

info('John Doe', '20', true);

If you are looking at arrow functions for the first time, this may confuse you. Let us look at the simplest example, which is, the sum of two numbers.

const add = (a, b) => { return a + b; }

console.log(add(10,20));

Now, since we have only one statement inside the function we can easily re-write it as follows:

const add = (a, b) => a + b;

console.log(add(10,20));
Single Parameter

For a function having only one parameter, we can remove the parenthesis in the parameter list as shown below.

const greet = name => 'Hello, ' + name;

console.log(greet('John Doe'));
No Parameter

If we have a function where we do not need to pass a parameter, we have to specify an empty parenthesis in place of the parameter list.

const greet = () => 'Welcome to GeekyMinds!';

console.log(greet());

We hope you found this article helpful. Don’t forget to post your queries, doubts in the Disqus thread below. We will be more than glad to help! 😎