A Newb's Pen

Let's learn together

Getting Started with ES6 - 1



1. The ‘const’ keyword

Variable declared with const keyword is read only variable. Its value can’t be changed but can be overridden in nested functional scope for local usage.

 (function() {
     const count = 3;
     count = 5
 })();

 // Output - TypeError: Assignment to constant variable

 (function() {
     const count = 3;
     const count = 5
 })();

 // Output - Identifier 'count' has already been declared

 (function() {
     const count;
     count = 3;
 })();

 // Output - SyntaxError: Missing initializer in const declaration

 (function() {
     const count = 3;
     function otherFunction() {
         count = 5;
     }
     otherFunction();
 })();

 // Output - TypeError: Assignment to constant variable

 (function() {
     const count = 3;

     function otherFunction() {
         const count = 5;
         console.log(count);
     }
     otherFunction();
     console.log(count);
 })();

 // Output
 // 5
 // 3

2. The ‘let’ keyword

‘let’ keyword has local scope within a code block. Variables declared with ‘var’ keyword have functional scope but with ‘let’, variables can have local scope with-in {} brackets .

(function() {
    let count = 2;
    let count = 3;
    console.log(count);
})();

// Output - 3

(function() {
    var count = 5;
    if (true) {
        let count = 2;
        console.log('lcount : ' + count);
    }
    console.log('vcount : ' + count);
})();

// Output
// lcount : 2
// vcount : 5

(function() {
    if (true) {
        var vcount = 4;
        let lcount = 2;
        console.log('vcount1 : ' + vcount);
        console.log('lcount1 : ' + lcount);
    }
    console.log('vcount2 : ' + vcount);
    console.log('lcount2 : ' + lcount);
})();

// Output
// vcount1 : 4
// lcount1 : 2
// vcount2 : 4
//ReferenceError: lcount is not defined

(function() {
    for (var i = 0; i < 3; i++) {
        setTimeout(function() {
            console.log(i);
        }, 1000);
    }
})();

// Output
// 3
// 3
// 3

(function() {
    for (let i = 0; i < 3; i++) {
        setTimeout(function() {
            console.log(i);
        }, 1000);
    }
})();

// Output
// 0
// 1
// 2

3. Default parameters

ES6 allows you to set default arguments in function which will be used as fallback when arguments are not passed in functional call

(function() {
    function otherFunc(data) {
        console.log(data);
    }
    otherFunc();
})();

// Output - undefined

(function() {
    function otherFunc(data = 2) {
        console.log(data);
    }
    otherFunc();
})();

// Output - 2

(function() {
    function otherFunc(data = 2) {
        console.log(data);
    }
    otherFunc(5);
})();

// Output - 5

(function() {
    function otherFunc(data = 'hello', data2 = 5) {
        console.log(data);
    }
    otherFunc(7);
})();

// Output - 7

4. The Spread Operator

Spread operator takes an array and spread them into individual elements. It is used in places where multiple arguments or variables are expected

(function() {
    var arr = [1, 2, 3];
    console.log(arr);
    console.log(...arr);
})();

// Output
// [1, 2, 3]
// 1 2 3

(function() {
    function otherFunc(a, b, ...c) {
        console.log(c);
    }
    otherFunc(1, 2, 3, 4, 5, 6);
})();

// Output - [3, 4, 5, 6]

(function() {
    var arr = [1, 2, 3];
    var arr2 = [arr, 4, 5, 6];
    var arr3 = [...arr, 7, 8, 9];
    console.log(arr2);
    console.log(arr3);
})();

// Output
// [Array[3], 4, 5, 6]
// [1, 2, 3, 7, 8, 9]

(function() {
    function otherFunc(a, b, c) {
        console.log(a + b + c);
    }
    var arr = [1, 2, 3];
    otherFunc(...arr);
})();

// Output - 6

Once object spread is supported in browsers, One would also be able to spread an object and overwrite properties. (Helpful in partial cloning)

(function() {
    var obj1 = {
      name : 'obj1',
      id : 1,
      length : 3
    };
    console.dir(obj1);
    var obj2 = {...obj1, name:'obj2'};
    console.dir(obj2);
})();

// output
// Object
//   id: 1
//   length: 3
//   name: 'obj1'
//   __proto__: Object
// Object
//   id: 1
//   length: 3
//   name: 'obj2'
//   __proto__: Object

5. Template String

Strings defined using ` ` follow line formatting like line breaks. They also support embedded vars via ${myVar}

(function() {
    var str = `Hello
                yo
                `
    console.log(str);
})();

// Output
// Hello
//  yo

(function() {
    var name = 'Manish';
    var str = `Hello ${name} , it's ${8+2} o'clock`;
    console.log(str);
})();

// Output - Hello Manish , it's 10 o'clock



Comments