Announcement

Collapse
No announcement yet.

List out important features of es6?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • List out important features of es6?

    List out important features of es6?

  • #2


    1. Template Strings


    Template literals are string literals allowing embedded expressions.

    Benefits
    • String interpolation
    • Embedded expressions
    • Multiline strings without hacks
    • String formatting
    • String tagging for safe HTML escaping, localization and more
    Code:
    let greeting = `Hello World!`;
    
    // String Substitution
    let name = "Alex";
    console.log(`Hi, ${name}!`); // Output: "Hi, Alex!"
    
    
    // Multiline Strings
    let greeting = "Hello \
    World";
    
    // Tagged Templates
    fn`Hello ${you}! You're looking ${adjective} today!`

    Comment


    • #3
      2. Spread Operator


      Spread operator allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements.
      Code:
      function sum(x, y, z) {
      return x + y + z;
      }
      
      const numbers = [1, 2, 3];
      
      console.log(sum(...numbers)); // 6
      
      console.log(sum.apply(null, numbers)); // 6
      Code:
      let fruits = ['Apple','Orange','Banana'];
      
      let newFruitArray = [...fruits];
      
      console.log(newFruitArray); // ['Apple','Orange','Banana']
      Code:
      let fruits = ['Apple','Orange','Banana'];
      
      let newFruits = ['Cherry', ...fruits];
      
      console.log(newFruits); // ['Cherry', 'Apple','Orange','Banana']
      Code:
      var obj1 = { id: 101, name: 'Jhon Doe' }
      var obj2 = { age: 25, country: 'USA'}
      
      const employee = { ...obj1, ...obj2 }
      
      console.log(employee); //{ "id": 101, "name": "Jhon Doe", "age": 25, "country": "USA" }

      Comment


      • #4
        Sets



        Sets are a new object type with ES6 (ES2015) that allow to create collections of unique values. The values in a set can be either simple primitives like strings or integers, but more complex object types like object literals or arrays can also be part of a set.


        Code:
        let animals = new Set();
        
        animals.add('🐷');
        animals.add('🐼');
        animals.add('🐒');
        animals.add('🐿');
        console.log(animals.size); // 4
        animals.add('🐼');
        console.log(animals.size); // 4
        
        console.log(animals.has('🐷')); // true
        animals.delete('🐷');
        console.log(animals.has('🐷')); // false
        
        animals.forEach(animal => {
        console.log(`Hey ${animal}!`);
        });
        
        // Hey 🐼!
        // Hey 🐒!
        // Hey 🐿!
        
        animals.clear();
        console.log(animals.size); // 0
        
        
        // Example 02: Pass-In Arrray
        let myAnimals = new Set(['🐷', '🐒', '🐷', '🐷']);
        
        myAnimals.add(['🐨', 'πŸ‘']);
        myAnimals.add({ name: 'Rud', type: '🐒' });
        console.log(myAnimals.size); // 4
        
        myAnimals.forEach(animal => {
        console.log(animal);
        });
        
        
        // 🐷
        // 🐒
        // ["🐨", "πŸ‘"]
        // Object { name: "Rud", type: "🐒" }
        
        
        // Example 03: Strings are a valid iterable so they can also be passed-in to initialize a set
        console.log('Only unique characters will be in this set.'.length); // 43
        
        let sentence = new Set('Only unique characters will be in this set.');
        console.log(sentence.size); // 18
        
        
        // Example 04: On top of using forEach on a set, for…of loops can also be used to iterate over sets
        let moreAnimals = new Set(['🐺', '🐴', 'πŸ•', 'πŸ‡']);
        
        for (let animal of moreAnimals) {
        console.log(`Howdy ${ animal }`);
        }
        
        // Howdy 🐺
        // Howdy 🐴
        // Howdy πŸ•
        // Howdy πŸ‡

        Comment


        • #5
          Default Parameters

          Code:
          function add(x = 10, y = 20) {
          console.log(x + y);
          }
          add(30, 40); // 70
          [B][/B]

          Comment


          • #6
            repeat()



            The repeat() method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.
            Code:
            var cat = {
            meow(times){
            console.log("meow ".repeat(times));
            }
            };
            cat.meow(2); // meow meow

            Comment


            • #7

              Arrow Function (=>)
              Code:
              var add = (x, y) => x + y;
              console.log(add(10, 20)); // 30;
              
              [B][/B]

              Comment


              • #8
                Destructing Assignment

                Code:
                var phone = {
                title: "iPhone",
                price: 800,
                description: "The iPhone is a smartphone developed by Apple"
                };
                console.log(phone.title);
                
                //ES-6
                var { title, price, description } = {
                title: "iPhone",
                price: 800,
                description: "The iPhone is a smartphone developed by Apple"
                };
                console.log(title); // iPhone
                [B][/B]

                Comment


                • #9
                  Generators



                  A generator is a function that can stop midway and then continue from where it stopped. In short, a generator appears to be a function but it behaves like an iterator.

                  Code:
                  function* generator(num) {
                  yield num + 1;
                  yield num + 2;
                  yield num + 3;
                  yield num + 4;
                  yield num + 5;
                  }
                  var gen = generator(10);
                  console.log(gen.next().value); // 11
                  console.log(gen.next().value); // 12
                  console.log(gen.next().value); // 13
                  console.log(gen.next().value); // 14
                  console.log(gen.next().value); // 15

                  Comment


                  • #10
                    Symbols()



                    They are tokens that serve as unique IDs. We create symbols via the factory function Symbol()
                    Code:
                    const symbol1 = Symbol();
                    const symbol2 = Symbol(42);
                    const symbol3 = Symbol('foo');
                    
                    console.log(typeof symbol1); // symbol
                    console.log(symbol3.toString()); // Symbol(foo)
                    console.log(Symbol('foo') === Symbol('foo')); // false

                    Usage



                    Symbols primary use case is for making private object properties, which can be only of type String or Symbol (Numbers are automatically converted to Strings).

                    Code:
                    const sym = Symbol()
                    
                    const privateObject = {
                    [sym]: 'Hello World'
                    }
                    
                    privateObject[sym] // 'Hello World'

                    Comment


                    • #11
                      Iterator



                      The iterable is a interface that specifies that an object can be accessible if it implements a method who is key is [symbol.iterator].
                      Code:
                      var title = 'ES6';
                      var iterateIt = title[Symbol.iterator]();
                      
                      console.log(iterateIt.next().value); //output: E
                      console.log(iterateIt.next().value); //output: S
                      console.log(iterateIt.next().value); //output: 6

                      Comment

                      Related Topics

                      Collapse

                      Working...
                      X