Hey Guys,

Today we are going to learn about some cool concepts of JavaScript which make it sustainable , and reliable now.

Template Literal

The template literals are the alternatives for string formatting in JS. Lets see how the normal string formatting work and how the template literal works.

Normal string

let a= 'I am ';
let name='vishnu';
 console.log(a + name);

output
>>"I am vishnu"

Template literal version we use the back tick for template literals (`)

let a= `I am` ;
let name=`vishnu`;
 console.log(`${a} ${name}`);

output
>>"I am vishnu"

Here we use $ sign along with {} to represent the variable.

Destructuring Objects/Arrays

const animal=
{
    name:'cat',
  legs:4,
  sound:'Meow'
};

console.log(animal);
const lname=animal.name;
const llegs=animal.legs;
console.log(lname,llegs);

output >>"cat" 4

//Destructured Objects

const{name,legs}=animal;
console.log(name,legs);

output >>'cat' 4

const obj = { a: 1, b: 2 };
const { one, two } = obj;
console.log(one,two);

output
>> undefined undefined

Here we could see that in the destructuring object we need to use same variable name for assigning values.

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Same goes with arrays but variable names can be our choice as the arrays doesn't have key values it has the indexes.

For of loop

In this, for loop it will iterate through the object or array by itself just by adding a small condition which is a simple text by itself.

let numbers=[1,2,3,4,5];
let sum=0;

for(let number of numbers){
sum+=number;

}
console.log(sum);

output >>15

Here we could see that we have used the for of loop to iterate through the array.

Spread Operator

In the spread operator, we can copy the array/object to another object/array by using ... Spread operator.

let array=[1,2,3,4,5]; 
array2=...array;
cosnole.log(array2);

 output >>[1,2,3,4,5]

Rest Operator

The Rest operator is used to spread the array or object into the function parameter.

function normaldisplay(num){
console.log(num);
}

normaldisplay(1);
normaldisplay(1,2,3,4);

output 
>>1
1


//Rest operator



function display(...num){
console.log(num);
}

display(1);
display(1,2,3,4);

output
>> [1]
>>[1,2,3,4]

Arrow Functions

The arrow functions are the short form of using the functions.

function add(a,b)
{
return a+b;
}
console.log(add(1,2));

output >> 3

//Arrow functions

let add=(a,b)=>a+b; 
console.log(add(1,2));

output >> 3

Default params

The default params are used when there are no arguments passed to the function.

function add(a,b=1)
{
return a+b; 
}
console.log(add(2));

Includes()

The Includes() is a function that checks if the element exists in the array.

let a=[1,2,3,4,5]; 

console.log(a.includes(1)); 
output >> true

Import & Export

The Import & Export are used to send data / Objects over files have access over all the project folders

PadStart() & PadStop()

The PadStart() & PadStop() are used to add prior and later to a string

let a='vishnu';
a.padStart(10,'u');

output >> uuuuuuvishnu    // the length is 10 and u is added at starting

let a='vishnu';
a.padEnd(10,'u');

output >> vishnuuuuuuu   // the length is 10 and u is added at ending

$$ TobeContinued $$