Arrow Functions vs Regular Functions in Modern JavaScript

Explore the differences between arrow functions and regular functions in modern JavaScript with easy code examples and outputs, enhancing your coding expertise.

JavaScript is a language that's constantly evolving. Since the introduction of ES6, or ECMAScript 2015, arrow functions have become a staple for developers, offering a more concise syntax compared to regular functions. In this post, we're going to delve into the key differences between arrow functions and regular functions, showcasing each distinction with simple code examples for better understanding.

Syntax

🔗

The most evident difference is the syntax. Arrow functions are defined using the arrow notation (=>), while regular functions use the function keyword.

Regular Function Syntax:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Alice")); // Output: Hello, Alice!

Arrow Function Syntax:

const greet = (name) => `Hello, ${name}!`;

console.log(greet("Bob")); // Output: Hello, Bob!

this Keyword Binding

🔗

In regular functions, the this keyword is dynamic. Its value depends on how the function is called. In contrast, arrow functions do not have their own this. Instead, they inherit this from the parent scope at the time they're defined.

Regular Function this:

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    this.age++;
    console.log(this.age); // `this` is not referring to the Person object
  }, 1000);
}

const p = new Person();

Arrow Function this:

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++;
    console.log(this.age); // `this` refers to the Person object because of lexical scoping
  }, 1000);
}

const p = new Person();

Arguments Binding

🔗

Regular functions have their own arguments object, which is an array-like object that contains the values of the arguments passed to the function. Arrow functions, however, do not have an arguments object.

Regular Function Arguments:

function showArguments() {
  console.log(arguments[0]); // Output: "First argument"
}

showArguments("First argument", "Second argument");

Arrow Function Arguments:

const showArguments = () => {
  console.log(arguments[0]); // Uncaught ReferenceError: arguments is not defined
};

showArguments("First argument", "Second argument");

Constructor Use

🔗

Regular functions can be used as constructors, meaning they can be called with new to create new object instances. Arrow functions, however, cannot be used as constructors and will throw an error if used with new.

Regular Function Constructor:

function Car(make, model) {
  this.make = make;
  this.model = model;
}

const myCar = new Car("Toyota", "Corolla");
console.log(myCar); // Output: Car { make: 'Toyota', model: 'Corolla' }

Arrow Function Constructor:

const Car = (make, model) => {
  this.make = make; // TypeError: Car is not a constructor
  this.model = model;
};

const myCar = new Car("Toyota", "Corolla"); // This will throw an error

Implicit Return

🔗

Arrow functions allow for an implicit return when there's no block {}. If the function body consists of only a single expression, you can omit the return keyword and the curly braces.

Regular Function Implicit Return:

function add(a, b) {
  return a + b;
}

console.log(add(1, 2)); // Output: 3

Arrow Function Implicit Return:

const add = (a, b) => a + b;

console.log(add(3, 4)); // Output: 7

Explicit return for multi-line

🔗

For multi-line arrow functions, the return statement has to be explicit, and you must use curly braces.

Multi-line Arrow Function:

const multiply = (a, b) => {
  let result = a * b;
  return result;
};

console.log(multiply(5, 6)); // Output: 30

No Duplicate Named Parameters

🔗

Regular functions allow duplicate named parameters in non-strict mode while arrow functions always disallow duplicate named parameters.

Regular Function Duplicate Named Parameters:

function add(a, a) {
  return a + a; // Works only in non-strict mode and is considered bad practice
}

console.log(add(1, 2)); // Output: 4 or an error in strict mode

Arrow Function Duplicate Named Parameters:

const add = (a, a) => a + a; // SyntaxError: Duplicate parameter name not allowed in this context

Conclusion

🔗

Arrow functions in JavaScript provide a more concise and modern way to write functions, especially when dealing with the this keyword and requiring implicit returns. However, when it comes to using functions as object constructors or when you need to access the arguments object, regular functions still hold their place. Understanding these differences will allow you to use both types of functions effectively in your code. Whether you choose an arrow function or a regular function, consider the context of the use case to make the best decision for your project.