Modern Javascript — Part 1

Javascript is a light-weighted language which is easy to implement and has minimum features. So, this scripting language is mostly used with the client-side web development. Such as to generate the user interacted pop-up windows, message alerts and etc.

Javascript is based on ECMA (European Computer Manufacturer’s Association) which makes standards for scripting language. In 2015 is there recent release and thereby Javascript has become more useful in web development with its new features and functions.

ECMA introduces latest 2 versions of javascript versions known as ECMAScript 5 (ES5) and ECMAScript 6 (ES6). Let’s have small comarison over these 2 areas.

So in this article we are no going to discuss about the very basics of Javascript but some more important concepts that you must know. Basically, we are discussing here about some commands or keywords.

🔥 let

• When you use let keyword with your code, that means it is not visible to the outside of scope.
• Ex: Have a look on below code. In here, is I ask the value of “i and k”, you will say respectively k=4 and i=5. But the results is not that.

The output:

In here you can see that, it prints values of i and relevant Last Value. But it provides an error for k as k is not defined. The reason is,

💡Rule: you are accessing k outside from the for loop and you are not allowed to do that because of behavior of let key word.

Therefore, be careful when you use let keyword in your script. Because you may have same variable in different places of your lengthy script. Therefore, if you use let with out concerning the scope, you will definitely get run-time errors.

🔥 const — constant

• Now, I use above code and change led into const.

The result is same as previous one.

Then I got ‘k’ out from the for loop and define it.

Again I got an error like below 💁. So, it says me to initialize my const variable ‘k’.

Then I initialized it as below and still I got an error. The array showed that TypeError because we can not assign values for the constant variables.

But, let’s use the const with array. So I created an array with one city as below and it return this value as below.

When we push another 2 cities in Sri Lanka called ‘Kandy’ and ‘Colombo’ to the array, it creates expected results as below.

So why is this. At the beginning we could not assign any single value for constant variable outside the loop after we declare it in inside our for loop. But array allows to add value even it is constant (const). Let’s see the reason in below.

💡Rule: const is protected only if the variable is not an object or array.

🔥 Arrow functions

We can create arrow functions in different ways as below.

• The first way: Use function keyword and create function to calculate area.
• The second way: we do not use function keyword. Instead of that we define a variable to get area. You cans see here, an arrow is connecting our function and function body.
• The third way: We can write a function as below. In here we do not have curly braces.
• The forth way: In our function if we take only one argument, we can write as below.
• The fifth way: If you want to print something on console related with function you can do it in this way.

I mentioned about each way in below code snippet and have a look on the result also.

Let’s see another case of arrow function.

The output:

You can see that when we use ‘this’ with the normal function, it prints its normal output as well the whole function. Because, if it is not an arrow function, then it does not represent the colon through ‘this’ keywork. When you use colon, that means you are not doing that from the outide.

🔥Modern Javascript Object Handling

In modern JS allows to have only a key to sits with object even is we do not mentioned any value for that. Please, have a look on below code and get the idea.

The Output:

You can see that, we have gain a proper output even for SQRT key without mentioning any value for that. Because, at the out of object scope, we have assign value for this SQRT key through another module called “Math”.

Sometimes, you may need to define key-value pairs which you do not know about its state at the beginning. In such cases, we need to specify the dynamic key-value pair inside our object as follows.

The output:

Now it says the status of order service is ready. So, you can change the values for this key at any time.

🔥freeze (Fun right 😜 freeze with fire here.. 😅)

freeze is the keyword which we can use to make our object values not-changeable.

Here, we have a object which has Laptop key. Then I assigned the values and print it.

The output is:

Now I use the freeze key word. As its name, when we us freeze, any body can not change the state of our created object. But it will only valid for upper level variables but not lower level variables.

The output:

Now you see that it does not change after we calling freeze here. That means, if you have object which it go through different services but you does not need to change it, then you can use the freeze() to make your object stable.

But, we have another scenario with the freeze().

Let me do some modification on this program and see what will happen.

The output:

Now, you will see, the name of brand does not change after we called the freeze() here. But, the price has changed.

💡Rule: The second level objects does not get freeze by the freeze.object().

Therefore, be careful when you use the freeze() with your application. Otherwise, others will be able to change it.

So, I hope you can get a valuable idea about the keywords that we have discussed in this article. In my next article we will discuss more about some modern Javascript concepts. Until then,

Stay Safe !!!

References:

ES5 vs ES6 - javatpoint