Difference between Regular functions and Arrow functions

Regular functions and arrow functions are two common ways to define functions in JavaScript, each with distinct behaviors. Regular functions offer traditional syntax and this context handling, while arrow functions provide a concise syntax and lexical this binding, making them ideal for callbacks and simpler expressions.

Regular function

Regular functions in JavaScript are defined using the function keyword and can be named or anonymous. They have their own this context, which varies depending on how they're called, and they also have access to the arguments object for handling passed parameters.

Syntax

let x = function function_name(parameters){
   // body of the function
};

Example: In this example, the regular function greet is defined using the function keyword. It takes a parameter name and logs a greeting message to the console when called.

// Defining a regular function
function greet(name) {
    console.log('Hello, ' + name + '!');
}

// Calling the function
greet('Geek'); 

Hello, Geek!

1. Access arguments with Regular functions

In regular functions, you can access all passed arguments using the arguments object, which is an array-like object containing each argument passed to the function.

Example: Regular functions use the arguments object to access all passed arguments, like an array.

function showArgs() {
    console.log(arguments);
}
showArgs(1, 2, 3); 

[Arguments] { '0': 1, '1': 2, '2': 3 }

2. Duplicate named parameters in Regular functions

In regular functions, duplicate named parameters are allowed but not recommended. The last occurrence of the parameter overwrites previous ones, and only its value is used.

Example: The function allows duplicate parameters in non-strict mode; the last a overwrites the first

function example(a, b, a) {
	console.log(a, b);
}
example(1, 2, 3);

3 2

3. Hosting in Regular functions

In regular functions, function declarations are hoisted to the top of their scope, allowing them to be called before they're defined in the code.

Example: The function greet is hoisted, allowing it to be called before its declaration.

greet(); // Output: Hello Geeks!

function greet() {
    console.log('Hello Geeks!');
}

Hello Geeks!

4. Using this keyword in Regular function

In regular functions, this refers to the object that calls the function (runtime binding). Its value can vary based on how the function is called (method, event, or global).

Example: In this regular function, this refers to the calling object obj. Output will be the name property.

const obj = {
    name: 'Geeks',
    greet: function() {
        console.log(this.name);
    }
};
obj.greet(); 

Geeks

5. Using new keyword in Regular function

Regular functions can be used as constructors with the new keyword, allowing the creation of new object instances. The new keyword sets this to the new object inside the function.

Example: The Person function is used as a constructor with new, creating a new object p with name set to Geeks.

function Person(name) {
    this.name = name;
}

const p = new Person('Geeks'); // Creates a new Person object
console.log(p.name); 

Geeks

Arrow function

Arrow functions in JavaScript are a concise way to define functions using the => syntax. They do not have their own this context, instead inheriting it from the surrounding scope. Arrow functions also lack their own arguments object and are ideal for shorter functions and callbacks.

 Syntax

let x = (parameters) => {
    // body of the function
};

Example: In this example, the arrow function greet is defined using the => syntax. It takes a parameter name and logs a greeting message to the console when called.

// Defining an arrow function
const greet = (name) => {
    console.log(`Hello, ${name}!`);
};

// Calling the function
greet('Geeks'); 

Hello, Geeks!

1. Access arguments with Arrow functions

Arrow functions do not have their own arguments object. To access arguments in arrow functions, use rest parameters (...args) to collect all arguments into an array.

Example: The arrow function showArgs uses rest parameters (...args) to capture all arguments into an array.

const showArgs = (...args) => {
    console.log(args);
};
showArgs(1, 2, 3); 

[ 1, 2, 3 ]

2. Duplicate named parameters in Arrow functions

Arrow functions do not allow duplicate named parameters, even in non-strict mode, and will throw a syntax error if duplicates are present. Always use unique parameter names in arrow functions.

Example: Arrow functions don't allow duplicate parameter names, even in non-strict mode. The code will throw a SyntaxError for duplicate parameters.

const example = (a, b, a) => {
    console.log(a);
}; 
// SyntaxError: Duplicate parameter name not allowed in this context

Output:

SyntaxError: Duplicate parameter name not allowed in this context

3. Hoisting in Arrow functions

Arrow functions are not hoisted like regular function declarations. They are treated as variables, so they cannot be called before being defined due to the temporal dead zone.

Example: Arrow functions are not hoisted like regular functions. Calling greet before its declaration results in a ReferenceError due to the temporal dead zone.

greet(); // ReferenceError: Cannot access 'greet' before initialization

const greet = () => {
    console.log('Hello!');
};

Output:

ReferenceError: Cannot access 'greet' before initialization

4. Using this keyword with Arrow function

In arrow functions, this is lexically inherited from the surrounding scope, not the function itself. It maintains the this value from where the arrow function is defined.

Example: Arrow functions inherit this from the outer scope, not the object itself, causing this.name to be undefined.

const obj = {
    name: 'Geeks',
    greet: () => {
        console.log(this.name);
    }
};
obj.greet(); // Output: undefined (inherited from outer scope)

undefined

5. Using new keyword in Arrow function

Arrow functions cannot be used as constructors and do not support the new keyword. Attempting to use new with an arrow function will result in a TypeError.

Example: Arrow functions cannot be used as constructors with new. Attempting to create an instance results in a TypeError.

const Person = () => {};
const p = new Person(); // TypeError: Person is not a constructor

Output:

TypeError: Person is not a constructor

Difference table of Regular functions and Arrow functions