Regular function vs Arrow function in JavaScript

Introduction

JavaScript is a flexible programming language, and one of its advantages is its capability to handle functions in various ways. Regular functions and Arrow functions are the two main function definitions used in JavaScript. In this article, we will see the difference between the Regular and Arrow functions in Javascript.

Regular functions in JavaScript

The function keyword is used to define Regular functions, followed by the function name and a list of parameters enclosed in brackets. Curly braces are then used to surround a functional body.

function myFunction(a,b) {
  return a * b;
}

Arrow function in JavaScript

As a simplified syntax for defining functions, Arrow functions were introduced in ECMAScript 6. They can have an enclosed argument list and are defined using the => syntax. The function body is then encased in curly braces if there are many statements, or it can be a single expression that is implicitly returned.

let data = (a, b) => a * b;

Difference between the Regular function and Arrow function in JavaScript

1. this keyword in JavaScript

In Regular function Depending on how the function is called, Regular functions have their own this value. It is referred to as the object to which the method belongs when a function is invoked as a method of an object. In strict mode or the global object, respectively, is referred to when a function is invoked as a Regular function. Regular functions can also access the arguments object, which lists the arguments given to the function and is available to them.

const ishi = {
    year: 1999,
    Age: function () {
        console.log(this);
        console.log(2037 - this.year);
    },
    
};
ishi.Age();

Output

On the other side, In Arrow functions don't have their own this binding. Instead, the context in which the arrow function is declared determines this value. An Arrow function will take on the enclosing scope's this value when it is defined within the scope of an object. For instance, regardless of how the Arrow function is invoked, if it is defined within a method of an object, it will refer to the object on which the method was called.

const ishi = {
    year: 1999,
    Age: function () {
        console.log(this);
        console.log(2037 - this.year);
    },
    greet: () => {
        console.log(this);
        console.log(`Hey ${this.year}`);
    },
};
ishi.Age();
ishi.greet();

Output

2. arguments object in JavaScript

Arrow functions as well as Regular functions. Both kinds of functions have the ability to take parameters, and the arguments object can be used to access the arguments provided to the function. But when it comes to the argument object, there is one significant distinction between Arrow and Regular functions. 

The arguments object for Arrow functions is not unique. They instead inherit the argument object from their parent function. When the function is invoked with three parameters, the arguments object is recorded to the console in the Regular function.

const reg = function (a, b) {
    console.log(arguments);
    return a + b;
  };
  reg(2, 4);
  reg(2, 5, 9, 17);

Output

An error is raised in Arrow functions because parameters are not defined in the arrow function's scope.

  var reg = (a, b) => {
    console.log(arguments);
    return a + b;
  };
  reg(2, 5);
  reg(2, 5, 8);

Output

 Arrow functions do not have their own arguments object, whereas Regular functions have. You can use the arguments object of the parent function to get at the arguments supplied to an Arrow function if necessary. A different option is to save the arguments in an array using the rest parameter syntax (...args).

3. new keyword in JavaScript

When you use the new keyword to create a Regular function, it turns into a constructor function, allowing you to use the new operator to create new objects.

function myFun(){
    console.log("ISHIKA");
}
const obj = new myFun();

Output

The new keyword cannot be used with Arrow functions as constructor functions.

let myFun = () => {
    console.log("ISHIKA");
 }
 const obj = new myFun();

Output

FAQs

Q1. What is a regular function in JavaScript?

Ans. A regular function in JavaScript is defined using the function keyword, which can take in arguments, perform operations on those arguments, and return a value. Regular functions can also have their local variables and can be used as methods on objects.

Q2. What is an arrow function in JavaScript?

Ans. An arrow function in JavaScript is a function defined using the => syntax. Arrow functions are a shorthand way of writing and are often used in functional programming. Unlike regular functions, arrow functions do not have this value and cannot be used as methods on objects.

Q3. What are the main differences between regular functions and arrow functions in JavaScript?

Ans. The main differences between regular functions and arrow functions in JavaScript are:

• Arrow functions do not have their own this value, whereas regular functions do.
• Arrow functions cannot be used as constructors, whereas regular functions can.
• Arrow functions do not have their own arguments object, whereas regular functions do.
• Arrow functions are more concise and can be written in a single line, whereas regular functions require the function keyword, curly braces, and a return statement.

Q4. When should I use a regular function in JavaScript?

Ans. You should use a regular function in JavaScript when you need to use this keyword, create a constructor function, or need to access the arguments object.

Q5. When should I use an arrow function in JavaScript?

Ans. It would be best to use an arrow function in JavaScript when you need a concise way to write a function; you do not need to use this keyword and do not need to create a constructor function.

Q6. Can I convert a regular function to an arrow function and vice versa?

Ans. Yes, you can convert a regular function to an arrow function and vice versa. However, you need to be aware of the differences between the two and ensure that the conversion does not affect the behavior of your code.

Conclusion

In this article, we covered the major difference between the Regular and Arrow functions in JavaScript. Compared to arrowFunction, regularFunction has access to its own arguments object. Additionally, this keyword of an arrow function is lexically scoped to the surrounding context, as opposed to this keyword of a conventional function, which is dynamically scoped based on how it is invoked.

If you have any queries/suggestions on the article, please leave your questions and thoughts in the comment section below. Follow C# Corner to learn more new and amazing things about JavaScript or to explore more technologies.

Thanks for reading, and I hope you like it.