Understanding Javascript Normal Function VS Arrow Function

#javascript #frontend #webdev #programming

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

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();

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');

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());

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