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 third article in ES6 new features series.
\n\n\nIn many ways, they are a sham. Javascript classes don’t really exist other than for cosmetic reasons. They are syntactic sugar over existing Javascript prototypical inheritance. The reason for this was to ensure backwards compatibility, classes merely give you a cleaner way to organise your code.
\nIf you love object-oriented programming (OOP), then you’ll love this feature. In ES5 there wan not a class keyword.
\nclass myClass {\r\n constructor(name = 'default', age = 80) {\r\n this.name = name\r\n this.age = age\r\n }\r\n\r\n sayName() {\r\n alert(this.name)\r\n }\r\n\r\n sayAge() {\r\n alert(this.age)\r\n }\r\n}\r\n\r\nconst myInstance = new myClass()\r\nmyInstance.sayName()Notice that I’m using default parameter values for name and age. Also, method names don’t need to have the word function or the colon (:) anymore.
When it comes to inheritance it is very similar to OOP programming languages such as C# or any other one. The basic inheritance can be implemented as follow:
\nclass childClass extends myClass {\r\n constructor(name, age) {\r\n super(name, age)\r\n }\r\n\r\n // Override the someClass method above\r\n sayName() {\r\n // This will call someClass.sayName() triggering the old alert\r\n // Which will just display our name\r\n super.sayName()\r\n\r\n // This will trigger the new alert which has labels and our age\r\n alert('Name:' + this.name + ' Age:' + this.age)\r\n }\r\n}\r\n\r\nconst myChild = new childClass('dwayne', 27)\r\nmyChild.sayName()Notice that to call the parent constructor, effortlessly invoke super() with expected parameters. Isn’t it amazing?
As you might now, there were no native modules support in JavaScript before ES6. People came up with AMD, RequireJS, CommonJS and other workarounds. Now there are modules with import and export operands.
The ES6 module standard has two parts:
\nexport const myName = 'Yaser'\r\n\r\nexport function getCreditCardNumber() {\r\n //Not implemented yet, you can leave yours\r\n //in the comments for the moment 😉\r\n}In other modules, we use import {myName} from 'my-module'syntax. For example:
import { myName, getCreditCardNumber } from 'module'\r\n\r\nconsole.log(myName) // YaserOr we can import everything as a variable in other modules and use it as an object literal:
\nimport * as myData from 'module'\r\n\r\nconsole.log(myData.myName) // YaserModules that only export single values are very popular in the Node.js community. But they are also common in front-end development where you often have constructors/classes for models, with one model per module. An ECMAScript 6 module can pick a default export, the most important exported value. Default exports are especially easy to import.
The following ES6 module “is” a single function:
\n//------ myFunc.js ------\r\nexport default function () { ... };\r\n\r\n//------ main1.js ------\r\nimport myFunc from 'myFunc';\r\n\r\nmyFunc();An ES6 module whose default export is a class looks as follows:
\n//------ MyClass.js ------\r\nexport default class { ... };\r\n\r\n//------ main2.js ------\r\nimport MyClass from 'MyClass';\r\nlet instance = new MyClass();And finally having both default and named exports together will look like something like the following code. I used some underscore metadata to show how it can be used and simplify everything.
\n//------ underscore.js ------\r\nexport default function (obj) {\r\n ...\r\n};\r\nexport function each(obj, iterator, context) {\r\n ...\r\n}\r\nexport { each as forEach };\r\n\r\n//------ main.js ------\r\nimport _, { each } from 'underscore';Well ES6 is not currently supported by all browsers and also those who does support it only have implemented part of it, so you need a safe way to utilise its power.
\nHere there are a couple of options but apparently best of which is Babel (which is a compiler). You can run it as a standalone tool or use with your build system. There are Babel plugins for Grunt, Gulp and webpack (again my favourite).
\nThe parenthesis And more eloquent version of the code in ES6 with parenthesis around params and implicit return: Promises 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. Promises have been around quite a while and are defined by a spec called Promise/A+. ES6 has adopted this spec for its Promise implementation. Promises 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: The standard way to create a Promise is by using the And with ES6 arrow functions: Now with a slight modification we can revise that to look like this: ES6 provides two new ways of declaring variables: Since The following table gives an overview of six ways in which variables can be declared in ES6: 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. This is the first article in ES6 new features series. Number one in the list would be ES6. Which is the topic of today’s post. ES6 (often referred to as “Harmony”) is the upcoming sixth major release of the ECMAScript language specification. However, that does not put things in perspective. I prefer to say it is the newest JavaScript implementation, simple as that. I just briefly list them here and go through one by one: If you remember previously we had to explicitly specify a value if the coming parameter to a method didn’t have one. Now it is like one of high level languages such as C#. Template literals or interpolation in other languages is a way to output variables in the string. So in ES5 we had to break the string like this: In ES6 though you can use the new syntax ${} which is again like C#: Previously we had to use + to shape multiple line strings something like this: But in ES6 they introduced the multi-line string literal ` which makes life easier: This can be a little confusing as there is some logic behind it. In ES5 when we wanted to extract some properties from an object we should define them as below: In ES6, we can replace the ES5 code above with these statements: First of all let’s see what is an object literal. An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ( What you can do with object literals now in ES6 is mind blowing! It has started from something like a glorified JSON in ES5 to something like a class in ES6. Additionally, you can use a numeric or string literal for the name of a property or nest an object inside another. The following example uses these options. In ES6 Object Literals are extended to support setting the prototype at construction, shorthand for 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)() 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})var ids = ['56', '5632']\r\nvar messages = ids.map(\r\n (value, index, list) => `ID of ${index} element is ${value} `\r\n) // implicit return7. Promises in ES6
\n\n
\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))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});var wait1000 = new Promise((resolve, reject) => {\r\n setTimeout(resolve, 1000)\r\n}).then(() => {\r\n console.log('Yay!')\r\n})var 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 })8. Block-Scoped Constructs Let and Const
\nlet 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-onlyfor-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// b\n\n
","timeToRead":3,"frontmatter":{"title":"ES6 new features (Part II)","unformattedDate":"2016-07-07T00:00:00.000Z","date":"Jul 07, 2016","path":"/es6-new-features-part-ii/","author":"Yaser Adel Mehraban","tags":["arrow functions","const","ES6","let","promises"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEUUlEQVR42n1UC1BUZRTeQFiB5bkQyEOX177kIUKurgoFZIaBGUUSUDwCQaRhMkUbciwQRkeDkKlhBUZDHiFmk8NMOmklTvIm2aJ4qcW6GOpkubjt7r3367/LYy4++me++e+955zv/8655z883uwC8BSBJeedTyAmiCR4kSCWIIxA+KQY7mINFrNOERrtnypVffN4QWGxKT1zO1JSM5D2Vg6y83YxJeVVd76/1HWB+GUT2M/GWPC4p8zuiwgOHamsoRQKBTYoBczuNCvUvG+HhhIBc7LUninL5+ONjXysCvNhkpLfRsflzhES8/xs/EKlev305+lZ+VDIeFRfo6sJI1IKvwczzPVgYDIUt36UwjASBNxYTt+/IjIdKrCkRN6OOFbXQLiQsUApeUgp2vsRNil4JowFMRiWg+qTQN9DSjgkxanDnkh7yQEYlMDYKwF9VQJMhGD4rBfl62mJppYvdYRjxby6Hy53nVdGLMPdbn8Kahn+JUT0AAkmpBiVoSDZGWUFrsCwDCbyzdRPDusKJGpD0NHgZlqvVGBCo62dU2d3uEI1nhpPFIzLabOCgRmAKNF3i9HdtAwMUcr8JDFjzs76YlhCJ8S4ov5E28AcodOBg9UTmVvsgDFC2Dfr3Cc2k013iWHsF+MB+9w5827oFZuJWbUYkdGpCY74uLJ2lHDZmAupqmtWJ24QAr9JaNaJURPHX6QAq0gtBaWeqSf9M/kxrJ3s7IEUSR2/iunNrMLjbf3zNezsudoSpQzEre+WUri2HMdLliBUwse6MBvUFLtj++tOkPtZo7Hc00yWsskBo2f9iAA5Ji/6UFFKCXr61Ce5vbgt8dVkNJXbU7gTiv25rhB5WaFitzvaq73hIVyErJcdceO8P2o+9IDQ0RI3LwaAtBUaygTUa0mpbOtkcQmXVn964m581GLgdjBTmk8Il1ih9B03/EPSOveZDyLDbZES54DnnrHFlmgB4tbZsT3JxK0nWRxrnCIcXjxuM96797cqKjIK6jPupoqiGRV5JNX9ea54JcYeyhU2iF5li41r7bA62AZpm51xoU5oio19AQaDoYrlaG1tteRx7rC8tr75fqzCGte+8WdqPvBAUYYL2o96o+2IF/ZmuUDzrT8GvhCh4r2nMdkRyKwOscWp0+23SayIe43n7yHZS5K2ZmJfrpUR0yuxLckJO7Y6oThHiIOFbshJdMQBskMfjswEnjEvv4itXeEjd5kzIPharfZSUHA46vYJTLpuOdRtIgyd8YX6tC9GvvaDrlOGPW9amJ6NiYdB/6BtgTLu4qQe0NPbf90/IBCqPdZG3AyiaW2oeUBgTEq9m8QzrlkbDY1Gc4X4Oj+RcMbQOpe6eHBwaCgmNgHRERb0JzttUJrHx0rZYjotfQempqbOER+XR2bh40nnlQp1Ot3Ryqrav9KzCpCduxONLV/9Qb7vIrD+X2WPI+UQkzGDNewkJxA8bH94/QeYyzHWiE3wRQAAAABJRU5ErkJggg=="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/843eb0f0e2f739a8cf7490c23e695ace/be182/es6.png","srcSet":"/static/843eb0f0e2f739a8cf7490c23e695ace/be182/es6.png 150w","sizes":"(min-width: 150px) 150px, 100vw"},"sources":[{"srcSet":"/static/843eb0f0e2f739a8cf7490c23e695ace/5d458/es6.webp 150w","type":"image/webp","sizes":"(min-width: 150px) 150px, 100vw"}]},"width":150,"height":150}}}}}},{"node":{"id":"ea2f8252-1080-5c85-b6ff-c7b7b6daae5e","html":"\n \n\n\n\n Hoisting \nScope \nCreates global properties \n\n \nvarDeclaration \nFunction \nYes \n\n \nletTemporal dead zone \nBlock \nNo \n\n \nconstTemporal dead zone \nBlock \nNo \n\n \nfunctionComplete \nBlock \nYes \n\n \nclassNo \nBlock \nNo \n\n \n\nimportComplete \nModule-global \nNo \n\n
\n1. Default Parameters in ES6
\nvar bar = function(foo) {\r\n var temp = foo || 'default value'\r\n}var bar = function(foo = 'default value') {\r\n //code goes here\r\n}2. Template Literals in ES6
\nvar fullname = firstname + ' ' + lastnamevar fullname = `Your name is ${firstname} ${lastname}.`3. Multi-line Strings in ES6
\nvar fourAgreements =\r\n 'You have the right to be you.' + 'You can only be you when you do your best.'var fourAgreements = `You have the right to be you.\r\n You can only be you when you do your best.`4. Destructuring Assignment in ES6
\nvar data = $('body').data(), // data has properties cat and mouse\r\n house = data.cat,\r\n mouse = data.mousevar { cat, mouse } = $('body').data() // we'll get house and mouse variables5. Enhanced Object Literals in ES6
\n{}).var sales = 'Toyota'\r\n\r\nfunction carTypes(name) {\r\n if (name === 'Honda') {\r\n return name\r\n } else {\r\n return \"Sorry, we don't sell \" + name + '.'\r\n }\r\n}\r\n\r\nvar car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales }\r\n\r\nconsole.log(car.myCar) // Saturn\r\nconsole.log(car.getCar) // Honda\r\nconsole.log(car.special) // Toyotavar car = { manyCars: { a: 'Saab', b: 'Jeep' }, 7: 'Mazda' }\r\n\r\nconsole.log(car.manyCars.b) // Jeep\r\nconsole.log(car[7]) // Mazdafoo: foo assignments, defining methods, making super calls, and computing property names with expressions.var obj = {\r\n // __proto__\r\n __proto__: theProtoObj,\r\n // Shorthand for ‘handler: handler’\r\n handler,\r\n // Methods\r\n toString() {\r\n // Super calls\r\n return 'd ' + super.toString()\r\n },\r\n // Computed (dynamic) property names\r\n ['prop_' + (() => 42)()]: 42,\r\n}