In this article we'll cover arrow functions in simple understanding and examples. Many beginner faces problem with arrow functions and if you are one of those then you do not have to anymore!
Let's first understand what is arrow functions and why were they introduced at all.
What is an arrow function and why use it?
Arrow function was introduced in ES6 as alternative to normal traditional function with some variations. Simply put together arrow functions are mostly like your normal function, with just simplification in syntax. But it does not mean that they behave exactly same. In other words they are similar but not same, we will discuss more about it in this article later. We use arrow functions for the sake of simplicity in syntax.
Writing arrow function
We make a normal function like this:
function sum(a,b){
return a + b
}
Arrow function of the above traditional functions:
const sum = (a,b) => a + b
Understanding simplicity of arrow function syntax
Below given all syntax are valid
// traditional anonymous function
(function (a) {
return a * 2
});
// making arrow function from above function
// remove function keyword, add arrow after param
(a) => {
return a * 2
}
// making it more simpler
// remove return keyword (implicit return here)
(a) => a * 2
// if there is only one param, we can remove the parentheses
a => a * 2
As you can see how simpler the syntax of arrow function is compare to traditional function.
Understanding implicit and explicit return
In arrow function there is this implicit and explicit return concept understanding this will make you write good arrow functions. Implicit return is where the function automatically return output. Whereas explicit return where you specifically write return keyword.
// explicit return
// {} curly braces require return keyword
a => { return a * 2 }
// implicit return
// absence of {} curly braces automatically return output
a => a * 2
Required parentheses
Rest parameters, default parameters, and destructuring within params are supported, and always require parentheses:
(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression
Syntax
Now look at these syntax, they are most common arrow function syntax you will come across with:
() => expression
param => expression
(param) => expression
(param1, paramN) => expression
() => {
statements
}
param => {
statements
}
(param1, paramN) => {
statements
}
Also understanding statements and expression in arrow function context
An expression evaluate to a single value whereas statement perform an action and does not as a whole, return a value.
Arrow functions have two forms:
1. Expression body
2. Statement body
Function with Expression:
const add = (a, b) => a + b;
Here:
a + b → expression
Arrow functions automatically return it.
Equivalent to:
const add = (a, b) => {
return a + b;
}
Arrow Function with Statements:
const add = (a, b) => {
const sum = a + b;
return sum;
};
Inside {} you can write multiple statements.
Special Case (Very Important)
Returning objects.
Wrong:
const user = () => {name: "Alex"}
JS thinks {} is statement block.
Correct:
const user = () => ({name: "Alex"})
Parentheses force expression.
Difference between arrow function and normal function
Now we'll understand the difference between arrow function and normal function. These differences exist because arrow function were introduced with deliberate limitations in usage. These are:
Arrow functions don't have their own bindings to this, arguments, or super, and should not be used as methods.
Arrow functions cannot be used as constructors. Calling them with new throws a TypeError. They also don't have access to the new.target keyword.
Arrow functions cannot use yield within their body and cannot be created as generator functions.
Before getting confused over their limitations let's slowing learn each one with simple understanding.
Between normal function and arrow function the most important difference is of 'this' keyword.
- Arrow functions DO NOT HAVE THEIR OWN
this. They inherit this from surrounding scope.
This is called:
Lexical this
Normal function and 'this' keyword:
const obj = {
name: "Alexa",
show: function() {
console.log(this.name);
}
};
obj.show();
// output: "Alexa"
Arrow function and 'this' keyword:
const obj = {
name: "Alexa",
show: () => {
console.log(this.name);
}
};
obj.show();
// output: undefined
Because arrow function does not bind this. It takes this from outer scope.
2. Arrow Functions do not have their arguments they inherit it from their parent.
Normal function and argument:
function test(){
console.log(arguments)
}
// works
Arrow function and argument:
const test = () => {
console.log(arguments);
}
// does not work
//only works if a parent function has arguments.
3. Arrow Functions Cannot Be Constructors
Normal function:
function Person(name){
this.name = name;
}
const p = new Person("Alex");
Works.
Arrow function:
const Person = (name) => {
this.name = name;
}
new Person("Alex");
Error
Person is not a constructor
4. Arrow Functions Do NOT Have prototype
Normal function:
function test(){}
console.log(test.prototype);
Exists.
Arrow function:
const test = () => {};
console.log(test.prototype);
undefined
5. Arrow Functions Cannot Use super or new.target
Arrow functions still create an execution context but they do not create their own this, arguments, super, or new.target. Remember that : 4 No's of Arrow Functions
Arrow functions do not have their own:
this
arguments
prototype
super
new.target
They borrow from parent scope.
6. Arrow functions also cannot be generators:
const test = *() => {} // invalid
Generators require normal functions.
Conclusion
Arrow functions were introduced in ES6 as a shorter way to write functions in JavaScript. They allow cleaner syntax and support both implicit and explicit return. Unlike normal functions, arrow functions do not create their own this or arguments; instead they inherit them from the surrounding scope (lexical binding). They also cannot be used as constructors and do not have a prototype. Arrow functions are best used for short functions and callbacks, but normal functions are usually better for object methods and constructors.
