Skip to main content

Making Arrow in Javascript - ES 6



Arrow function aka fat arrrow was intorduced in ES6 as a new syntax for writing Javascript function.This is the most popular and highly used ES6 feature. Source Ponyfoo

What is Arrow function?

Arrow functions provide a different way of creating functions in JavaScript. Besides a shorter syntax, they offer advantages when it comes to keeping the scope of the this keyword. What I meant by this line is, unlike other functions, the value of this inside arrow functions is not dependent on how they are invoked or how they are defined.It depends only on its enclosing context.
// ES5 - function declaration
function callMe(name){ 
            console.log(name); 
}
which you could also write as: 
// ES5 - function expression
const callMe = function(name) { 
       console.log(name);
}
becomes: 
// ES6
const callMe = (name) => { 
            console.log(name); 
}

Important Uses:

When having no arguments, you have to use empty parentheses in the function declaration:
const callMe = () => {
      console.log('Alex!'); 
}
When having exactly one argument, you may omit the parentheses:
 const callMe = name => { 
       console.log(name); 
 }
When just returning a value, you can use the following shortcut:
const returnMe = name => name 
That's equal to:
const returnMe = name => {
       return name;
}

Why use Arrow?

They have shorter syntax than function expressions.
e.g.
const vegetables = ['Potato', 'Tomato', 'Peas'];
console.log(vegetables.map(veg => veg.length)); // [6,6,4]
They have implicit return statements
in last example we are not witten any return for the function, still it is returning the length of vegetable. This is because arrow function has implicit return when it is written without {} curly brackets.
They retain scope of the method declared in when used as inner functions
let person = { name : "Alex" , sayName : function() {
                            return () => { return this.name; };
                           }
                      }
person.sayName()();    // Alex


Thank you!!


Comments

Popular Posts

Come Closure in Javascript

What is a closure? If we want to derive a definition,we can say, A closure is a feature of Javascript where inner function has access to the outer (enclosing) function’s variables—scope chain. This scope chains means inner function has: access to its own scope (variables defined between its curly brackets and its parameters),access to the outer function’s variables and parameters, access to the global variables. Now we will look into it in detail. Consider following example
var globalVar = "xyz"; function outerFunc(outerArg) { var outerVar = 'Alex'; function innerFunc(innerArg) { var innerVar = 'Chris'; console.log("globalVar = " + globalVar); console.log("outerArg = " + outerArg); console.log("innerArg = " + innerArg); console.log("outerVar = " + outerVar); console.log("innerVar = " + innerVar); } innerFunc(456); } outerFunc(123); In this example, i…

Javascript Hoisting Interview Question and Answers - 5

In this post,I have tried to cover all the types of possible interview questions and answers on hoisting. If you are not familiar with the hoisting, I would highly recommend you to go to my post on hoisting. Once you are comfortable with the topic, you can attempt these questions. Understanding the type of question will help you to answer. I have provided the hint after each question. All the answers are given at the end of the post.
//Question 1 console.log('bar:', bar) bar = 15 var foo = 1 console.log(foo, bar) var bar Hint: Basics of hoisting //Question 2 var foo = 5 console.log('foo:', foo) var foo; var bar = 10; var bar; console.log('bar:', bar) var baz = 10 var baz = 12 console.log('baz:', baz) Hint: Basics of hoisting //Question 3 function foo() { function bar() { return 5 } return bar() function bar() { return 10 } } console.log(foo()); Hint: Think what happens if two functions wit…

Javascript Closure Interview Questions and Answers - 6

Here in the post, I have posted all the possible interview questions and answers on closure. If you are not familiar with the closure, I would highly recommend you to go to my post onclosure. Once you are comfortable with the topic, you can attempt these questions. All the answers are given at the end of the post.

//Question 1 function foo() { var a = 5 function bar() { console.log(a) } return bar; } var baz = foo() baz()
// Question 2 function outer(a) { var b = 2 function inner() { var c = 5 console.log(a * b * c) } return inner; } var multiply = outer(5) multiply()
// Question 3 const arr = [10, 20, 30, 40, 50] for (var i = 0; i < arr.length; i++) { setTimeout(function() { console.log('Index: ' + i + ', element: ' + arr[i]) }, 1000) }
// Question 4 for (var i = 0; i < 5; i++) { setTimeout(function(i) { return function() { console.log('The value of…