You should all be familiar with vanilla function declarations where the function keyword is used to declare a function with the specified parameters...
functions are declared with the following syntax:
function name(param0, param1) {
statements
}
//for example:
function calculateArea(width, height) {
return width * height;
}
console.log(calculateArea(3, 6));
// expected output: 18
A function expression is very similar to and has almost the same syntax as a function declaration. The main difference between a function expression and a function declaration is the function name, which can be omitted in function expressions to create anonymous functions.
A JavaScript function can also be defined using an expression and the function expression can be stored in a variable:
//This function is actually an anonymous function (a function without a name).
const getArea = function(width, height) {
return width * height;
};
console.log(getArea(3, 6));
// expected output: 18
Functions stored in variables do not need function names. They are always invoked (called) using the variable name. After a function expression has been stored in a variable, the variable can be used as a function:
let myBox = getArea(4,4);
let myRectangle = getArea(2,10);
console.log(myBox);
// expected output: 16
console.log(myRectangle);
// expected output: 20
In 2015 arrow function expressions were added to the JavaScript language. ECMAScript® 2015 Language Specification
Arrow functions are a new way to write anonymous function expressions, and are similar to Python's lambda functions.
Anonymous functions are very common In JavaScript, for example when passing a function as an argument to another function. Since these functions are not reused anywhere else in the code, it is not necessary to waste resources naming them.
Lets take a look at this simple function:
// Function declaration
function sayHello(who) {
return `Hello, ${who}!`;
}
// Function expression
const sayHello = function(who) {
return `Hello, ${who}`;
}
with ES6 arrow function syntax the above code can be simplified to:
const sayHello = (who) => {
return `Hello, ${who}!`;
}
When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword return as well:
const sayHello = (who) => `Hello, ${who}!`;
console.log(sayHello('pedbad');
//expected output Hello, pedbad!
As you can see, just like regular functions, you can pass arguments into an arrow function.
const multiplyByTen = (item) => item * 10;
console.log(multiplyByTen(2));
//expected output 20
If an arrow function has a just one single parameter, the parentheses enclosing the parameter can also be omitted.
const multiplyByTen = item => item * 10;
Arrow functions, like all JS functions can have multiple parameters, but remember when using multiple arguments, then enclosing parentheses must be used.
const multiplier = (item, multi) => item * multi;
console.log(multiplier(3, 6));
//expected output 18
const concatArrays = (arr1, arr2) => arr1.concat(arr2);
console.log(concatArrays([1,2,3] , ["a", "b", "c"]));
//expected output [ 1, 2, 3, 'a', 'b', 'c' ]
ES6 has also introduces default parameters for functions. This helps create more flexible functions. The default parameter kicks in when the argument is not specified (it is undefined).
const greeting = (name = "Anonymous") => "Hello " + name;
console.log(greeting("pedbad"));
//expected output Hello pedbad
console.log(greeting());
//expected output Hello Hello Anonymous
In the above example, the parameter name will receive its default value Anonymous when no value is provided for the parameter. You can add default values for as many parameters as you want.
References