1.6 KiB
title |
---|
Arrow Functions |
Arrow functions
ES6 has introduced a new syntax that allows to declare functions.
// Old Syntax
function oldOne() {
console.log("Hello World..!");
}
// New Syntax
const newOne = () => {
console.log("Hello World..!");
}
// Or on one line
const newOne = () => console.log("Hello World..!");
The new syntax may be confusing. There are two major parts of it.
- const newOne = ()
- => {}
The first part is just declaring a variable and assigning the function (i.e) () to it. It just says the variable is actually a function. The const
keyword is used to indicate that the function won't be reassigned. Refer this to learn more about const
and let
.
Then the second part is declaring the body part of the function. The arrow part with the curly braces defines the body part.
Another example with parameters:
let NewOneWithParameters = (a, b) => {
console.log(a+b); // 30
}
NewOneWithParameters(10, 20);
Parentheses are optional when there's only one parameter name:
let newOneWithOneParam = a => {
console.log(a);
}
An incredible advantage of the arrows function is that you can not rebind an arrow function. It will always be called with the context in which it was defined. Just use a normal function.
// Old Syntax
axios.get(url).then(function(response) {
this.data = response.data;
}).bind(this);
// New Syntax
axios.get(url).then(response => {
this.data = response.data;
});