Read on Twitter
JavaScript Arrow FunctionsES6 arrow functions provide you with an alternative way to write a shorter syntax compared to the function expression.
for beginners#100daysofCode #javascript #webdev #CodeNewbie
So let's first see what is the difference in syntax.
Function expression:
function add (x,y) {
return x + y;
}
console.log(add(10,20)); // 30
Arrow function:
let add = (x,y) => x + y;
console.log(add(10,20)); // 30;
Function expression: function add (x,y) {
return x + y;
}
console.log(add(10,20)); // 30
Arrow function:let add = (x,y) => x + y;
console.log(add(10,20)); // 30;
Arrow function syntax is simple as it's most basic form but can be elaborated to suit your need:
let x = param => expression
Multiple parameters require parentheses. Multiline statements require body brackets and return:
let z = (x, y) => {
let a = 1;
return a + x + y;
}
let x = param => expression
Multiple parameters require parentheses. Multiline statements require body brackets and return:
let z = (x, y) => {
let a = 1;
return a + x + y;
}
Arrow functions also support advanced syntax:
Rest parameters:
(a, b, ...r) => expression
Default parameters:
(a=400, b=20, c) => expression
Destructuring within params:
([a, b] = [10, 20]) => a + b; // result is 30
({ a, b } = { a: 10, b: 20 }) => a + b; // result is 30
Rest parameters:
(a, b, ...r) => expression
Default parameters:
(a=400, b=20, c) => expression
Destructuring within params:
([a, b] = [10, 20]) => a + b; // result is 30
({ a, b } = { a: 10, b: 20 }) => a + b; // result is 30
For more info you can read:
https://www.javascripttutorial.net/es6/javascript-arrow-function/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/
Thanks for reading and have a great day!
https://www.javascripttutorial.net/es6/javascript-arrow-function/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/
Thanks for reading and have a great day!
