Modern JavaScript

If you are an undergraduate IT student or a software engineer you may definitely met Java Script in your life at some point. May be you have done couple of projects using Java Script and other languages. So welcome you all to another article. In this article I will give a brief explanation about the modern JavaScript. Before that let’s look at the evolution of the JavaScript.

Evolution of JavaScript

JavaScript often known as JS, is one of the most popular programming language in the world. JavaScript conforms to the ECMAScript specification. When we talk about the history of the JavaScript, in September 1995, a Netscape programmer named Brandan Eich developed a new scripting language in just 10 days. It was originally named Mocha, but quickly became known as LiveScript and, later, JavaScript.

JavaScript is a dynamic computer programming language. It is lightweight and most commonly used in everywhere. It comes installed on every modern web browser. For example Chrome, Mozilla Firefox , Safari and every browser you know as of today, supports JavaScript. JavaScript engine is a computer program that executes JavaScript code. SpiderMonkey is the first JavaScript engine and it used in the Firefox browser. Google Chrome use V8 and microsoft edge use Chakra.

Once you learnt JavaScript, it helps you developing great front-end as well as back-end software using different JavaScript based frameworks. Some of the useful JavaScript frameworks and libraries are,

• Angular
• React
• jQuery
• Node.js

Modern java script features

1. Variable Scope

ES6 2015 introduced two important new JavaScript keywords. Those are let and const.

1. let is only limited to the block in which it’s declared
2. const mean that the identifier can’t be reassigned. (But there are some edge cases we will discuss that one in later)

Try whether you can execute the below code snippet without getting an error.

if you run the above code snippet you will get below out put. Line number 5 can’t be executed because a is not defined.

The reason is as I mentioned earlier let keyword is only limited to the block which is declared. So in our example a is defined inside the for loop. So we can’t access it from the outside of the for loop. So if you want to access ‘a’ outside the for loop you need to first declare that one outside the for loop.

Now check whether you can execute that code segment without getting error by replacing let with const. So if you tried you get the same error because let and const behave like same. But if you tried to replace that with var keyword you can execute the code without getting any errors because var has global scope.

2. Constant

As I mentioned previously const mean constant we can’t reassigned. But beware that arrays and objects assigned to const variables can be changed. Take a look below example.

Once you declared the array. You can modify it. So it’s prove that arrays and objects assigned to const variables can be changed. See the output below

3. Functions

So in JavaScript we can write normal functions and arrow functions. So as you can see in the below code snippet. All the below three functions are giving the same output.

But you need to clearly understand that the functions and arrow functions are not behave as same. Take a look at the below code segment. Inside the print object we have two functions. Function 1 is normal function and function 2 is an arrow function.

In normal function this keyword represent the caller of the function. But in the arrow function this key word does not represent the caller. Take a look below example for further clarifications.

Below is the output of the above code snippet. So you can see ‘this’ keyword can be used in the normal function. When we try to use ‘this’ keyword in arrow function it not worked. It’s give undefined like in the below output.

4. Objects

In JavaScript we can have objects. So in the below code snippet we have a laptop object. There are two properties and one function. Also in JavaScript we can have dynamic properties like in the below RamSize.

5. Freeze

If you use Object.freeze method the object will freeze which means after you call Object.freeze method if you try to modify the object value it will not get change. Now take a look below example. What do you think about the below code snippet out put. let’s see the output.

The output of the code snippet is shown as below. Since we calling the Object.freeze method before modify the object, the object will not get modified.

You have to remember another thing when you call Object.freeze method it will freeze only the first level values. Take a look below code snippet and the output then you will understand.

6. Classes

If you familiar with any OOP languages you have classes. So in JavaScript we can have classes like in the below. We can have constructor as well, but the thing is in Java we don’t give method name as constructor but in JavaScript we need to give like that.

7. Handling Destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. In JavaScript there are multiple ways to handle destructors. Take a look at the below example.

If you have multiple variables of same module you can write a single line as below it will give the same output as above.

Also we can use destructors as a function like in the below.

8. Promises

Promises are used to handle asynchronous operations in JavaScript. They are easy to manage when dealing with multiple asynchronous operations where callbacks can create callback hell leading to unmanageable code.

A JavaScript Promise object can be,

1. Pending : Promise is still pending which means the result is undefined.
2. Fulfilled : promised operation was successful.
3. Rejected : promised operation was unsuccessful.

So in the above code segment why do we need to wrap with a new promise? Because HTTP request takes time to go to the sever and send the response. Therefore, it’s wrapped by a promise as in the above. After fetchWebpage I have used then keyword. So then means when the promise is completed. catch is used for if there is any error print the error. Also like in Java we can use Finally keyword behave same as Java Finally keyword.

There is another way we can do it by using async functions and the wait keyword. Let’s see how it happens. Before that let’s see what is async and wait.

1. async : async makes a function return a Promise
2. await : Wait until the promise resolve. Once the promise resolve continue to the next line. await only valid inside the async function.

That’s it guys that’s the end of this article. I hope you learn about modern JavaScript features. So let’s meet from another article. Stay in touch.

References

Javascript Tutorial

JavaScript | Promises - GeeksforGeeks