Table of Contents
Prior to ES6, the main way to define functions was by using the function keyword in this way: function, followed by name, followed by parentheses () and the code to be executed, which is placed inside curly brackets: {}.
Read more here about Functions in JavaScript.
For example, a function that calculates the perimeter of a rectangle can be written using the function keyword as below:
function getPerimeter(length, width) {
let perimeter;
perimeter = 2*(length + width);
return perimeter;
}
console.log(getPerimeter(8, 10)); //36
What is the new Arrow function syntax?
ES6 came along with a more simplistic way of defining functions, namely: the arrow function syntax.
The arrow function syntax is a shorthand way of writing functions.
Instead of requiring the function keyword every time we want to define a function, arrow functions can simply be defined using parentheses followed by an arrow and then brackets with the function body.
So we can rewrite the above function using the Arrow syntax:
Functions defined using Arrow syntax are not hoisted
Careful!
With the arrow syntax, we’re forced to define a function using the var, let, or const keywords.
For this reason, the functions defined using Arrow syntax are not hoisted like functions defined using the function keyword.
This means that we can’t use them until after they’re defined in the code.
Hoisting is JavaScript’s default behavior of moving declarations to the top.
Therefore, a variable can be used before it has been declared.
Arrow functions can be even shorter in some specific cases
For example, if the function we defined has only one argument, we can drop the parentheses around that argument.
Remember
We need the parentheses if we have two or more arguments or if the function has zero arguments.
In the case of the body of the function having only one statement, we can drop the brackets surrounding the function body and also the return keyword.
In this case, the value of the single statement is automatically returned from the function.
These syntax improvements increase the code readability and also reduce the amount of code that we have to type.
Be careful
If the function body has only one statement and we’re returning an object, we have to wrap the object that we’re returning in parentheses to tell JavaScript that we’re returning an object instead of defining a function body.
Handling of this in Arrow functions
The behavior of this keyword is different in arrow and regular functions.
In a regular function, this keyword belongs to the function’s parent or the object on which the function was invoked.
For example,
let myObj1 = {
name: "Webpedia",
logName: function () {
console.log(this.name);
}
};
myObj1.logName(); // Webpedia
On the other hand, arrow functions do not bind their own this!
Instead, they inherit the one from the parent scope, which is called “lexical scoping“.
No matter how or where being executed, this value inside of an arrow function always equals this value from the outer function.
let myObj2 = {
name: "Webpedia",
logName: () => {
console.log(this.name);
}
};
myObj2.logName(); // undefined
Arrow function expressions are best suited for non-method functions
When a class or object’s methods are defined as arrow functions, the this keyword won’t have any properties.
For this reason, it is better to use the old function syntax for the object’s methods.
When you should use the Arrow functions?
Arrow functions are best to use when we need this to be bound to the context, and not the function itself.
Therefore, arrow functions are better suited for callbacks or array built-in methods such as map() or filter() when the arrow function provides better scoping than the original function keyword.
let numbers = [3, 5, 7, 9, 11]; let double = numbers.map(v => v * 2); console.log(double); // [6, 10, 14, 18, 22]
Conclusion
The arrow functions are good to use when defining normal functions outside of objects and classes, while the function keyword is better to use inside objects and classes.
Hello there!
I hope you find this post useful!I'm Mihai, a programmer and online marketing specialist, very passionate about everything that means online marketing, focused on eCommerce.
If you have a collaboration proposal or need helps with your projects feel free to contact me. I will always be glad to help you!
