Open In App

How ES6 (ES2015) evolved and brought new features to modern day JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In this article, we will see ECMAScript 6/ES2015 Features in JavaScript.

1. Arrow function: Arrow function uses the => syntax as its shorthand. It’s an alternative to the traditional arrow function.

let’s check an example for comparing both traditional vs arrow functions.

Javascript




<script>
 
    // Without using Arrow Function
    let square = function (x) {
        return (x * x);
    };
    console.log(square(9));
 
    // Using Arrow Function
    square = (x) => { return x * x; }
 
    console.log(square(9));
 
</script>


Output:

81
81

Learn more about arrow function by referring to this GFG article

2. ES6/ES2015 classes: This feature really made javascript the language it is now. As you may know, classes are a template for creating an object. ES6 classes brought the power of inheritance, super calls, an instance of a class, and the constructor (which is initialized while creating a class).

Class Declaration:

Javascript




<script>
 
    // Here class is declared
    class Rectangle {
 
        constructor(a, b) {
            this.a = a;
            this.b = b;
        }
    }
    let rect = new Rectangle(10, 20);
    console.log(rect.a, rect.b)
</script>


Output:

10 20

Learn more about classes here  

3. Enhanced (new) Object literals: It is extended to support setting the prototype at construction, shorthand for geeks: geeks assignments, also for defining methods, making superclass, and lastly also for computing property names with expressions.

Javascript




<script>
 
    // JavaScript code demonstrating
    // a simple object
    let school = {
        name: 'Vivekananda School',
        location: 'Delhi',
        established: '1971',
        displayInfo: function () {
            console.log(`${school.name}
            was established in
            ${school.established}
            at ${school.location}`);
        }
    }
    school.displayInfo();
</script>


Output:

Vivekananda School was established in 1971 at Delhi

Learn more about Object here

4. Promises: You guess it right, this was the version of ECMAScript that brought promises to the world of Javascript and the rest is history, Promises are a library for asynchronous programming which is widely used in Javascript. Promises are also 1st class representations of a value that may be made available in the future, now what this means is with an example.

Example: Let’s suppose we request an item that is out of order in a shopping site so what we can do is maybe select the option of remind me when available if it’s given on the website and leave that site and maybe later some days after we may get a remainder, that what promises are it promises that we will get the thing that we have a request in some time.  

let’s take a real-world program to understand this

Javascript




<script>
    let geeksforgeeks = new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve("a Portal for Geeks")
 
        }, 2000);
    })
    geeksforgeeks.then((msg) => {
        console.log("GeeksforGeeks is" + msg + " Ofc it is.");
    })
</script>


Output:

GeeksforGeeks is a Portal for Geeks Ofc it is. 

There is a concept of chained promises from which the .then() method is used. In simple terms, these are used to associate further action with a promise that becomes settled. There are other methods too like promise.catch() and promise.finally() that also return a newly generated promise object. You read more about these here.

Learn more about promises from the GFG article here.

5. Template string: It is simply syntactic sugar for constructing strings. The template String feature of Javascript is similar to interpolation features in Python. It also allows embedded expression, the creation of multi-line strings is also possible with this.

Javascript




<script>
 
    // Without template literal
    console.log('Some text that I want \non two lines!');
     
    // With template literal
    console.log(`Some text that I wanton two lines!`);
</script>


Output:

Some text that I want
on two lines!
Some text that I want
on two lines!

Learn more about it here

6. Destructuring: If you have knowledge of Reactjs then you may know the importance of destructuring, so let’s understand what actually it is. Destructuring allows binding using pattern matching with support for matching arrays and objects. Or in simple terms, it is a javascript expression that unpacks values from arrays or even from objects into distinct variables.

Javascript




<script>
    // Array destructuring
    let a, b, rest;
    [a, b, ...rest] = ['g', 'e', 'e', 'k', 's'];
 
    console.log(a, b, rest);
 
    // Object destructuring
    const geeks = {
        name: "maestro",
        logged_in: true
 
    };
    const { name, logged_in } = geeks;
 
    console.log(name, "is logged in?", logged_in);
