Mastering JavaScript

ECMAScript 6
// with no arguments, single statement
//() => expression;
var f5 = () => 2*2;
console.log(f5()); //4
//IIFE
console.log(( x => x * 3 )( 3 )); // 9
It is important to remember that all the characteristics of a normal function
parameter are available to arrow functions, including default values, destructuring,
and rest parameters.
Arrow functions offer a convenient and short syntax, which gives your code a
very functional programming flavor. Arrow functions are popular because they offer
an attractive promise of writing concise functions by dropping function, return,
and { .. } from the code. However, arrow functions are designed to fundamentally
solve a particular and common pain point with this-aware coding. In normal ES5
functions, every new function defined its own value of this (a new object in case of
a constructor, undefined in strict mode function calls, context object if the function
is called as an object method, and so on). JavaScript functions always have their own
this and this prevents you from accessing the this of, for example, a surrounding
method from inside a callback. To understand this problem, consider the following
example:
function CustomStr(str){
this.str = str;
}
CustomStr.prototype.add = function(s){ // --> 1
'use strict';
return s.map(function (a){ // --> 2
return this.str + a; // --> 3
});
};
var customStr = new CustomStr("Hello");
console.log(customStr.add(["World"]));
//Cannot read property 'str' of undefined
On the line marked with 3, we are trying to get this.str, but the anonymous
function also has its own this, which shadows this from the method from line 1. To
fix this in ES5, we can assign this to a variable and use the variable instead:
function CustomStr(str){
this.str = str;
}
[ 178 ]
www.it-ebooks.info