12 'ECMAScript 6' Tips (Sep 2020)

1. 
  clear()
  This function clears the 'output pane' in 'JS console'.

2. 
  You can define an array as follows:

  var arr = [
    'elem a',
    'elem b',
    'elem c'
  ] 

  'Shift + Enter' lets you add a line-feed in the code in Firefox JS Console.

3. 
  "arr.length" 
  Will return you '3'.

4.
  Get unique elements from an Array:
  With ES6:
  var a = ['a', 'b', 'c', 'c']
  console.log([...new Set(a)]) 
  
  Out:
   ["a", "b", "c"]
   
  OR
   Array.from(new Set(a)); 
  
  OR
   list = list.filter((x, i, a) => a.indexOf(x) === i) 
   
5.
  To concatenate two arrays:
  a = ['a', 'b', 'c', 'c']
  b = ['d', 'e']
  console.log(a.concat(b)) 
  
  Out:
   ["a", "b", "c", "c", "d", "e"]
  
6. 
  ES6 based counter:
    var cntr = 0;
    function myFunction() {
      console.log(arr[cntr]);
      cntr++;
    } 

7.
  Add an element to "DOM body" before other child elements.
    b = document.querySelector("body")
    theKid = document.createElement("p");
    theKid.innerHTML = '<button onclick="myFunction(chatroom_names_kenya)" style="position: sticky !important;top: 0;z-index: 999;">Submit</button>';
    b.insertBefore(theKid, b.firstChild) 

8.
  Ways to access an element of HTML DOM using JavaScript:
  
 Gets           Selector Syntax Method 
 ID                #demo           getElementById()
 Class             .demo           getElementsByClassName()
 Tag               demo            getElementsByTagName()
 Selector (single)                 querySelector()
 Selector (all)                    querySelectorAll()

 About Query Selectors: It is JavaScript's method of accessing the DOM with CSS selectors.

9.
  Finding HTML Elements by HTML Object Collections:
    var x = document.forms["frm1"];
    var text = "";
    var i;
    for (i = 0; i < x.length; i++) {
      text += x.elements[i].value + "<br>";
    }
    document.getElementById("demo").innerHTML = text;  

  The following HTML objects (and object collections) are also accessible:
  1. document.anchors
  2. document.body
  3. document.documentElement
  4. document.embeds
  5. document.forms
  6. document.head
  7. document.images
  8. document.links
  9. document.scripts
  10. document.title

10.
  Identifying type of a variable:
  The typeof operator returns the type of a variable, object, function or expression:
  
    typeof "John"                 // Returns string
    typeof 3.14                   // Returns number
    typeof NaN                    // Returns number
    typeof false                  // Returns boolean
    typeof [1, 2, 3, 4]           // Returns object
    typeof {name:'John', age:34}  // Returns object
    typeof new Date()             // Returns object
    typeof function () {}         // Returns function
    typeof myCar                  // Returns undefined (if myCar is not declared)
    typeof null                   // Returns object  

  Please observe:
    The data type of NaN is number
    The data type of an array is object
    The data type of a date is object
    The data type of null is object
    The data type of an undefined variable is undefined

11.
  The instanceof Operator
  The instanceof operator returns true if the specified object is an instance of the specified object:

    var cars = ["Saab", "Volvo", "BMW"];
    
    cars instanceof Array;          // Returns true
    cars instanceof Object;         // Returns true
    cars instanceof String;         // Returns false
    cars instanceof Number;         // Returns false 

12.
  Spread Operator
  
  Spread operator allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in the variable array where there is more than 1 values are expected. It allows us the privilege to obtain a list of parameters from an array. Syntax of Spread operator is same as "Rest parameter" but it works completely opposite of it. 

  12.1    
    // spread operator doing the concat job 
    let arr = [1,2,3]; 
    let arr2 = [4,5]; 
      
    arr = [...arr,...arr2]; 
    console.log(arr); // [ 1, 2, 3, 4, 5 ]  

  12.2 
    // spread operator for copying  
    let arr = ['a','b','c']; 
    let arr2 = [...arr]; 
      
    console.log(arr); // [ 'a', 'b', 'c' ] 
      
    arr2.push('d'); //inserting an element at the end of arr2 
      
    console.log(arr2); // [ 'a', 'b', 'c', 'd' ] 
    console.log(arr); // [ 'a', 'b', 'c' ]