Basics🤓

Let’s talk about some basics before getting into some new concept arrow function. There are two popular way of defining the function in javascript and you must know about this before getting into arrow function.

// Function 1 : Function with one statement
function sum(num1, num2) {
  return num1 + num2;
}

// Function 2 : Function with one statement
var add = function (num1, num2) {
  return num1 + num2;
};

The above example is simple and it’s okay for most of you but there is a bit possibility that some of you might not know about the second way.

Both functions have some different behaviors and for those who don’t know let me tell you that.Function 1 is hoisted and Function 2isn’t. Hosting means you can call the function before defining and it will work.

The hoisting concept is also somewhere related to an arrow function, so you must know about that before getting into the arrow function.Checkout my blog on Hoisting

Introduction🤝

One of the most popular features introduced in ES6 is the arrow function (also known as the fat arrow function). It’s a concise way of defining function.

Arrow functions are one of the cool new features of ES6. Proper use of arrow functions makes the code shorter and easier to understand👌. So, in this article, I will help you better understand the arrow function in JavaScript, as well as know how to use it and what to keep in mind when using it.🤗

What is the arrow function in JavaScript?

An arrow function is a function that was introduced in ES6 or ECMAScript 2015.

• It was introduced in ES6 or ECMAScript 2015.
• It allows you to write normal or user-defined functions in JavaScript in a concise way.
• It has a shorter syntax compared to normal or regular functions in JavaScript.

Writing first arrow function😃

Let’s write our first arrow function and run it. There is two way of writing arrow function and both have a different use case.

// Function 3 : Arrow Function are mostly written like this
var print = () => {
  console.log("My name is print");
};

// Function 4 : Arrow function can also be written like this
var printing = () => console.log("My name is printing");

The arrow function can’t be hoisted, which means you need to define it before using it.

What is the difference between Arrow Functions and Regular Functions?😲

1. Syntax

One very basic difference is that the Regular Functions uses function keyword but Arrow Functions don’t in spite it uses arrow symbol(=>).

2. this keyword

Regular function have its own this context, but the Arrow function doesn’t have its own. Inside an Arrow function, this value holds the this value of an outer function.

let user = { 
     userName: "Sami", 
     greetMessage1:() => { 
         console.log("Hello " + this.userName); // Output: Hello undefined
     }, 
     greetMessage2(){        
         console.log("Good Morning " + this.userName); // Output: Good Morning Sami 'this' binding works here
     }   
  }; 
 user.greetMessage1(); 
 user.greetMessage2();

In the above example, We can see the greetMessage1(Arrow Functions) doesn’t have its own this, But the greetMessage2(Regular Function) have it’s own this due to which we can see the userName value in the output.

Implicit return💫

While working with Regular functions return expression statement is used to return the result from the function. If the returns statement is not available inside the function then undefined is returned from the function. But with the Arrow function, there is one exception where the return is not mandatory to return result from the functions.

See the example below:

// With Regular functions
function sum(a, b) {
  return a+b;
}
sum(10,20); // Output: 30


// With Arrow functions
const sum = (a, b) =>a+b;
sum(10,20); //Output: 30

Conclusion💁‍♀️

Hopefully, this article helped you learn about JavaScript arrow functions, how they work and how to use them. In a recap, today you’ve learned about the basics of arrow functions and we saw the major differences between Arrow functions and Regular Functions.

Thanks!