June 16, 2015

The New Standard for JavaScript Is Here

By Natalia Sergeeva | 4 min read

es6_large-min

The JavaScript standards body ECMA is raising the bar once again, and will be bringing several new features to the JS language with ES6, Harmony, which will improve its capabilities and clarity. This new standard has been in development 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 which will change the way code is written.

Brimming with Features

ES6 is packed full of new features for both language and library, which will make bigger changes to JavaScript than any upgrade previously.Some of the game-changing upgrades with examples of the new language from es6-features.org include:

  • Arrow Functions– Function declaration will now be easier than ever thanks to this new function 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 with your 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>

Try Jscrambler For Free

  • 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 to split an array into separate parameters.
  • DestructuredParameters which operate along the same lines as destructured assignment.
  • Promises– Mechanisms which 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 ? ’

You can view more great features of ES6 and examples of how they work at es6-features.org.

In a way, this next generation of standards makes JavaScript almost an entirely new language and will significantly raise the quality and possibilities of code. No longer will it be necessary to approximate classes, because new language support makes things much clearer and more precise.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 of JavaScript.

The Learning Curve

As you can see, 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, but 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.

Backwards 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 upon 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 harmony support. 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 in runtime. Once old browsers are buried away, you only have to drop the transpiling during your build and that’s it, you already have a ton of code that is written in ES6.

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.

As a final word, don't forget to download our free data sheet on JavaScript Security Threats, which provides an overview of the most relevant attacks and how to prevent them.

Natalia Sergeeva404 bio not found
View All Posts

Subscribe to our weekly newsletter

Learn more about new security threats and technologies.

I agree to receive these emails and accept the Privacy Policy.