Difference between regular functions and arrow functions
This article discusses the major differences between the regular functions and the arrow functions.
Arrow functions – a new feature introduced in ES6 – enable writing concise functions in JavaScript. While both regular and arrow functions work in a similar manner, yet there are certain interesting differences between them, as discussed below.
Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!
Syntax
Syntax of regular functions:-
let x = function function_name(parameters){ // body of the function}; |
Example of regular functions:-
let square = function(x){ return (x*x);};console.log(square(9)); |
Output:
The syntax of arrow functions:-
let x = (parameters) => { // body of the function}; |
Example of arrow functions:-
var square = (x) => { return (x*x);};console.log(square(9)); |
Output:
Use of this keyword
Unlike regular functions, arrow functions do not have their own this.
For example:-
let user = { name: "GFG", gfg1:() => { console.log("hello " + this.name); // no 'this' binding here }, gfg2(){ console.log("Welcome to " + this.name); // 'this' binding works here } };user.gfg1();user.gfg2(); |
Output:
Availability of arguments objects
Arguments objects are not available in arrow functions, but are available in regular functions.
Example using regular ():-
let user = { show(){ console.log(arguments); }};user.show(1, 2, 3); |
Output:
Example using arrow ():-
let user = { show_ar : () => { console.log(...arguments); }};user.show_ar(1, 2, 3); |
Output:
Using new keyword
Regular functions created using function declarations or expressions are ‘constructible’ and ‘callable’. Since regular functions are constructible, they can be called using the ‘new’ keyword. However, the arrow functions are only ‘callable’ and not constructible. Thus, we will get a run-time error on trying to construct a non-constructible arrow functions using the new keyword.
Example using regular function:-
let x = function(){ console.log(arguments);};new x =(1,2,3); |
Output:
Example using arrow function:-
let x = ()=> { console.log(arguments);};new x(1,2,3); |
Output:
For more information on arrow functions, refer this link.
