Functions are the bread and butter of JavaScript programming.
JavaScript functions can be defined in many ways. One can use the right syntax for specific needs by understanding the differences.
One of the usual way of defining a function is by using function keyword.
// Function declaration
function double(x){
return x*2;
}
// Function expression
const double = function(x){
return x*2;
}
In this blog, I will refer to these types as regular functions.
A second way of defining a function, introduced in ES2015, is the arrow function syntax.
const double = (x) => x*2
In this blog, I will discuss some main differences between regular functions and arrow functions.
1. this value
1.1 regular function
Inside a regular function, this value (i.e. the context of execution) is dynamic, depends on how the function is invoked.
During simple invocation, the value of this is equal to the global object.
function demo(){
console.log(this)
}
demo(); // logs global window object
During method invocation, the value of this is equal to the object owning it.
const myDemo = {
greet(){
console.log(this);
}
}
myDemo.greet(); // logs myDemo Object
During constructor invocation, the value of this refers to the newly created instance.
function Demo() {
console.log(this);
}
new Demo(); // logs an instance of Demo
1.2 Arrow function
The value of this in case of arrow function is considerably different from that of regular function. Arrow function doesn't define it's own context of execution.
The value of this inside an arrow function is the same as that of it's outer function. In other words, arrow function resolve the value of this lexically and this behavior is independent of how and where the function is executed.
const myDemo = {
greet(){
console.log(this); // logs myDemo Object
const inner = () => {
console.log(this); // logs myDemo Object
}
inner();
}
}
myDemo.greet();
This great feature of arrow function make sure that when you use arrow function as callbacks, it doesn't define it's own execution context.
2. Constructors
2.1 regular function
function Meal(name){
this.name = name;
}
const oatMeal= new Meal("oats");
console.log(oatMeal instanceOf Meal) // logs true
Meal is a regular function, when invoked with new keyword create an instance of type Meal.
2.2 Arrow function
Arrow function cannot be used as a constructor. If you try to invoke an arrow function prefixed with new keyword, JavaScript throws an error:
const Meal = (name) => {
this.name = name;
}
const oatMeal= new Meal("oats"); // error : Meal is not a constructor
Invoking new Meal('oats'), where Meal is an arrow function, throws TypeError: Meal is not a constructor.
3. Implicit return
3.1 regular function
return expression statement returns the result from a function:
function demo() {
return 100;
}
demo(); // return 100
If the return is missing or there is no statement after return, then regular function implicitly return undefined.
3.2 Arrow function
Arrow functions return values the same way as regular functions, but with one useful exception.
You can implicitly return an expression from the arrow function if its curly braces are omitted. These are the inline arrows function.
const increment = (num) => num + 1;
increment(401); // 402
num + 1 is the only expression in increment() arrow. The arrow function implicitly returns this expression without the use of the return keyword.
Regular and arrow functions differ in important ways that allow you to choose the right syntax based on your needs.
What other differences do you know between arrow functions and regular functions ?
This article is published w/ Scattr ↗️
Top comments (3)
wow, cross-posted with scattr
Great 🤞🤞
Nice article Mohit 👏, Keep it up
🙏🏻 Thank you for Publishing with Scattr.io
Thanks Salman
you done a great job with Scattr