What is a Modern JavaScript?
In this article, I will explain the modern javascript features and those features’ examples. Before we staring Javascript modern features we want to know what is javascript and its history.
What is javascript?
JavaScript was initially created to “make web pages alive”.
Javascript is known as a scripting language for web pages. If you are a software developer you might know about the frontend and backend (JavaScript can execute not only in the browser but also on the server). In both, we have to use javascript when the need for the web pages of the applications. It’s a light weighted programming language. And it also prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented.
The programs in this language are called scripts. They can be written right in a web page’s HTML and run automatically as the page loads. Those scripts are provided via plain text.
There are many frameworks having javascript and libraries, For example;
Angular, React, jQuery,Vue.js, Node.js, Backbone.js, and so on.
Why is it called JavaScript?
When JavaScript was created, it initially had another name: “LiveScript”. But Java was very popular at that time, so it was decided that positioning a new language as a “younger brother” of Java would help.
But as it evolved, JavaScript became a fully independent language with its own specification called ECMAScript, and now it has no relation to Java at all.
History of Javascript
JavaScript is arguably one of the most important languages today. This scripting language is created by Brenden Eich in 1995, while he is working on Netscape to work with their flagship browser “Netscape Navigator”. In early stages it was named “Mocha” and then “LiveScript” and then later changed to JavaScript. Most of are think that java and javascript are same . It’s wrong. Simply says that java!=javascript
JavaScript has become the de-facto standard programming language of the Web, not only because of its first-mover advantage, but because it is open, standardized, and, most importantly a very good language; well-suited to the Web with its dynamic nature and tight integration with the DOM.
ECMA Script
ECMAScript as defined here is not intended to be computationally self-sufficient; indeed, there are no provisions in this specification for input of external data or output of computed results.
ECMAScript Version 6 was the major version released in 2015. introduced significant changes. It’s a advanced feature of Javasript. This ECMA script having new features ;
What are the new features
- Variables
In early ES6 javascript define the variable as keyword “var” can access the outside the block as well. But later on, the ES6 new keyword will be introduced that was “let”. It can’t access the outside of the block. If we use the same “let” variables name in another function, it won’t be mixed up and doesn’t give unexpected results too. So it’s a very advanced feature.
for( var j=0; j<10; j++){
var k= j;
console.log(" Counting numbers"+j);
}console.log("k value"+k);
For the above example “var” keyword using to implement the program. The output will be shown 1- 9 numbers as ordered because the “var” variable can access the outside block.
Counting numbers 0
Counting numbers 1
Counting numbers 2
Counting numbers 3
Counting numbers 4
Counting numbers 5
Counting numbers 6
Counting numbers 7
Counting numbers 8
Counting numbers 9
k value 9If we change the “var” keyword into “let”, to define the variable. The output will be showing like this;
console.log("k value "+ k);
^ReferenceError: k is not defined
So can’t access using the “let” keyword to the outside block.
let k=0;But if define k =0 outside the block, the output will be shown the 1–9 numbers and the k value.
Another keyword “const” functionality is the same as “let” functions.
const k=0;for( var j=0; j<10; j++){k= j;console.log(" Counting numbers " +j);}console.log("k value "+ k);// output:
k= j;
^TypeError: Assignment to constant variable.
If we run this code, the output will be shown like this. if we define the variable using the “const” keyword can’t be assigned another value for the same variable.
Based on the above examples to generate a rule is ;
If using the “let”, “const” keyword to define the variable inside the object that variables can’t be visible outside the object.
Let’s see another example;
const food ='Pizza';food = 'Briyani'console.log(food);
Above the code, the food variable can be defined as using the “const” keyword. For that, the value cannot be change(constant).
If we change the code using an array;
const food =['Pizza','Briyani'];
food.push('submarine');console.log(food);
The output will be [ ‘Pizza’, ‘Briyani’, ‘submarine’ ]. For that using array and push method to add the constant variable values.
So, the “const” keyword-only protecting a variable which is not object/ array
2. Functions
From ES6 onwards JS introduced new arrow functions, its use for declaring a function. In the early stages the function is declared like this;
var sum = function(a, b) {
return a + b;
}
console.log(sum(7, 12));with the introduction of the arrow function, it can define the function in some different way. Using the arrow function is to connect the functions and the function body easily.
const sum = (a, b) => a + b;console.log(sum(7, 12));
This method can simple forever. However, this arrow function is most important to the javascript. Let be an example of arrow function ;
const TotalSum = (a, b) => {const result = a + b;console.log('Answer: ' + result);return result;}const sum = TotalSum(6, 4);// output Answer: 10
When we run the above program the output will like this.
Lets we have to see another keyword “this” regarding with arrow function method.
const amount = {
getAmount: function(){
console.log("Using Function : ")
console.log(this)
},
getAmountUsingArrow: ()=>{
console.log("Using Arrow Function : ")
console.log(this)
}
}
amount.getAmount()
amount.getAmountUsingArrow()when we run the program the output will like this.
As we see above example, getAmount is a normal function. The “this” keyword represents the caller of the function. So that output will be shown in the getAmount function. But the arrow function getAmountUsingArrow does not represent the caller using this keyword.
3. Objects
Let’s take a simple example to explain object handling in javascript.
let SQRT2= Math.SQRT2;const employees = {boss: 'Michael',secretary: 'Pam',sales: 'Jim',accountant: 'Oscar',attendence(){},work: ()=>{},//[status]: "work completed", // dynamic propertiesSQRT2}console.log(employees)
The above code tells that employee details will be assigned in employees object. Inside the object, there is a normal function (attendance) and the arrow function (work) is written.
We can derive two important aspects from this code
1. Above code example is shown like this;
We have to define the SQRT2 value as outside the object. But when we declare it inside the object the value cannot be changed.
2. Dynamic properties
let status ="Availability"If we declare the status as the outside the object and
[status]: "work completed", // dynamic propertiesInside the object, the status comment will be added. This output will be shown like this;
Don’t make confuse that. It simply says if we need multiple key values for several functions in such situations using the place holder to assign a desirable key in a runtime.
And sometimes when you have to call the “Object. freeze()” method, js given the functionality that stop the modifying value.
4. Class
In JavaScript, a constructor function is used with the new key keyword when creating an Object. The function that uses a “new” keyword that function act as the class.
Constructor function
A function that is being used to create an object, is called a Constructor Function. Lets we see the how constructor function is work in javascript
Class syntax
ES6 has newly introduced the class syntax feature in javascript. Let’s see the example to understand the class syntax.
Callback and Promises
JavaScript is strictly speaking synchronously. but if behaving asynchronously. when dealing with asynchronous code, meaning code that doesn’t execute immediately like web requests can be tricky. JavaScript gives us two ways out of the box to handle asynchronous behavior:
- Callbacks
- Promises
Call back
This means the functions are being passed to an async task, and on completion, the function will be executed. It is passed as an argument to any asynchronous function.
asyncFunction(callback1);
console.log('asyncFunction called');// Call when asyncFunction completes
function callback1(error) {
if (!error) console.log('asyncFunction complete');
}When seeing the above code, doesn’t consider the asyncFunction takes time to execute. But in certain that callback1 will run at some point in the future. Therefore, the console output would be as follows.
asyncFunction calledasyncFunction complete
A single callback will be attached to a single asynchronous function. In some times we have to pass a lot of nested callbacks to a sequence of an asynchronous task. By nesting asynchronous functions, introduce a callback hell.
firstFunction(args, function() {
secondFunction(args, function() {
thirdFunction(args, function() {
// And so on…
});
});
});For the above example, each subsequent callback takes an argument from the previous callbacks. Its given pros as well as cons. Example, for that sequence, makes the code structure looks like a pyramid, creating difficulties to read and maintain.
For these drawbacks, the promises would be introduced.
Promises
ES6 was introduced promises later on period. It provides clear syntax and structure. It’s more readable than callbacks and does not result in a callback-hell. Simply says a promise is an object that is being returned from async tasks.
Let’s take an example of promises;
These are the differences between callbacks and promises.
The ES6 new advanced features help to build an application very effectively. If you want to know more details go through these links
