Let’s talk about arrow function expressions, but before we can, we need to know what a function expression is.
Function Expression
According to MDN, expression are prohibited at the start of the statement. The function name is optional and local to the function body, and if omitted it becomes anonymous. The paramN is optional and are arguments that are passed to the function. The statements is optional and makes up the entire body of the function. Function expressions are not hoisted, meaning function expressions can not be used before its created.
function [name]([param1[, param2[, …, paramN]]]) {
statements
}
Arrow Function Expression
According to MDN, an arrow function expression is an alternative to function expressions. However, arrow function expression are limited and can’t be used in all situations. When using the arrow functions, one needs to be aware of the limitations. Arrow function expressions does not allow the use of yield, can not be used as constructors, should not be used as methods, does not have bindings to this or super, does not have arguments or new.target keywords, and is not suitable for methods that depends on scopes such as call, apply or bind methods.
The example below is how we can change a function expression with only one argument and only one line statement to an arrow function expression.
function (argument){
return argument + 19;
}
Basically, for the function expression, we need to replace the word function with =>. For this particular example we should remove {} and the word return because the return is implied. Since this is such a simple example, we should also remove the argument ().
argument => argument + 19;
Obviously, when the function are more complex such as having more arguments and statements we should not remove the word return, {} or ().
The example below is how we can change a function expression with multiple arguments and only one line statement to an arrow function expression.
function (argument1, argument2){
return argument1 + argument2 + 19;
}
Similar to the previous example, we need to replace the word function with =>, and remove {} and the word return.
(argument1, argument2) => argument1 + argument2 + 19;
The example below is how we can change a function expression with no arguments and only one line statement to an arrow function expression.
let a = 8;
let b = 18;
function (){
return a + b + 19;
}
Similar to the previous example, we need to replace the word function with =>, and remove {} and the word return.
let a = 8;
let b = 18;
() => a + b + 19;
The example below is how we can change a function expression with more than one argument and more than one statement to an arrow function expression.
function (argument1, argument2){
let Jean = 42;
return argument1 + argument2 + Jean;
}
For this slightly more complex function, we replaced the word function with =>.
(argument1, argument2) => {
let Jean = 42;
return argument1 + argument2 + Jean;
}
The example below is how we can change a named function expression to an arrow function expression.
function chloe (argument){
return argument + 35;
}
Arrow expressions are treated like variables.
let chloe = argument => argument + 35;
Arrow function expressions are not suitable for method functions as they do not have their own this or super. Methods such as call, apply, and bind are not suitable. This is solely because call, apply and bind are designed to allow methods to execute within different scopes. When arrow function is misused for these methods, it will produce incorrect results.
Regardless, arrow functions are particular useful with DOM-level methods such as setTimeout, setInterval, addEventListener etc.
When using arrow functions, one must be aware of abiding the parsing rules. Misuse may cause syntax errors. The image below shows 3 different uses of the arrow functions and whether it would produce the expected result or syntax errors.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
