What is new on JavaScript?
Little Bit of History
JavaScript is a scripting language created by Brenden Eich while he is working on Netscape to work with their flagship browser “Netscape Navigator”. First, it was named “Mocha” and then “LiveScript” and then later changed to JavaScript because at that time Netscape is working with Sun Microsystems to find a solution to break the monopoly of Internet Explorer dominance in the internet browsers market and work in web browsers compatible with Java. But Java != JavaScript.
JavaScript basically designed as a core language for creating websites alongside HTML and CSS on the client-side and JS provides the interactivity and the dynamic of the website. Originally it was designed to run on the client-side with the NodeJS now it has gained the capability of running as a backend as a server-side language too.
What is ECMAScript?
Due to the use of the flexibility of JavaScript using in the client-side, different vendors tend to reverse and start using a different version of JavaScript with the growth it has to be maintained. in 1997 Netscape handed over to the European Computer Manufacturers Association (ECMA) to create a standard for the language specification.
ECMAScript Version 6 was the major version released in 2015. introduced significant changes.
Let’s Now Discuss what are some of the major changes brought to the JavaScript ecosystem from ES6.
What is New?
Variables
Before ES6 JavaScript block variables defined using “var” can be accessed even outside the block as well. But with the ES6 JS introduced the “let” keyword, and all the variables defined using the “let” keyword cannot access outside the block.
{
var x = "Hello"
}console.log(x) //Access is possible{
let y = "World";
}console.log(y) //undefined - Access is impossible
The next update of the ES6 is the “const”. The “const” makes a variable unmodifiable simply a constant. But the specialty is that it only makes constant if it is not an array or object. Let’s look at an example
const x = "Hello World!";x = "Hello Earth";
In the above scenario, the developer cannot change the content of the variable to “Hello Earth” because it is a constant.
But when it comes to the objects.
const greetingMessage = class greeting{
constructor(){
this.firstLine = "Hello"
this.secondLine = "World"
}
}greetingMessage.firstLine = "Hello"
greetingMessage.secondLine = "Earth"
And for arrays.
const categories = ["Horror", "Documentry", "Thriller"]
categories.push("Mystery")Modifications are possible even though it declared as “const”
Functions
From ES6 onwards JS introduced new arrow functions, it’s a simple way of declaring a function. The traditional way of declaring a function is like this.
function getTotalPrice(qty, price){
return price * qty;
}But with the arrow functions, lets the developer define a function in a few different ways.
let totalAmount = (qty, price) =>{
return price * qty;
}let price = totalAmount(5, 100)
And this method can make simple even further
let totalAmount=(qty, price) => price * qty;
let price = totalAmount(5, 100);If the method has an operation that has only one parameter arrow function provides a convenient way of writing the method in one similar as below.
let totalAmount = qty => 100 * qty;
let totalPrice = totalAmount(5);However, when using the arrow function there is an important thing to consider. let’s get into the example
const item = {
getItem: function(){
console.log("Using Function : ")
console.log(this)
},getItemUsingArrow: ()=>{
console.log("Using Arrow Function : ")
console.log(this)
}
}item.getItem()
item.getItemUsingArrow()
When we run the above program the output will like this.
As we can see when we use the “this” keyword in the simpler way of function, it refers to the object that the function is called from. (item). But when using the arrow function it always does not refers to “this” as the caller of the function.
Objects
JavaScript provides the ability to define objects in a key, value approach, First, let’s look at a class example and discuss what’s new brought by to JS classes in ES6
If we look closely at the “date” field inside the class it does not have a value assigned, it is because if the developer wants to point out an existing defined variable it does not need to have a value. Same as in the previous example the date attribute inside the class will refer to the variable declared above let date = new Date()
And the next new thing JS brought to objects with ES6 is the dynamic properties. In the example, above we can see a field enclosed with square brackets as [info] act as a placeholder. Those are identified as dynamic properties where the filed name can be injected dynamically, to change the field name
info = "Review"and the “[info]” will be replaced as “Review” this will happens in the runtime and used mostly when the key value in execution time.
When it comes to object modification these values can be changed freely like this.
Book.author = "Dan Brown"But sometimes developer might need to not let the values be changed. JS comes with a method called “Object.freeze()” to stop modifying the object. Here how it works.
Object.freeze(Book)Then any modification we apply to the Book object won’t apply. But in this Book example, we have an inner class called the “Publisher”. Inner classes are not protected by just freezing the outer class. to protect the outer class, the freeze method can apply as below.
Object.freeze(Book.Publisher)Class
When it comes to the JS classes and object it follows a somewhat similar approach to the other static typed languages.
And for making value unpacking easier from arrays, objects into distinct variables separately JS introduced “Destructors”. And destructors can use in multiple usages as examples.
Importing a library or external module,
const {writeFile} = require("fs")Unpacking values from an array
[elementOne, elementTwo, ...otherElements] = [39, 43, 63, 10, 66];Here in the above example what happens in it will assign the first two values into accordance with the first two variables(“elementOne”, “elementTwo”) and after that, the “otherElements” declared with three dots. in destructors, it assigns all the values after “43" into a separate array called “otherElements” as below.
elementOne = 39
elementTwo = 43
otherElements = [ 63, 10, 66 ]These destructors can be applied also to the classes too.
const book = {
name: "Inferno",
author: "Dante Alighieri", Publisher : {
name : "Noonday Press",
origin: "MI, ITALY",
}
}const { name, author } = book;
how the variables have initialized as below
name = "Inferno"
author = "Dante Alighieri"Callbacks and Promises
Functions in JS are regularly executing in a synchronous way, where one function has to wait while the other finishes its job. But JS provides an asynchronous way of working where other tasks do not have to wait till other functions finished execution.
The callback function is used to achieve this asynchronous behavior by capable of passing a function as an argument into another function and run after when the one function finished its execution. Here’s a sample callback function
function greetings(name, callback) {
console.log("Hello " + name + "!, Have a nice day!" )
callback();
}greetings("John", function() {
console.log("Inside the callback function")
});
The next main thing is the Promises. it is an object which represents the completion of a task is complete or not. Promise has three states,
- pending: initial state, neither fulfilled nor rejected.
- fulfilled: meaning that the operation was completed successfully.
- rejected: meaning that the operation failed.
Here’s an example of creating an asynchronous API consumption process.
References
Modern JavaScript from the Begining Part 01- https://www.youtube.com/watch?v=Jc2iW4yVv38
Modern JavaScript from the Beginning Part 02 -
https://www.youtube.com/watch?v=XK_lB5-XzhQ&
