The New Standard for JavaScript Is Here

The JavaScript standards body, ECMA, brings several new features to the JS language with ES6, Harmony, which will improve its capabilities and clarity.

This new standard has been developed for six years and will finally be fully in place this summer. Your existing code will not suffer because the new standard was designed to be compatible with it, but you will probably find yourself more than ready to implement ES6 when you hear about the exciting new features that will change how code is written.

Brimming with Features

• Shorthand for declaration.

nums.forEach(v => {
    if (v % 5 === 0)
        fives.push(v)
})

• Block Bindings: Now you can declare a function or variable and bind it to a specific block of code, allowing you to write JavaScript with more precision than previously possible.

function foo() {
    return 1
}
foo() // === 1
    {
        function foo() {
            return 2
        }
        foo() // === 2
    }
foo() // === 1

• Collection Structures– Some of the new structures ES6 provides include:

• Maps

• Sets

let s = new Set()

s.add(“hello”).add(“goodbye”).add(“hello”)

s.size === 2

s.has(“hello”) === true

for (let val of s.values()) < i > // insertion order</i>
    console.log(val)

• Symbols

• WeakMaps

• WeakSets

• Destructured Assignment: Combine multiple variables, nested elements, or objects into a single statement to save time.

var list = [1, 2, 3]

var [a,  ,  b] = list

    [b, a] = [a, b]

• Generators: A function you can use to stop and start functions where necessary. This can give you more control over asynchronous processes.

function* range(start, end, step) {

    while (start < end) {

        yield start

        start += step

    }

}

for (let i of range(0, 10, 2)) {

    console.log(i) < i > // 0, 2, 4, 6, 8</i>

• Iterators: There are three default iterators in ES6 for your objects, to streamline code. These are called entries, keys, and values.

• New Parameter Conveniences: Parameters will be much easier to use now with features including:

• Default parameters, which allow you to assign default values to function parameters.

function f(x, y = 7, z = 42) {
    return x + y + z
}

f(1) === 50

• Rest Parameters to replace arguments for variable numbers of parameters.

• Spread operators are used to split an array into separate parameters.

• Destructured parameters operate along the same lines as a destructured assignment.

• Promises: Mechanisms that improve readability while managing asynchronous operation results.

function msgAfterTimeout(msg, who, timeout) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(‘$ {
                msg
            }
            Hello $ {
                who
            }!’), timeout)
    })
}

msgAfterTimeout(“”, “Foo”, 100).then((msg) =>
    msgAfterTimeout(msg, “Bar”, 200)
).then((msg) => {
    console.log(‘done after 300 ms: $ {
        msg
    }’)
})

• Template Strings: More syntax for handling String declaration.

var customer = {
    name: “Foo”
}

var card = {
    amount: 7,
    product: “Bar”,
    unitprice: 42
}

message = ‘Hello $ {
        customer.name
    },

    want to buy $ {
        card.amount
    }
$ {
    card.product
}
for

a total of $ {
    card.amount * card.unitprice
}
bucks ? ’

This next generation of standards makes JavaScript almost an entirely new language and will significantly raise the quality and possibilities of code.

It won't be necessary to approximate classes because the new language support makes things much clearer.

ES6 modules will allow you to use import and export keywords to load and manage dependencies. It is full of syntactic sugar, which will help you gain a new appreciation for JavaScript.

The Learning Curve

There are plenty of new features to make JavaScript more user-friendly. But this comes along with a whole new dictionary of syntax that you will need to learn in order to use it properly.

This sounds daunting, but most of the new terms were created based on existing processes or techniques in JavaScript, and intended to improve them.

You will be building on skills you probably already use while finding shortcuts and cleaner ways to write and control things. You will find yourself having little trouble remembering your new vocabulary and methods with a little practice, especially when you learn how much easier it will make things for you.

Backward Compatibility

As the name Harmony suggests, ES6 can coexist with your current code and should not cause errors or issues. You can think of it as an extension of ES5, which is what it is meant to be. Although you can write exclusively in ES6, it will probably be more often used on top of the present standard at first.

This new language was developed based on the one currently in place and was intended to enhance it for your convenience and benefit. If you have learned ES5, then you are already well on your way to understanding Harmony and making use of it in your own JavaScript.

The designers of ES6 wanted maximum compatibility, and that is what they have provided. So don’t be afraid to start piling on the new language and enhancing your code.

But you don’t have to wait for widespread support for harmony. Not even if your web application has the requirement of working on older browsers. At Jscrambler, we are using babel.js to transpile Harmony code into ES5 at runtime. Once old browsers are buried away, you only have to drop the transpiling during your build, and that’s it.

In summary, the benefits are well worth the time it will take to learn ES6 and put it into practice. With Harmony, you can make JavaScript do things that weren’t previously possible and achieve code that meets this new standard of excellence.