Well for a long time I wanted to write a blog post about migrating Angular 1.x to 2, however, before doing so I thought it is really helpful to write about some prerequisites of that.
\n\nThis is the second article in ES6 new features series.
\n\n\nDo you remember the fat functions of CoffeeScript? Now we have them in ES6. An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target).
\nArrow functions are always anonymous. The fat arrows are amazing because they would make your this behave properly, i.e., this will have the same value as in the context of the function—it won’t mutate. The mutation typically happens each time you create a closure.
var a = ['Hydrogen', 'Helium', 'Lithium', 'Beryllium']\r\n\r\nvar a2 = a.map(function(s) {\r\n return s.length\r\n})\r\n\r\nvar a3 = a.map(s => s.length)The parenthesis () are optional for single params in an arrow function signature. You need them when you use more than one param.
var ids = ['56', '5632']\r\nvar messages = ids.map(function(value, index, list) {\r\n return 'ID of ' + index + ' element is ' + value + ' ' // explicit return\r\n})And more eloquent version of the code in ES6 with parenthesis around params and implicit return:
\nvar ids = ['56', '5632']\r\nvar messages = ids.map(\r\n (value, index, list) => `ID of ${index} element is ${value} `\r\n) // implicit returnPromises have been a controversial topic. There were a lot of promise implementations with slightly different syntax. q, bluebird, deferred.js, vow, avow, jquery deferred to name just a few.
\nPromises have been around quite a while and are defined by a spec called Promise/A+. ES6 has adopted this spec for its Promise implementation.
\nPromises give us a way to handle asynchronous processing in a more synchronous fashion. They represent a value that we can handle at some point in the future. And, better than callbacks here, Promises give us guarantees about that future value, specifically:
\n// an immediately resolved promise\r\nvar p2 = Promise.resolve('foo')\r\n\r\n// can get it after the fact, unlike events\r\np2.then(res => console.log(res))\r\n\r\nvar p = new Promise(function(resolve, reject) {\r\n setTimeout(() => resolve(4), 2000)\r\n})\r\n\r\n// handler can't change promise, just value\r\np.then(res => {\r\n res += 2\r\n console.log(res)\r\n})\r\n\r\n// still gets 4\r\np.then(res => console.log(res))The standard way to create a Promise is by using the new Promise constructor which accepts a handler that is given two functions as parameters. The first handler (typically named resolve) is a function to call with the future value when it’s ready; and the second handler (typically named reject) is a function to call to reject the Promise if it can’t resolve the future value.
var p = new Promise(function(resolve, reject) {\r\n if (/* condition */) {\r\n resolve(/* value */); // fulfilled successfully\r\n }\r\n else {\r\n reject(/* reason */); // error, rejected\r\n }\r\n});And with ES6 arrow functions:
\nvar wait1000 = new Promise((resolve, reject) => {\r\n setTimeout(resolve, 1000)\r\n}).then(() => {\r\n console.log('Yay!')\r\n})Now with a slight modification we can revise that to look like this:
\nvar wait1000 = () =>\r\n new Promise((resolve, reject) => {\r\n setTimeout(resolve, 1000)\r\n })\r\n\r\nwait1000()\r\n .then(function() {\r\n console.log('Yay!')\r\n return wait1000()\r\n })\r\n .then(function() {\r\n console.log('Wheeyee!')\r\n })ES6 provides two new ways of declaring variables: let and const, which mostly replace the ES5 way of declaring variables, var. let works similarly to var, but the variable it declares is block-scoped, it only exists within the current block.
var is function-scoped. In the following code, you can see that the let-declared variable tmp only exists with the block that starts in line A:
function order(x, y) {\r\n if (x > y) {\r\n // (A)\r\n let tmp = x\r\n x = y\r\n y = tmp\r\n }\r\n console.log(tmp === x) // ReferenceError: tmp is not defined\r\n return [x, y]\r\n}const works like let, but the variable you declare must be immediately initialized, with a value that can’t be changed afterwards.
const foo; // SyntaxError: missing = in const declaration\r\n\r\nconst bar = 123;\r\nbar = 456; // TypeError: `bar` is read-onlySince for-of creates one binding (storage space for a variable) per loop iteration, it is OK to const-declare the loop variable:
for (const x of ['a', 'b']) {\r\n console.log(x)\r\n}\r\n// Output:\r\n// a\r\n// bThe following table gives an overview of six ways in which variables can be declared in ES6:
\n| \n | Hoisting | \nScope | \nCreates global properties | \n
|---|---|---|---|
var | \nDeclaration | \nFunction | \nYes | \n
let | \nTemporal dead zone | \nBlock | \nNo | \n
const | \nTemporal dead zone | \nBlock | \nNo | \n
function | \nComplete | \nBlock | \nYes | \n
class | \nNo | \nBlock | \nNo | \n
import | \nComplete | \nModule-global | \nNo | \n