Modern JavaScript

Let talk about what are things changed and evolved in JavaScript.

Different between var, const, let

1. inside the for loop

- here you can get the answer like this for var

- Let’s check with let

-> here k is not defined

-> if we use the keyword let to define variable that’s mean variable is not usable outside the scope.

let’s check with const

->value is printed here.

-> inner value is not defined(k).

2.What happen when put the top of the loop

— >

const K;

for(){

K=1}

=> here missing initialization in const declaring.

What happen if you assign the value to K,

-> const K=0;

for(){

K=1}

=> it will tell you can assign the value to K because it’s a constant.

=> but what happen if we use let here it will work perfectly even beyond the scope.

Let’s check const =>

const city =’colombo’;

-> can’t change the const value.

Array in const->

1 -> const city =[‘Galle’, Colombo’];

console.log(city);

outout => [‘Galle’, Colombo’];

2. what happen if we add one more value to this array->

const city =[‘Galle’, Colombo’];

push.cit(‘Gampaha’);

console.log(city);

outout => [‘Galle’, Colombo’,’Gampaha’];

* Here const is only protecting a variable which is not object or array.

function->

function area(x,y){x

return x*y;

}

arrow function ->

const area2 =(x,y)=>{

return x*y;

}

const area3 =(x*y)=>x*y;

const area4=x=>x*x; // this is also the one of the valid format to write function with the one argument.

Even we can write statement in one line and without need of {} but for one argument

const =a5=x=>console.log(“Input” + x);

console.log(area(10,12); =>120

console.log(area2(10,12); =>120

console.log(area3(10,12); =>120

console.log(area4(5); =>25

a5(“hi”); => Input hi

Do you think function and arrow function behaving in a same way? The answer is NO.

//Normal function

const print ={

function 1: function(){

console.log(‘this is function 1,this);

},

//Arrow function

function 2 =>{

console.log(‘this is function 2,this);

}

}

print.function1(); => its printer entire function ,which mean here this keyword represt the colan.

print.function2(); => {}

*Modern JS how handle the objects.

let SQRT=Math.SQRT2; -> if we define any variable like these or taking variable from other modules. so, you don’t have to have the value inside of this

1)

SQRT = SQRT:SQRT2

const vehicle={

make:”BMW”,

p1: 100, p2:200,

drive(){},

stop: () =>

// [status]:”ready”, //dynamic properties

SQRT2

}

console.log(vehicle;

2)

if we enable status=>

let SQRT=Math.SQRT2;

const vehicle={

make:”BMW”,

p1: 100, p2:200,

drive(){},

stop: () =>

[status]:”ready”, //dynamic properties

SQRT2

}

console.log(vehicle;

output> stust is not defined.

3)

let SQRT=Math.SQRT2;

let status = “Order condition”

const vehicle={

make:”BMW”,

p1: 100, p2:200,

drive(){},

stop: () =>

[status]:”ready”, //dynamic properties

SQRT2

}

console.log(vehicle;

=> objects and say order condition is ready.

eg:2)

let SQRT=Math.SQRT2;

let status = “Service”

const vehicle={

make:”BMW”,

p1: 100, p2:200,

drive(){},

stop: () =>

[status]:”ready”, //dynamic properties

SQRT2

}

console.log(vehicle);

=> objects and say service ready.

dynamic properties => you can have the place holder as a key if you don’t know what the key would be at the execution time.

So whatever come in the dynamic property that will pass into the status.

Freezinglet obj ={“country” : “ “};

obj.country=”Sri Lanka”;

//Object.freeze(obj)

obj.country=”USA”;

console.log(obj);

output=> {country: ‘Sri Lanka’};

{country: ‘USA’};

Now let remover the comment…..

Freezinglet obj ={“country” : “ “};

obj.country=”Sri Lanka”;

Object.freeze(obj)

obj.country=”USA”;

console.log(obj);

output=> {country: ‘Sri Lanka’};

{country: ‘Sri Lanka’};

*Once you freeze the value will not change.

Lets check this template

let flower={

name:””,

price:{t1:10, t2:20

}

}

flower.name=”rose”;

flower.price.t1=15;

console.log(flower);

object.freeze(flower);

flower.name=”Chrysanthemum”;

flower.price.t1=18;

console.log(flower);

output => {name:’rose’,price:{t1:15,t2:20}}

{name:’rose’,price:{t1:15,t2:20}}

Here you can see name didn’t change but price changed that’s means its only change the first level value. That does not freeze inner level/ second level.

Template in JavaScript

At the stimulate we can replace the original value from objects. That’s mean you can replace the word.

Classes in JavaScript

In java we use class name as constructor here we use constructor keyword.

Can pass the argument directly into the main class constructor.

We can override the function when calling time. We may have function in a class, but we can override the function here.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store