Understanding Arrow functions in ES6

Arrow functions in javascript

Arrow functions are the functions which has been introduced in ES2015. Considered as ES6 features.

Arrow functions do not use any function keyword, whereas JavaScript functions uses a function keyword for declaring the functions

Arrow functions will not differ with the syntax, but also it differs in the context of “this” keyword. The working mechanism of “this” keyword varies from the traditional functions and Arrow functions.

The function calling is same in traditional and arrow functions

Traditional Functions Declaration

var traditionalFunction= function(){
    console.log('Arrow function example');
}
traditionalFunction();

Arrow functions Declaration

const arrowFunction = () => {
    console.log('Arrow function example');
}
arrowFunction();

The above arrow function is a basic way of declaration, which does not use any “function” keyword.

The above example is having only one line of code inside the function, so we can even convert the above arrow function into a single line of code and the result will be the same in both.

Single Line Arrow Function Declaration

const arrowFunction = () => console.log('Arrow function example');
arrowFunction();

Arrow functions with parameters

const arrowFunction = (a) => {
    return a;
}
arrowFunction(10);

The above function returns value 10, the above function defines, “A function which returns the single value which is passed as a single parameter”. This function have one parameter and one line of definition. So, this can be replaced into a single line as below.

const arrowFunction = a => return a;
arrowFunction(10);

From above, we have removed the parenthesis as we have one parameter, and also flower braces as we have only one statement inside the function definition.

When we want to use multiple parameters or zero parameters we have to use the parenthesis for the function.

When we want to use multiple statements inside the function definition we have to use the statements inside the flower braces.

Arrow Functions as Methods and “this” Context

In traditional function “this” always refers to the current execution context whereas in arrow function “this” context always refers to window level.

Arrow functions when used as method it won't have execution context instead it will target the window object value.

window.value = 20;
var obj = {
  value: 1,
  getArrowFunction: () => 'arrow function: '+ this.value,
  getTraditionalFun: function() {
  return 'Traditional function: '+ this.value
 }
}
console.log(obj.getArrowFunction()) // "arrow function: 20"
console.log(obj.getTraditionalFun()) // "Traditional function: 1"

From the above

1. getArrowFunction is a method which is defined by using arrow function.
2. getTraditionalFun is a method which is defined using the traditional function syntax.
3. We have two “value” properties i.e… window level property and object level property.
4. When we see the expected output “this.value” is always pointing to the window object whereas for traditional functions it is always pointing to the execution context. When we don't have a window object with the “value” property then the “value” property inside the arrow function is always undefined.

Returning an Object from Arrow function in a single line

const getArrowFunOne= () => {a: 10}
const getArrowFunTwo = () => ({a: 10})
console.log(getArrowFunOne()); // undefined
console.log(getArrowFunTwo()); // {a: 10}

From the above when we want to return an object we have to return inside the parenthesis otherwise the object will not be treated as a single line statement. Hence, when we return the object without enclosing in parenthesis it returns undefined.

Arrow Functions as anonymous function

var  getTraditionalInfo = function() {
 setTimeout(() => {
     console.log('Anonymous function');
    }, 1000)
}
 console.log(getTraditionalInfo());

From above the function used inside the setTimeOut callback is a nameless arrow function. This can demonstrate that we can use the arrow functions even for the nameless or anonymous functions.

Some more use cases and understanding’s on Arrow functions

1. We can not use the arguments object in arrow functions.
2. We can use rest operators as function parameters in the arrow functions.
3. Using call, bind and apply will not point to the execution context instead it uses the global window context.
4. We can not use prototype on arrow functions.
5. We can't use generator functions as the functions.
6. Arrow functions does not support yield keyword.