Brief Introduction
Arrow functions are like regular functions with a shorthand (=>) notation. There are a few key differences between both of them like binding of “this” construct, syntactical differences and absence of prototype property to name a few.
Arrow functions were introduced in ES6 (or ECMA 2015). ECMAScript (or ES for short) is a standard for scripting languages like JavaScript, Jscript, etc.
Why should I care?
- Context binding - Arrow syntax automatically binds “this” to the surrounding code’s context. This is useful in some scenarios where if use a regular function notation, then we would get unexpected results.
Let’s say we own an ice-cream parlor and we store ice-creams information in below fashion-
Why did we get “undefined” in the getOffers method? Because in a regular function, “this“ construct is binded to the object that invokes that function. Since setTimeout is a part of browser APIs, this refers to Timeout API and not to our “iceCream” object and hence we get undefined result.
Before ES6, there were some mechanisms through which we could bind “this” to the current context. Like as below-
Using arrow functions makes it easier to solve this problem.
This gives the expected result because “this” in arrow functions refers to the lexical scope, i.e., where the arrow function was defined and not who invoked it. - Less verbose- The syntax allows an implicit return when there is no body block, resulting in shorter and simpler code in some cases. Check for examples in following section.
Case I: No arguments/More than one argument with single statement in the body.
Let’s say a customer arrives at our Ice Cream Parlor. We greet him like below.
Here, we see with a single body statement, return keyword is implicit.
Case II: One argument with multiple statements in the body.
Let’s say customer has initiated a payment for his order and we’ll check whether payment succeeds or not.
Here we have omitted parenthesis enclosing the argument.
Limitations
- Defining methods on an object - Arrow functions cannot access object properties using “this” construct inside a method declared in the object because the arrow function binds the context lexically with the window object. Ex.
We should instead use regular functions to define methods and access properties.
- Using constructors - Arrow functions cannot be used as constructors. When we use “new” keyword to instantiate a function, it will create a new object and bind “this” with the object. But since arrow functions binds “this” with the enclosing context, it doesn’t make sense to use “new” keyword with them. JavaScript implicitly prevents from doing that by throwing an exception. Ex.
- No arguments object – Arrow functions don’t have “arguments” object unlike regular function expressions. Ex.
This will throw an error. We should use rest parameters here.
Regular functions v/s Arrow functions
|
|
Differences |
Regular functions |
Arrow functions |
|
1. |
Duplicate parameters |
Can have duplicate named
parameters in non-strict mode |
Cannot have duplicate
named parameters in both strict and non-strict mode |
|
2. |
“this” binding |
They have their own
“this” binding. Value of “this” depends on how function is invoked |
The value of “this” inside
an arrow function remains the same throughout the lifecycle of the function
and is always bound to the value of “this” in the closest non-arrow parent
function. |
|
3. |
“arguments” object |
Inside the body of a
regular function, “arguments” is a special array-like object containing the
list of arguments with which the function has been invoked. |
No “arguments” object is
defined inside an arrow function.
The “arguments” object
is resolved lexically: the arrow function accesses arguments from the closest
outer non-arrow function. |
|
4. |
“new” keyword |
Regular functions
created using function declarations or expressions are constructible (means
that we can use regular functions as constructors) and callable. And since
regular functions are constructible, they can be called using the “new”
keyword. |
The arrow functions are
only callable and not constructible, i.e. arrow functions can never be used
as constructor functions. Hence, they can never be called with the “new”
keyword. |
We have completed the 2-post series discussing what is an event loop, why should we care, and we have seen an example step by step on how it will be executed via event loop in the first post. In the second post we talked about what are arrow functions, why should we care, and some examples to illustrate their use. We have also seen what are its limitations and differences between arrow and regular functions. Understanding these topics can immensely help a developer with better understanding of JavaScript and in writing more efficient and cleaner code.
References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- https://medium.com/tfogo/advantages-and-pitfalls-of-arrow-functions-a16f0835799e
- https://www.interviewbit.com/problems/regular-vs-arrow-functions/
Please feel free to comment or share your views and thoughts. You can always reach out to us by sending an email at info@amlgolabs.com or filling a contact form at the end of the page.
Comments
Post a Comment