Modern JavaScript

LET VS CONST VS VAR

• var → function scope
• let and const → block scope
• value assigned to a const variable can't be changed later in program.

                    
var a = "Avail Every where";
{ // this is starting of a block
    let b = "Avail in block only";
    console.log(a);
    console.log(b);
} // this is ending of a block
console.log(a); 
console.log(b); // give error
                   
               

Template Literals (Template Strings)

• `` and ${ } syntax is used here.

JavaScript program to print table for given number (8)

                      
let tableOf = 8;
for(let num = 1; num <= 10; num++) {
    console.log(`${tableOf} * ${num} = ${tableOf * num}`);
}
                   
               

Default Parametrs

• Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.

                   
function mult(a, b = 5){
return a * b;
}
console.log(mult(3)); // prints 15
                   
               

Destructuring

• The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, onto distinct variables.

                               
const myBioData = ['vinod', 'thapa', 26];

// normally and lengthy way
// let myFName = myBioData[0];
// let myLName = myBioData[1];
// let myAge = myBioData[2];

// using destructuring method
let [myFName , myLName, myAge] = myBioData;
console.log(myAge);

// we can add values too 
let [myFName, myLName, myAge, myDegree = "MCS"] = myBioData;
console.log(myDegree);
                       
                   

                       
const myBioData = {
    myFName = 'vinod',
    myLName = 'thapa',
    myAge = 26
}
let age = myBioData.age;
let myFName = myBioData.myFName;

let {myFName, myLName, myAge, myDegree = "MCS"} = myBioData;
console.log(myLName);
                       
                   

Fat Arrow Function

Normal way of writing function

                            
function sum() {
    let a = 5; b = 6;
    let sum = a + b;
    return `The sum of the two number is ${sum}`;
}
console.log(sum());
                   
               

Converting above funtion to Fat Arrow Function

                   
const sum = () => `The sum of the two number is ${(a = 5) + (b = 6)}`;
console.log(sum());
                   
               

Spread Operator

                   
const colors = ['red', 'green', 'blue', 'white', 'black'];
const myColors = ['red', 'green', 'blue', 'white', 'black', 'yellow', 'gray'];
                   
               

• Now if we will add more colors in 'colors' array then we also have to add same colors in 'myColors' array.

Now instead we can use spread (...)

                   
const colors = ['red', 'green', 'blue', 'white', 'black'];
const myFavColors = [...colors, 'yellow', 'gray'];
                   
               

ES7 features

                       
const colors = ['red', 'green', 'blue', 'white', 'black'];
console.log(colors.includes('green')); // true
                       
                   

                                
console.log(2**2);
                       
                   

ES8 features

                   
String padding
Object.values()
Object.entries()

const message = "my name is vinod";
console.log(message);
console.log(message.padStart(5));
console.log(message.padEnd(10));


const person = { name: 'Fred', age: 87 };

// console.log( Object.values(person) );
const arrObj =  Object.entries(person);
console.log(Object.fromEntries(arrObj));
                   
               

ES2018

                         
const person = { name: 'Fred', age: 87, degree : "mcs" };
const sPerson = { ...person };

console.log(person);
console.log(sPerson);
                   
               

ES2019

                   
Array.prototype.{flat, flatMap}
Object.fromEntries()
                   
               

ES2020

                       
let oldNum = Number.MAX_SAFE_INTEGER;
// console.log(oldNum);
// console.log( 9007199254740991n + 12n );
const newNum = 9007199254740991n + 12n;
                       
                   

                   
console.log(newNum);
console.log(typeof newNum);                    
                   
               

                   
const foo = null ?? 'default string';
console.log(foo);