I try were possible to keep up to speed with what's about to come along and it was with this in mind I I was casting my eye over Juriy Zaytsev's EMCAScript 6 compatibility chart and I started to notice green's appear. Some of the current or beta versions of the browsers are starting to support the new V6 changes so it shouldn't be that long until we start to see them in the wild and can start to use them in anger.
(if you are interested in the EMCAScript 6 Draft Doc you can download it here)
Of the changes coming I am piqued by the idea of
1. Modules
While there are some JS libraries that do something very similar ES6 will provide support for modules, the rational behind this is to provide for:
- Standardized mechanism for creating libraries.
- In-language loading of external modules (non-blocking, direct style).
- Portability between different host environments.
- Future-proof mechanism for platforms to introduce experimental libraries without collision.
- No installation/registration code within modules.
It is hoped that Modules will be used for scoping and their implementation preserves and promote static, lexical scoping, thus avoiding the many problems of dynamic scope: programming pitfalls, malicious scope injection, poor performance and lack of modularity. Static scoping is also necessary for checking for unbound variables at compile time.
A simple module would look like this
module orders {
export function ASP(qty,val) { return val/qty; }
export var dollar = "$";
export var pound = "£";
}This module would then be accessed in your JS code like this :
import orders( ASP , pound) from orders;
alert( pound+" "+ASP(ThisOrder.Quantity,ThisOrder.Value) );
I can see instances where this will be very useful!
More details on Modules can be found here
2. Object.Observe
Object.Observe gives us the ability to watch Javascript objects and report back changes to the application, changes like properties being added, updated, removed or reconfigured. When I am building a UI frameworks I often want to provide an ability to data-bind objects in a data-model to UI elements. A key component of data-binding is to track changes to the object being bound. Today, JavaScript frameworks which provide data-binding typically create objects wrapping the real data, or require objects being data-bound to be modified to buy in to data-binding. The first case leads to increased working set and more complex user model, and the second leads to siloing of data-binding frameworks. ES6 will get around this by providing a run-time capability to observe changes to an object. Here is interesting discussion on this soon to be available new feature
3 Default Parameter Values
Default parameter values allow us to initialize parameters if they are not explicitly supplied, so you can do things like
function dspInputPanel(footer = "Steve McDonagh")
{
... build inputPanel Object..
footer.innerHTML = footer;}
So when I call dspInputPanel() with no parameters the footer object will contain Steve McDonagh
if I call dspInputPanel("Anne Other") then the footer object will contain Anne Other
4. Block Scoping
There will be 2 new declarations available for scoping data in a single block
let which is similar to the var declaration but allows you to redefine a var in the let's block scope without changing the orginal var in the scope of the function
function doInterestingStuff()
{
var x = 5;
var y = 6;
let (x = x*2,y =y*3) { alert( x+y ); } // pops up 28
alert(x+y) // pops up 11
}const is the other declaration and is like let but is used for read-only constant declarations
5. Maps
Arrays of Name - Value pairs have been around a long time in JS and ES 6 will introduce the new Map() object with it's functions SET(), HAS(), GET() and DELETE() that makes using them even easier
var myDogs = new Map();
myDogs.set("Fido","Poodle")
myDogs.set("Rover","Collie")
myDogs.has("Fido") // Returns true
myDogs.get("Fido") // Returns "Poodle"
myDogs.delete("Fido") // Returns true when deleted
myDogs.has("Fido") // Now returns false6. Sets
SETs are basically arrays and there is a new object creator Set() with associated methods HAS(), ADD() and DELETE()
var myCustomers = new Set( ["IBM","DELL","APPLE"] )
myCustomers.has("IBM") // returns true
myCustomers.add("ASUS") // adds "ASUS" to the set
myCustomer.delete("IBM") // Removes IBM from the set
myCustomer.has("IBM") // now returns falseThis will allow array filtering to be so much easier, consider the following where I have an Array of customer names that I want to ensure is unique this new method is much much much easier to read.
function unique( customers )
{
var ucust = new Set();
return customers.filter(item) {
if(!ucust.has(item)) { ucust.add(item) }
return true;
}
}There are loads more changes and improvements in the spec and it seems that ES6 is targeting a 2013 full spec release but as always some browsers are already implementing individual features and it's only a matter of time before their availability is widespread.
JS it seems may be coming out of the closet in the next 6 months and may soon be considered a "proper" language :-)
