#javascript #shorts #es6 #reactjs #angular
In JavaScript, a function is a block of code designed to perform a particular task. Functions allow programmers can break up a large program into multiple smaller, more manageable components using functions. As a result, there is no longer a need to write the same code repeatedly.
There are two types of functions in JavaScript
Regular Functions
Arrow Functions (Introduced in ES6)
Regular Functions
We can write the regular function in two ways, i.e Function declaration, and Function expression.
Regular JavaScript FunctionsThe main difference between Function declaration and Function expression is we can invoke the function add(2,3) before its declaration also, but the function sum(2,3) needs to invoke after it is defined.
Arrow Functions
The arrow function - also called the fat arrow function - is a new feature introduced in ES6 that is a more concise syntax for writing function expressions. It allows you to create functions more cleanly compared to regular functions. There is no declaration approach here, we can write by using Function expressions only.
Arrow FunctionsThere are certain differences between Arrow and Regular function, i.e
Syntax
No arguments (arguments are array-like objects)
No prototype object for the Arrow function
Cannot be invoked with a new keyword (Not a constructor function)
No own this (call, apply & bind won't work as expected)
It cannot be used as a Generator function
Duplicate-named parameters are not allowed
Let's discuss each one in detail
Syntax
Curly brackets aren't required if only one expression is present, and it will implicitly return this result from the function. which makes the code clearer.
Arrow Functions are syntactic sugar for Traditional functionsNo arguments (arguments are array-like objects)
In a traditional function, there is an arguments local variable. If the number of arguments to our function is unknown, we can get all the parameters as a single variable i.e arguments . The arguments object looks like this
arguments is an array-like object. The similarity between array-like objects and array objects is that they have a length property. The difference is that array-like objects do not have built-in methods on arrays, but we can use Array.from or spread operatorto convert an array-like object into an array object.
In the arrow function, there are no arguments, if we access arguments in the arrow function will throw an error like Uncaught ReferenceError: arguments is not defined.
But we can use rest parameters instead, which get a normal array object.
No prototype object for Arrow Functions
There is no prototype object for Arrow functions like regular functions, If you try to access the prototype of arrow functions, it will return undefined .
No Prototype object for Arrow functionsCannot be invoked with a new keyword
The arrow function cannot be invoked with the new keyword, because arrow functions don't have a constructor. If you try to instantiate with a new keyword it will throw an error.
No own this (call, apply & bind won't work as expected)
In a traditional function, its internal this value is dynamic, it depends on how the function is invoked. For example:
Unlike regular functions, arrow functions don't have their own this binding. If we access this in the arrow function it will return the this of the closest non-arrow parent function.
The value of thisin arrow function is determined at the time of declaration and never changes. So call, apply, bind cannot change the value of the arrow function this.
It cannot be used as a Generator function
According to MDN
The function* statement (function keyword followed by an asterisk) defines a generator function.
The yield keyword may not be used in an arrow function's body (except when permitted within functions further nested within it). As a consequence, arrow functions cannot be used as generators.
Note that generators without yield don't make sense.
Duplicate-named parameters are not allowed
In non-restrict mode, regular functions allow us to use duplicate named parameters. But in strict mode, it is not allowed.
Unlike regular functions, arrow functions do not allow duplicate parameters, whether in strict or non-strict mode. Duplicate parameters will cause a Syntax Error to be thrown.
Conclusion
In this article, I have discussed some significant differences between regular functions and arrow functions in JavaScript.
Understanding the differences between regular and arrow functions helps choose the right syntax for specific needs.
5 авг 2024
