The Javascript programming language has been around for more than 25 years, and in that time it has changed quite a bit, adding new features and new syntax. It used to take years for new features to enter the language, but the modern Javascript standard is updated on a annual basis with new features.

Many major changes to the Javascript standard came with Javascript ES6. ES6 stands for ECMAScript 6; ECMAScript is another official name for Javascript, since the organization ECMA International creates the standard.

This article describes Javascript ES6, some of the important new features introduced to the Javascript language, and the legacy of Javascript ES6 since its adoption.

What is Javascript ES6?

Javascript ES6 is the version of Javascript released in 2015. Informally, many developers call any version of Javascript released after 2015 “ES6” because of the many new features the 2015 update added to the language. There have been more versions of Javascript released since then — more on that later — but none have gained as much presence as ES6 within the developer community.

Until 2015, Javascript versions were named by version number. ES6 was the last Javascript version to be named in this way, and before the end of 2015 it was renamed to ES2015 (ECMAScript 2015).

ES6, then, is actually a legacy name, and the new annual naming convention is why there has been no official “ES7” or higher, even though newer versions of Javascript exist. The two names sometimes cause confusion among developers; it is common to see Javascript ES6 referred to as ES2015.

As the first version of Javascript in a decade (after ES5), Javascript ES6 added modernized capabilities for the web in the 2010s. The new standard contained a list of features that developers had long wanted along with some optimizations to the language that made creating Javascript programs much easier.

The most recent version of Javascript is called ES2020, although some people occasionally use the legacy naming system and call it “ES11.” Thanks to common usage of the “ES6” name, though, most information you find about “ES6” is probably applicable to modern Javascript in general. Check the Javascript standard if you’re unsure.

What are Some New Features of Javascript ES6?

Javascript ES6 was a product of modern web development needs and years of input from the Javascript community. Many new features in Javascript ES6 addressed capabilities the Javascript language lacked or improved upon the language’s shortcomings.

Declaring Variables in New Ways

Before Javascript ES6, Javascript variables were always defined using the var keyword. The var keyword could be used in any scope, and there were no restrictions to using the keyword in any particular context. Although variables defined with var were flexible, they could be redefined elsewhere in a program, leading to potential confusion or unexpected behavior.

var myVar = "blah";   // myVar = "blah"
var myVar = "blah2";  // myVar = "blah2" -- same variable!

Defining variables with var is still allowed in Javascript ES6 and beyond, but it is strongly discouraged. (This is also why Udacity’s Javascript examples never use var unless it is essential to illustrate a concept.) The Javascript interpreter will not prevent you from using var, but there are better options available, const and let.

Variables declared with let may be updated, but not redefined.

let myVar2 = "abc";  // Declare myVar2 with value "abc"
myVar2 = "def";      // Update myVar2 to value "def"
let myVar2 = "xyz";  // Will throw an error at redefining attempt!

Variables declared with const cannot be updated or redefined.

const myVar3 = 123;  // Declared and defined as a constant
myVar3 = 45;         // Will throw an error at updating attempt!
let myVar3 = 678;    // Will throw an error at redefining attempt!

Writing Functions More Simply

Writing out a function body and function call can be cumbersome when a function is relatively simple, as in this example:

function myName() {
    return "Jane Doe";
}

let me = myName();

Arrow functions make creating these types of functions simpler by removing the need for explicit function structuring. The arrow operator (=>) handles that instead:

let me = () => {
    return "Jane Doe";
}

If a function only has one statement inside, you don’t even need braces or a return statement for this to work.

let me = () => "Jane Doe";

You can pass and use any number of parameters with arrow functions just like with longer function declarations. As long as the body of the function contains one statement only, you can use the shortest arrow function form.

let me = (name, age) => "My name is " + name + " and I am " + age;

Creating True Javascript Classes

A complaint among Javascript developers for many years was that Javascript, unlike many modern scripting languages, didn’t allow developers to create encapsulated classes. Javascript ES6 gave developers that ability.

// "Class" before ES6
function MyClass(param1, param2) {
    this.p1 = param1;
    this.p2 = param2;
}

// Class in ES6 and later
class MyClass {
    constructor(param1, param2) {
        this.p1 = param1;
        this.p2 = param2;
    }
}

Javascript ES6 classes have explicit constructors, may have class properties, and may have static methods, which are associated with the class rather than an instance of that class. Although the syntax for simple constructors is not dramatically different in ES6, the additional capabilities of ES6 classes are a major functional addition.

This example demonstrates a simple Javascript ES6 class containing an explicit constructor, class properties, and a static method.

class MyExample {                  // Class declaration
    constructor(param1, param2) {  // Explicit constructor
        this.p1 = param1;          // Class property
        this.p2 = param2;          // Class property
    }

    static greet(name) {           // Static method
        return "Hello " + name;
    }
}

What is the Legacy of Javascript ES6?

There was a long delay between Javascript ES5 and ES6, which was unusual over Javascript’s history. The first four versions of Javascript, developed in the 1990s, were released on an annual basis, but the Javascript community got used to long delays between versions after that.

Javascript ES6 re-established the annual release schedule of new Javascript versions, and as of 2020, a new version of Javascript has been released regularly each year since 2015. Changes to the Javascript language now happen much more quickly as a result; for example, over five years, two new data types were added.

Annual Javascript releases have also revitalized the Javascript community; the popularity of Javascript went through a slump in the 2000s but has since become immensely popular again thanks to Javascript ES6. The large community actively debates new additions to the language, and there are multiple ways for even novice developers to submit their ideas for Javascript’s future. None of this would have been possible without Javascript ES6 setting a precedent.

Conclusion

Javascript ES6 transformed not only the way developers use Javascript, but the update processes of the Javascript language as well. Thanks to Javascript ES6, new features enter the Javascript language faster than ever before and Javascript can keep up with the changing modern web.

Enroll in our Intro to Programming Nanodegree Program today to learn more about Javascript ES6 and other programming concepts.

Start Learning

Jessica Reuter Castrogiovanni
Jessica Reuter Castrogiovanni