</script>


Output:

g e ["e", "k", "s"]
maestro is logged in? true

Learn more about this by referring to the GFG article here

7. REST and SPREAD: The rest parameter allows a function to accept an indefinite number of arguments as an array.  Spread allows an iterable such as array or strings to be expanded in places where zero or more arguments, there are also options to use object expression to be expanded in places where zero or more key-value pairs are expected.

Javascript




<script>
 
    // REST concept
    function fun(a, ...b) {
        return a * b.length
    }
 
    fun(3, "GeeksforGeeks", "hello")
    console.log("Function fun output:",
        fun(3, "GeeksForGeeks", "hello"));
 
    // Spread concept
    function a(x, y, z) {
        return x * y * z;
    }
 
    console.log("Output for function a:",
        a(...[10, 20, 30]));
</script>


Output:

Function fun output: 6
Output for function a: 6000

Learn more about REST and spread here.

8: let + const: Let statement declares blocked scoped local variables, unlike the var keyword, which when used declares a variable globally or locally to an entire function regardless of the block scope.  While on the other hand const declaration creates a read-only reference to a variable defined. The variable identifier cannot be reassigned.

Javascript




<script>
 
    let gfg;
 
    const maestro = "coder";
 
    // Reassigning the above variable
    // will give out an error
 
    // maestro = "developer";  (ERROR)
    gfg = "javascript"; // (VALID)
 
    // Declaring again will not give
    // out an error in case with let
 
    // let gfg = "python";
 
    console.log(gfg, maestro);
</script>


Output:

javascript coder

Learn more about let and const here.

9. Map, set, weakSet, and weakMap: The Map object holds key-value pair and holds into account the original insertion order of the keys.

Javascript




<script>
    let lang = new Map();
 
    // .set() method is used to store data in the map
 
    lang.set("python", { type: "interpreted lang" })
 
    lang.get("python") // Returns python type
</script>


Output:

{type: "interpreted lang"}

Set object stores unique values (just like set in math) of any type. It contains a collection of values and its possible to iterate through the elements of a set in the order at the time of insertion.

Javascript




<script>
    let newSet = new Set();
 
    // Add values into the set
    newSet.add("geeksforgeeks");
    newSet.add("coder");
 
    // Checks for existence of values in the set
    console.log(newSet.has("coder"));
 
    console.log(newSet);
</script>


Output:

true
{"geeksforgeeks", "coder"}

weakSet and weakMap: The weakmap object is a collection (key, value) pairs, and in this case of weakmap the keys are weakly referenced, the keys in weakmap are of the object type. 

weakset objects let us store weakly held objects in the collection. Like weakmap, it is also a collection of objects, the difference comes in the part that weakest is the only collection of objects and weakset is weak, which means that reference to an object is being held weakly and therefore if there is no reference to an object stored in a weakset exist then those objects can be garbage collected by the garbage collector.

Javascript




<script>
    let s = new Set()
 
    s.add({ course: "Complete placement guide" });
    console.log(s);
 
    const course = { course: "python fundamentals" };
 
    // weakmap
    var gfg = new WeakMap();
    gfg.set(s, course);
 
 
    // waekset
    var coder = new WeakSet();
    coder.add(course);
 
    console.log(gfg, coder);
</script>


Output:

WeakMap{Set(1) => {
    key: {Set{...}}
    value: {course: "python fundamentals"}
}}
WeakSet{{
    0: 
    value: {course: "python fundamentals"}
}}

All about the above topics can be learned here

10. Symbols: This gives way to access control for an object state. it also allows properties to be keyed with either string. It is a primitive data type and to create a new primitive symbol we can use the following code:

Javascript




<script>
    let mySymbol1 = Symbol()
 
    // Optional string description can also be given
    let mySymbol2 = Symbol("GeeksforGeeks");
 
    console.log(mySymbol1 === mySymbol2);
</script>


Output:

false

NOTE: new keyword is not required while creating Symbol()



Last Updated : 20 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads