This content originally appeared on DEV Community and was authored by stellagress
4 differences between regular functions and arrow functions:
1. Syntax
Regular function:
function multiply(num1, num2) {
return num1 * num2;
}
Arrow function:
const multiply = (a,b) => a * b;
Note some differences in the syntax – Arrow functions are:
- Defined with ‘=>’
- No function keyword
- do not always need {}
- Implicit ‘return’ keyword
*If only one parameter, the parenthesis is not needed
2. Hoisting
Regular function:
sayHello();
//=> Hello!
function sayHello() {
console.log(“Hello!”);
}
Arrow function:
sayHello();
//=> sayHello is not defined
const sayHello = () => console.log("Hello!");
In this case, calling the respective function prior to defining them only worked for the first example due to hoisting. As noted here, functions expressions (arrow functions) are not hoisted, meaning that you can only call the function after it has been declared.
3. Callback functions / anonymous syntax
Regular function:
function squareNum(num) {
return num * num;
}
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(squareNum);
console.log(squaredNumbers);
//=> [1, 4, 9, 16, 25]
Arrow function:
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers);
//=> [1, 4, 9, 16, 25]
4. Lexical scope ‘this’
Regular function:
const person = {
name: Alice,
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
},
};
person.sayHello();
//=> Hello, my name is Alice
Arrow function:
const person = {
name: Alice,
sayHelloArrow: () => {
console.log(`Hello, my name is ${this.name}`);
}
}
person.sayHelloArrow();
//=> Hello, my name is undefined
As observed, only in the first example the keyword ‘this’ was able to access the person object through the ‘name’ property (//=>‘Alice’). The same does not happen with arrow functions, since the arrow function does not have its own ‘this’ value, inheriting ‘this’ from the enclosing lexical scope, in this case is the global object which does not contain a ‘name’ property; therefore, returning ‘undefined’.
Conclusion:
Those are some differences and in most cases the benefits of arrow functions involve – 1- Allow us to write a shorter function syntax. 2- Avoid issues with hoisting. 3- Make it easier to write concise and reusable callback functions, especially for array operations. In the other hand, 4- arrow functions can be tricky to use when having the keyword ‘this’, therefore, is important to ensure that the ‘this’ value is correctly bounding to the object that the method is called on.
This content originally appeared on DEV Community and was authored by stellagress
stellagress | Sciencx (2023-05-11T01:43:13+00:00) Arrow functions – JavaScript. Retrieved from https://www.scien.cx/2023/05/11/arrow-functions-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.