Modern JavaScript

Source: https://madasamy.medium.com/

This article will discuss very important concepts that every developer, software engineer or architect should know. Despite that, if you are a java developer, a PHP developer or any developer who is coming from a different stack, you must know modern javascript concepts. So in this article, it describes the important features in modern JS with some examples.

Javascript is a most popular scripting language that used in both server-side and client-side application. It is based on ECMA (European Computer Manufacturer’s Association) which is responsible for defining standards for scripting languages. It is mostly used in web application development. In the early years javascript not play a very important role in development as it contains some drawbacks. But after 2015, ECMA was able to do some modifications and released a new version of javascript and it was a very good one. After that every year they update the javascript and these updated versions of javascript known as the modern javascript. Let’s go in deep what are the fundamental of these changes.

💡 let

If you use the keyword let in your code to define a variable, it means that variable only visible to its scope. Scope means if you define it inside a method, it only belongs to that particular method, if you use it inside a for loop, that variable belongs to that loop only and if you define a variable inside a class that variable only belongs to that class, outside its scope, you cannot access that variable. See the following code example.

Ex 01: — variable without a let keyword

for(var i=0; i<10; i++){
var k=i;
console.log("->->->" +i);
}
console.log("last value for i ="+i);
console.log("inner value for k ="+k);

Output values are:

->->->0
->->->1
->->->2
->->->3
->->->4
->->->5
->->->6
->->->7
->->->8
->->->9
last value for i =10
inner value for k =9

Ex 02: — variable with a let keyword

for(var j=0; j<10; j++){
let p=j;
console.log("->->->" +j);
}
console.log("last value for j = "+j);
console.log("inner value for p = "+p);

Output values are:

->->->0
->->->1
->->->2
->->->3
->->->4
->->->5
->->->6
->->->7
->->->8
->->->9
last value for j = 10
E:\LP_Training\ModernJS\1-scope.js:13
console.log("inner value for p = "+p);
                                   ^
ReferenceError: p is not defined

As we use variable p as let and then it throws a ReferenceError saying “p is not defined”. This is very important when you are writing a lengthy code. Because the code is lengthy, there may be a possibility to use the same name for the variable. In such a scenario, you may get unexpected results because changing the variable and become very messy when the time you debugging your code. So in this type of situation defining variable using let is very important. Because it guarantees that it is not visible outside of its scope.

💡 const

const also like that it also not allow to access in outside of its scope. But the additional feature that it has is, it can protect the variable from changing its initial value and it works as a constant. You will understand it when looking at the following example.

Ex01: —

for(var i=0; i<10; i++){
const k=i;
console.log("->->->" +i);
}
console.log("last value for i ="+i);
console.log("inner value for k ="+k);

Output values are:

->->->0
->->->1
->->->2
->->->3
->->->4
->->->5
->->->6
->->->7
->->->8
->->->9
last value for i =10
E:\LP_Training\ModernJS\2-const.js:6
console.log("inner value for k ="+k);
                                  ^
ReferenceError: k is not defined

It doesn’t allow access from outside its scope.

Ex02: — When you are using const variable without initializing it

const k;
for(var i=0; i<10; i++){
k=i;
console.log("->->->" +i);
}
console.log("last value for i ="+i);
console.log("inner value for k ="+k);

Output values are:

const k;
      ^
SyntaxError: Missing initializer in const declaration

It throws SyntaxError saying that “Missing initializer in const declaration” It means if we are defining a variable using the const keyword, it should declare at that moment.

Ex 03: — Assigning value to the const variable after its declaration

const k=0;
for(var i=0; i<10; i++){
k=i;
console.log("->->->" +i);
}
console.log("last value for i ="+i);
console.log("inner value for k ="+k);

Output values:

k=i;
      ^
TypeError: Assignment to constant variable.

If we are trying to assign a value to the const variable after its declaration, it throws TypeError mentioning Assignment to constant variable. It has the ability to protect the variable. But it is not protecting an array or object. See the following example.

Ex04: —

const city = 'Kalutara';
city='Colombo';
console.log(city);

Output values:

city='Colombo';
    ^
TypeError: Assignment to constant variable.

