A Newb's Pen

Let's learn together

Getting Started with ES6 - 2



6. Additional String Methods

ES6 introduces four new string methods namely repeat, startsWith, endsWith and includes.

(function() {
    var name = 'Manish ';
    console.log(name.repeat(3));
    console.log(name.startsWith('Man'));
    console.log(name.startsWith('ani'));
    console.log(name.endsWith('ish'));
    console.log(name.endsWith('ish '));
    console.log(name.includes('ani'));
})();

// Output
// Manish Manish Manish
// true
// false
// false
// true
// true

7. Object Literals

With ES6, one can skip key-pair like ‘name : name’ to make it look cleaner.

(function() {
    var name = 'Manish';
    var age = 25;

    var person_oldWay = {
        name: name,
        age: age,
        log: function() {
            console.log('I am an object');
        }
    }

    var person_ES6 = {
        name,
        age,
        log(x) {
            console.log('I am a cleaner ES6 Object');
        }
    }

    person_oldWay.log();
    person_ES6.log();

})();

// Output
// I am an object
// I am a cleaner ES6 Object

8. Sets

Sets are helpful data-objects to get rid of duplicate variables in array like structure.

(function() {
    var mySet = new Set();
    mySet.add(1);
    mySet.add(5);
    mySet.add(5);
    mySet.add('some text');
    var o = {
        a: 1,
        b: 2
    };
    mySet.add(o);
    // in o , mySet contains the reference to 'o' but below it contains the real object
    mySet.add({
        a: 1,
        b: 2
    });
    // 'o' is referencing different object so this won't be considered repeated

    console.log(mySet);
    console.log(mySet.has(1));
    console.log(mySet.has(3));

    var p = {
        a: 1,
        b: 2
    };
    console.log(mySet.has(p));
    // Above would be false as 'p' is again a different reference

    console.log(mySet.size);

    mySet.delete(5); // removes 5 from the set
    console.log(mySet);
})();

// Output
// Set {1, 5, 'some text', Object {a: 1, b: 2}, Object {a: 1, b: 2}}
// true
// false
// false
// 5
// Set {1, 'some text', Object {a: 1, b: 2}, Object {a: 1, b: 2}}

(function() {
    var arr = [1, 2, 3, 3];
    var mySet = new Set(arr);

    mySet.forEach(function(value) {
        console.log(value);
    });

    var arr1 = [...mySet];
    console.log(arr1);

})();

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

9. The Arrow ( => ) Function

As MDN says, An arrow function expression has a shorter syntax compared to function expressions and does not bind its own this, arguments, super, or new.target. Arrow functions are always anonymous. These function expressions are best suited for non-method functions and they can not be used as constructors.

(function() {
    var hello = () => {
        console.log('Hello ES6')
    };
    hello();
})();

// Output - Hello ES6

(function() {
    var sum = function(a, b, c) {
        return a + b + c
    };
    var sum_arrow = (a, b, c) => a + b + c;
    console.log(sum_arrow(1, 2, 3));
})();

// Output - 6

(function() {
    // Returning Objects
    var func = () => ({
        a: 'a'
    });
    var func2 = () => {
        {
            b: 'b'
        }
    };
    var func3 = () => {
        return {
            c: 'c'
        }
    };

    console.log(func());
    console.log(func2());
    console.log(func3());
})();

// Output
// Object {a: 'a'}
// undefined
// Object {c: 'c'}

// => Does not bind its won this
(function() {
    function Person() {
        this.age = 0;
        setTimeout(function() {
            // It would be windows object as setTimeout is windows.setTimeout
            console.log(this);
        }, 1000);
    }

    var p1 = new Person();

    function PersonES6() {
        this.age = 0;
        setTimeout(() => {
            console.log(this);
        }, 2000);
    }

    var p2 = new PersonES6();
})();

// Output
// Window {…}
// PersonES6 {age: 0}

As stated, Arrow function expressions are best suited for non-method functions only.

(function() {
    var obj = {
        i: 10,
        b: () => console.log(this.i, this),
        c: function() {
            console.log(this.i, this)
        }
    }
    obj.b();
    obj.c();
})();

// Output
// undefined, Window {...}
// 10, Object{i:10}

10. Generators

Generators are function pointers which can provide you play and pause like function and make synchronous code asynchronous.

(function() {
    function* genFunc() {
        yield 1;
        yield 2;
        return 3;
    }

    var gen = genFunc();
    console.log(gen.next());
    console.log(gen.next());
    console.log(gen.next());
})();

// Output
// Object {value: 1, done: false}
// Object {value: 2, done: false}
// Object {value: 3, done: true}

(function() {
    function* genFunc() {
        var index = 0;
        var arr = [1, 3, 5, 7, 9, 11]
        while (true)
            yield arr[index++];
    }

    var gen = genFunc();

    console.log(gen.next().value);
    console.log(gen.next().value);
    console.log(gen.next().value);
})();

// Output
// 1
// 3
// 5

/* In Above Example, We avoided to have
    an global index variable to return next odd number from array */

JavaScript is read from right to left and pause is held at yield, So one can pass any value in gen.next(value) to be assigned in left assignment ( see example below ).

(function() {
    function* genFunc() {
        var arr = [1, 2, 3, 4, 5, 6];
        var length = yield arr;
        console.log(length);
        return "yay";
    }

    var gen = genFunc();

    var larr = gen.next().value;
    console.log(gen.next(larr.length).value);
})();

// Output
// 6
// yay



Comments