Exploring ES6: Modern Javascript Features

I am so excited to share with u what I learned in ES6

What is ES6 and why is used in Javascript :

ES6 stands for ECMAScript and is the sixth edition of the ECMAScript standard, It introduces new features and significant enhancements to javascript, and the reason why used ES6 features is that it provides enhanced language more powerful, and user-friendly. It provides improved ways to declare variables, write functions, work with classes, handle asynchronous operations, and improve code reusability.

let and const

These are the keywords that were used as alternatives to the var keyword for declaring a variable, let and const are block scoping but var is global scoping let is allowed to reassign but can’t be redeclared,

// reassign
let a =100;
a = 50;
console.log(a); // output:50

const can’t be changed the value of the variable and it is not allowed to redeclare, reassign the variable

// reassign
const b= 12;
function boo(){
b = 6; // it shows error 
}
boo();
// redeclare 
const k = "robert";
function greet(){
 const k ="david"; // error
}

Arrow Function

ES6 arrow function provides you with an alternative way to write a simplified syntax compared to normal function

Normal function
function add(x,y){
 return x+y; // 30
}
console.log(add(10,20));

But in Arrow function is the short way to achieve the result 
let add = (x,y) => {
  return x+y;//30
}
console.log(add(10,20));
if you did not use return then remove { } from arrow function
let sub= (a,b) => console.log(a+b);
console.log(sub(10,20));

\> In arrow function does not have an argument, new.target and property

\> It does not bind to its this and super

Classes

In ES6 class is just a function using the class keyword to define a class

class ray{
   ray(name){
    this.name = name
}
getName(){
  return name;
 }
}
let j = new ray("light");
let dark = j.getName();
console.log(dark); // light 
In the above, we have to create an object of class 
use the reference variable to call the method and return name
while creating an object automatically calls constructor

• Modules

In javascript is a file containing related code, we use export and import keyword to share and receive functionality respectively across modules, the export keyword is used to make a variable, function, class, or object accessible to other modules

First, create a new file called message.js as a module

//message.js
export let msg;
export function message(info){
  msg = info;
}

In the above code use the export keyword to access the method in other modules

then create another file called greeting.js as a module

import {message} from './message.js'
message('Hello');
console.log(msg);

use the import keyword to specify what to import inside the curly braces, which are called bindings. Then, specify the module from which you import the given bindings.

Template Literals

Template literals provide an improved way to create strings by using backticks (`.`) instead of single or double quotes. It provides an easy way to interpolate variables and expressions into strings.

let dessert= "choco";
let meal = "Biryani";
let lunch = `I'll eat ${meal} with ${dessert} ice-cream flavour`;
//I'll eat Biryani with choco ice-cream flavour

Destructuring

It is a javascript expression that allows us to extract data from array, object and map and set them into new distinct variables

function getNum(){
  return [10,20,30];
}
let [x,y] = getNum();
console.log(x);// 10
console.log(y);//20
console.log(z);//undefined

Spread Operator

Es6 introduce the spread operator allow to unpack the elements of an iterable object such as Array, map, and set the syntax of spread operator {…} consists of three dots

\> spread operator unpacks the elements of an iterable object it will be appear anywhere

\> rest operator packs the elements into the array , this operator must be appear at end

//spread operator
let a = [1,2,3];
let b = [8,9,...a];
console.log(b)//8 9 1 2 3

// rest operator
let r = [10,20,30,40,50];
let c = [a,b,c,...args];
console.log(a); // 10
console.log(b); // 20
console.log(c);//30
console.log(args);// 40 50

Promise

Promises provide a cleaner and more structured way to handle asynchronous operations in JavaScript. They represent the eventual completion or failure of an asynchronous operation and allow chaining multiple asynchronous operations.

Asynchromnous Javascript :

if one statement is not dependent by another statement example

let pizza;
function orderpizza(pizza){
setTimeout(function(){/*asynchronous function 
 pizza = "🍕";  it will not depend any statement
 return pizza;   after a complete of 1000ms set the value to pizza return it*/
},1000)
}
console.log('orderpizza');//orderpizza
orderpizza(pizza); //
console.log(`Eat ${pizza}`);//undefined

a promise is an object that encapsulates the result of an asynchronous operation.

A promise object has a state that can be one of the following:

• Pending

• Fulfilled with a value

• Rejected for a reason

function getWeather(){
return new Promise((resolve,reject,) => {
 setTimeout(function(){
    resolve('cloud');
},1000)

});
}
function Success(data){
console.log(`success:${data}`);
}
function Error(data){
console.log(`error: ${data}`);
}
getWeather().then(Success,Error); 

/*the above code to create an object Promise() 
in promise we assign asynchronous function  
getweather() function call after setTimeout() execute 
either reject or resolve can be result of promise
 and then() accept two callback function
if promise is resolve then() will execute Success function
else reject method execute Error function
*/

• then() method to schedule a callback to be executed when the promise is fulfilled

• catch() method to schedule a callback to be invoked when the promise is rejected.

• finally() method executed whether the promise is fulfilled or rejected.