But if we use the city as an array. It doesn’t work like that.

Ex05: — Assigning values to the const array

const town=['Gampaha', 'Galle'];
console.log(town);
town.push('Matara');
console.log(town);

Output values:

[ 'Gampaha', 'Galle' ]
[ 'Gampaha', 'Galle', 'Matara' ]

It is not protecting the array.

💡 Arrow Function =>

🔥 Rule 01: — In modern JS the notation “=>” behave like a function keyword. What it does is connected the function and function body without a function keyword. It has several ways to define a function and the following example represents each and every type.

Ex01: —

Output values:

200
200
200
100
Hello John

Now you can see, without the function keyword, arrow “ =>” works like a function.

🔥Rule 02: — function and arrow function do not behave the same way. It has different working patterns. The following example describes how “this” keyword behaves in these two situations.

Output values: Let’s see the output and then discuss about their behaviours.

this is function1 { function1: [Function: function1], function2: [Function: function2] }
this is function2 {}

What happened there is if the function is a normal function this keyword represents the caller of the function and print the entire function inside it. But if the function is an arrow function it doesn’t represent the caller. This is a little confuse among most developers. They just write an arrow function and use this keyword inside it and expecting output as a normal function.

💡 Object

🔥 Rule 01: — Javascript object allows developers to define only a key or value inside the object. It doesn’t require key-value pair. Instead of that, you can call another module to assign a value for that. See the following example and then you can get a clear idea about that.

Ex01: —

Output values:

{
  make: 'Mitsubishi',
  p1: 120,
  p2: 240,
  drive: [Function: drive],
  stop: [Function: stop],
  SQRT2: 1.4142135623730951
}

Now you can see its output value to the SQRT2 too. It gets value from the outer module called “Math”.

🔥Rule 02: — you can create a dynamic property inside an object in modern JS. Dynamic property means you can keep a placeholder as a key if you don’t know exactly how the key behaves in the execution time. In the developing time, developers don’t know what the key behaves in execution time as it is highly dynamic. At that time developer can use a placeholder for the key. See the following example.

Ex02: —

Output values:

{
  make: 'Mitsubishi',
  p1: 120,
  p2: 240,
  drive: [Function: drive],
  stop: [Function: stop],
  order: 'ready',
  SQRT2: 1.4142135623730951
}

Now you can see its output order: ‘ready’ for the placeholder that we make in the developing time. You can change the value of the key by assigning different values to the placeholder [status]. (Try let status = “service” then you can see the difference).

💡 freeze

🔥 Rule 01: — As it reveals in its name, it can freeze the object. It means it avoids the changing value of the object. See the following example and you can see the difference.

Ex01: — Let’s see a simple code example without a freeze keyword.

let obj ={'country':""};
obj.country="Sri Lanka";
console.log(obj);
obj.country="England";
console.log(obj);

Output values:

{ country: 'Sri Lanka' }
{ country: 'England' }

It changes the value of the object.

Ex02: — Let’s see the same code example with the object.freeze() method.

let obj ={'country':""};
obj.country="Sri Lanka";
Object.freeze(obj);
console.log(obj);
obj.country="England";
console.log(obj);

Output value:

{ country: 'Sri Lanka' }
{ country: 'Sri Lanka' }

See the output. It didn’t change the value of the object. Application of this freeze keyword is thinking you have one object that going through the many services and you don’t want to change the value of that object, so you can use Object.freeze() for that.

🔥 Rule 02: — Be sure that if you use freeze in the multi-level object, it only freezes the first level values. Let’s explain it using an example.

Can you imagine what would be the output. Let’s check whether your output is the same as the real output.

{ name: 'Rose', price: { t1: 15, t2: 20 } }
{ name: 'Rose', price: { t1: 20, t2: 20 } }

See the output. It only freeze the name only. But it changed the value of t1. The reason is that t1 is an inner level or the second level variable. Therefore freeze not affects the inner level variables.

So, here I have discussed few fundamental concepts in modern javascript. I think you get a clear idea about that. See you in the next article. I’ll describe more concepts in the next article…

Stay Safe & Learn New Things!!! 😃

References