Javascript - Modern Concepts

 Modern Java Script

Variables & Block Scopes

• const vs let
• const - reference is constant - cant be reassigned
• const PI = 3.414; 
• PI = 3.3 // will give error
• the content of object or array can however change

const is good for defining scalar values & function. 

• var vs let
• var is visible of block scope
• let is not visible outside the block scope

• block scope vs function scope
• differs how var behaves
• function scope: var doesn't leak out
• block scope: available outside the block scope

Arrow Functions

behaves more predictably with closures.

An arrow function doesn't care who calls it but a regular function does.

regular function: the this keyword is bound to the caller ( changes at runtime)

arrow function: bounds the this keyword to the this object at the time its defined. "it closes over the this value at the time it was defined"

  

Object Literals

const obj = {} // simplest object

const mystery = dynamic_prop;

const InverseOfPI = 1 / Math.PI;

const obj = {

  p1: 10, p2: 20, // integer

    f1() {},        // function

    f2: () => {}    // arrow function

    [mystery]: 42,  // Dynamic Property , first evaluates [mystery] so this becomes a dynamic property

    InverseOfPI,    // Auto initialised as the name matches

};

Deconstructing and Rest/Spread

Object Destructuring

object destructuring : Useful when we want to extract only a few properties of a bigger object.

// const PI = Math.PI;

// const E = Math.E;

// const SQRT2 = Math.SQRT2;

const {PI, E, SQRT2} = Math;

Object Destructuring (Arguments) as passed to a Function.

const circle_30 {

    radius: 30,

    label: 'circle',

};

const calculateArea = ({radius}, {precision = 2} = {}) => ( PI * radius * radius ).toFixed( precision );

// First assignment gives a default value of 2. Second assignment makes it optional argument. 

calculateArea(  circle_30 ); // only property radius will be picked.

VERY useful for names arguments instead of functional arguments.

Array Destructuring

const [ first, second, , fourth ] = [ 10, 20, 30, 40 ]

//rest operator

const [ first, ...restOfItems ] = [ 10, 20, 30, 40 ] // gives

first = 10

restOfItems = [20, 30, 40]

Destructure Object into new Object & Array into Array

const data = {

    t_1: '001',

    t_2: '002',

    first_name: 'John',

    last_name: 'Doe',

}

const {temp1, temp2, ...person} = data;

const new_array = [...restOfItems] // creates a copy of the array ( shallow copy )

const new_person = {...person} // creates a copy of the object ( shallow copy )

Template Strings

Strings that are defined with the back-tick character `

Can be used as template with dynamic values

Support Dollar Sign Curly braces notation ${dynamic_value}

Supports multiple lines, not supported by supported by standard strings.

const greeting = "Hello "
const answer = ' All good '

const html = `<div>${Math.random{}}</div>`;

Classes

Promises & Async/Await

a promise is an object that might deliver data at a later point in the program.

example - web fetch api available in some browsers.