Difference between Normal Function and Arrow Function?

Question

Accepted Answer

Normal functions are defined using the function keyword, while arrow functions are defined using the => syntax.

Normal functions are hoisted, while arrow functions are not.
Arrow functions do not have their own 'this' keyword, they inherit it from the parent scope.
Arrow functions are more concise and have implicit return.
Arrow functions cannot be used as constructors.
Arrow functions are not suitable for methods within objects due to the lack of their own 'this'.

Accepted Answer

The primary difference between a normal function (also known as a traditional function or function declaration) and an arrow function is the way they handle the "this" keyword and their syntax.

1. "this" Binding:

- Normal Function: In a normal function, the value of the "this" keyword is determined by how the function is called. It can vary depending on the context in which the function is invoked.

- Arrow Function: In an arrow function, the "this" keyword is lexically scoped, which means it retains the value of "this" from its surrounding code (the enclosing context).

2. Syntax:

- Normal Function: Typically defined with the "function" keyword, followed by a function name and parameters. It has a block of code inside curly braces.

- Arrow Function: Defined using a concise syntax, with parameters and an arrow (=>) followed by an expression or statement. It does not have curly braces if it consists of a single statement.

3. Arguments Object:

- Normal Function: Has access to the special "arguments" object, which contains all the arguments passed to the function.

- Arrow Function: Does not have its own "arguments" object. If you need access to function arguments in an arrow function, you would use the rest parameters syntax.

4. Constructor:

- Normal Function: Can be used as a constructor to create objects using the "new" keyword.

- Arrow Function: Cannot be used as a constructor because it does not have its own "this" binding.

5. No Binding of "this":

- Normal Function: Requires explicit binding of "this" using methods like bind(), call(), or apply().

- Arrow Function: Automatically captures the surrounding lexical "this" value, making explicit binding unnecessary.

6. Function Name:

- Normal Function: Has a named function, which can be useful for debugging and self-reference.

- Arrow Function: Usually an anonymous function. It can be assigned to a variable if a reference is needed.

7. Return:

- Normal Function: If the function consists of a single expression, it can omit the "return" keyword. If it contains multiple statements, you need to use "return" explicitly.

- Arrow Function: Automatically returns the value of a single expression without needing the "return" keyword. For multiple statements, you can use curly braces and the "return" keyword.

These are some key differences between normal functions and arrow functions. The choice between them depends on the specific use case and your requirements for "this" binding, syntax, and other functionality.

Difference between Normal Function and Arrow Function?

Top TCS Angular Developer interview questions & answers

Popular interview questions of Angular Developer

Top HR questions asked in TCS Angular Developer