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 first article in ES6 new features series.
\n\n\nNumber 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.
\nHowever, that does not put things in perspective. I prefer to say it is the newest JavaScript implementation, simple as that.
\nI just briefly list them here and go through one by one:
\nIf you remember previously we had to explicitly specify a value if the coming parameter to a method didn’t have one.
\nvar bar = function(foo) {\r\n var temp = foo || 'default value'\r\n}Now it is like one of high level languages such as C#.
\nvar bar = function(foo = 'default value') {\r\n //code goes here\r\n}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:
\nvar fullname = firstname + ' ' + lastnameIn ES6 though you can use the new syntax ${} which is again like C#:
\nvar fullname = `Your name is ${firstname} ${lastname}.`Previously we had to use + to shape multiple line strings something like this:
\nvar fourAgreements =\r\n 'You have the right to be you.' + 'You can only be you when you do your best.'But in ES6 they introduced the multi-line string literal ` which makes life easier:
\nvar fourAgreements = `You have the right to be you.\r\n You can only be you when you do your best.`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:
\nvar data = $('body').data(), // data has properties cat and mouse\r\n house = data.cat,\r\n mouse = data.mouseIn ES6, we can replace the ES5 code above with these statements:
\nvar { cat, mouse } = $('body').data() // we'll get house and mouse variablesFirst 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.
\nvar 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) // ToyotaAdditionally, 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.
\nvar car = { manyCars: { a: 'Saab', b: 'Jeep' }, 7: 'Mazda' }\r\n\r\nconsole.log(car.manyCars.b) // Jeep\r\nconsole.log(car[7]) // MazdaIn ES6 Object Literals are extended to support setting the prototype at construction, shorthand for foo: 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}