Arrow functions expression is an alternative to traditional function expression. They are similar to lambda functions in python. These functions are often used in passing a function as a parameter to higher order functions. It is one of the features introduced in ES6.
The function ,
// function expression
let x = function(x, y) {
return x * y;
}
Can be written as
// using arrow functions
let x = (x, y) => x * y;
Syntax:
let myFunction = (arg1, arg2, ...argN) => {
statement(s)
}
myFunction – name of function
arg1,arg2,…argN – arguments of function
statement(s) – function body
Example:
The below example illustrates arrow functions with
- No arguments
- Single argument
- Function expression
- Function body
No arguments:
// with no argument
let noarg = () => console.log('Abaython');
noarg(); // Abaython
One argument:
// with one argument
let onearg = x => console.log(x);
onearg('Abaython'); // Abaython
As Expression:
//as expression
let num = 50;
let func = (num > 20) ?
() => console.log('Greater than 20') :
() => console.log('Less than 20');
func(); // Greater than 20
Function Body:
let sum = (a, b) => {
let result = a + b;
return result;
}
let result1 = sum(10,20);
console.log(result1); // 30
Output:
Abaython
Abaython
Greater than 20
30
Arrow functions and this keyword:
In a regular function this keyword refers to the function where it is called. But arrow functions does not have this and it refers to its parents scope whenever called.
function Employee() {
this.name = 'Anna',
this.age = 25,
this.sayName = function () {
console.log(this.name);
let Func = () => {
console.log(this.name);
}
Func();
}
}
const x = new Employee();
x.sayName();
Output:
Anna
Anna
Func() is defined within arrow. Inside the arrow this keyword refers to parents scope and returns this.name as Anna.
Argument bindings:
Arrow functions don’t have argument bindings.
let x = () => {
console.log(arguments);
}
x(10, 20); // error
Output:
Reference error
To solve this use spread syntax.
let x = (...n) => {
console.log(n);
}
x(10, 20); // [10, 20]
Output:
[10, 20]
Limitations:
- Arrow functions does not have bindings to this, arguments or super and should be used as methods.
- Calling arrow functions with new throws type error. They cannot be used as constructor.
- They cannot use yield within their body and cannot be created as generator function.
- You should not use arrow functions to create methods inside objects.
Key differences with Regular function:
- No prototype object for arrow functions
- Duplicate-named parameters are not allowed.
- Does not have argument object.
When to use them?
Arrow functions can be used when we need to bind this to the context and not to the function itself. It is a clear and concise way to write callbacks without exposing the scope that should be hidden.
In the coming article will try to ellaborate the difference with regular functions.