DEV Community

Shuvo
Shuvo

Posted on

Understanding Javascript Normal Function VS Arrow Function

Sometimes in our code we use javascript regular functions and also a function called arrow function.Both are functions but there are certain difference between them.

1.First we see the syntactical difference between them.

//normal function
function normalFunc() {
  console.log('hi');
}

normalFunc(); //hi

//arrow function

let arrFunc = () => {
  console.log('i am arrow function');
};

arrFunc(); //i am arrow function
Enter fullscreen mode Exit fullscreen mode

2.Accessing the 'this' key word.
Arrow function doesn't have it's own this key world.It works something like lexical scoping.

But normal function always have its own this key word and it is the global this or window or the parent object where it has been declared.


let person = {
  name: 'Jhone',
  gfg1: () => {
    console.log('hello ' + this.name); // hello undefined
  },
  gfg2() {
    console.log('hi ' + this.name); // hi Jhone
  },
};
person.gfg1();
person.gfg2();
Enter fullscreen mode Exit fullscreen mode

3.In arrow function we can not access the arguments object but in normal function we can.

//normal function
function food(a, b, c) {
  console.log(arguments);
}

food('rice', 'milk', 'fish'); // {0: "rice", 1: "milk", 2: "fish"}


//arrow function
let fruits = (a, b, c) => {
  console.log(...arguments); //ReferenceError: arguments is not defined
};

fruits('apple', 'banana', 'berry');
Enter fullscreen mode Exit fullscreen mode

4.Using normal function to return something you have to use return statement but in arrow function you can use implicit return.

//normal function
function nFunc() {
  return 'i am normal function';
}
console.log(nFunc());

//arrow function
let arrFunc = () => 'i am arrow function';
console.log(arrFunc());
Enter fullscreen mode Exit fullscreen mode

5.Normal javascript functios are constructible but arrow funtions are not. You can not create constructor function usig arrow functon but with notmal functions you can.

  function nFunc(name, email) {
  this.name = name;
  this.email = email;

}

let preson = new nFunc('jony', 'jony@gmail.com');

console.log("name: ",preson.name,' ',"email: ",preson.email); // name: jony email: jony@gmail.com
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
kai_wenzel profile image
Kai Wenzel

Nice post Shuvo!