Introduction to Modern JavaScript
What is Modern JavaScript and Why?
JavaScript is often abbreviated as JS, and it is a most popular, interpreted programming language, on top of ECMAScript specification. It is an open source, cross platform, high-level, often just-in-time compiled, and multi-paradigm language. It is integrated with HTML, so that it is easy to implement. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.
MODERN is really subjective. i.e
1995 modern => JavaScript events
2004 modern => AJAX
2006 modern => jQuery
2010 modern => Angular 1
2012 modern =>Node JS
2014 modern =>React
2016 modern =>Angular 2
2019 modern =>Deno runtime.
JavaScript techniques are still considered as modern best practices since 1995. We are not going to cover JavaScript fundamentals in this article. But we are going to cover what are the changes have been made in modern JavaScript. Lets look into the new features one by one.
let
It allows you to declare variables and visible within the scope. i.e if we define inside a block, visible within the block only. e.g
for(i=0; i<5; i++){
let k=i
}
console.log("k is = " + k)//ReferenceError: k is not defined
if we want to use outside a block, define it outside.
let kfor(i=0; i<5; i++){
k=i
}
console.log("k is = " + k)//k is = 4
const
It is used to declare constants, objects and arrays. But it protects variables only, i.e value cannot be changed further. Eg.
const k=0 //This is constant variablefor(i=0; i<5; i++){
k=i //overriding k
console.log("k is = " + k)
}
TypeError: Assignment to constant variable.
But when we use const with objects and arrays, value can be changed.
const car = ["BMW","Lamborghini"]
car.push("ferrari")
console.log(car)function
There are several ways to define functions.
function add_1(a,b){
return a+b
}const add_2 = (a,b)=>{
return a+b
}const add_3 = (a,b) => a+bconst add_4 = a => a+a //use for single variable
What are the changes have been made to handle the object.
When key-value pair has same name then define key only, no need to assign to value side. Eg
const PI = Math.PIconst area = {
name : "circle",
PI //no need to assign value side
}console.log(area)
//{ name: 'circle', PI: 3.141592653589793 }
dynamic property
We can use dynamic value for key property. When we don’t know the key, we can use like this.
let status = "service"const vehicles = {
name : "van",
[status] : "ready"
}console.log(vehicles)
freeze
It is used to avoid to change the property value of an object. It protects only first level objects. Eg.
const person = {
name : "Kamal",
country : "Sri Lanka"
}
console.log(person) //{ name: 'Kamal', country: 'Sri Lanka' }Object.freeze(person)person.name = "Sundar"
console.log(person) //{ name: 'Kamal', country: 'Sri Lanka' }
Even though we have frozen the object, It cannot be used to protect second level or inner objects. Eg.
const person = {
name : "Kamal",
scale : {
height : "160cm",
weight : "50kg"
}
}
console.log(person) //{ name: 'Kamal', scale: { height: '160cm', weight: '50kg' } }Object.freeze(person) //freezing first level objectperson.name = "Suresh"
person.scale.weight = "60kg"
console.log(person) //{ name: 'Kamal', scale: { height: '160cm', weight: '60kg' } }
class
We can override a function using arrow function. Eg.
class class1{
m(){}
}
class subclass extends class1{
m(){}
}const c1 = new class1()
c1.m()const sub = new subclass()
sub.m()sub.m()=> console.log("") //this will override the respective class methodsub.m()
destruct
When we use constants from the same module, we can define in a single line. Eg.
const PI = Math.PI
const SQRT = Math.sqrt()//instead we can write like this
const {PI,sqrt} = Mathconsole.log(PI) //3.141592653589793
We want only few parameters of the object, in that case we can pass only the required property within the function instead of passing the object. Eg.
const square = {
base : 5,
color : "black"
}const area = ({base}) =>{
return base * base
}console.log(area(square)) //25
What are the changes have been made to handle an array.
It will skip the empty value in the array.
const [a,b,c,d] = [2,,4,5]console.log(a)//2
console.log(c)//4
console.log(d)//5
We can use ellipses(…) to get the rest of the array values. Eg.
const [mon1, ...othermonths] = ["jan","feb","mar"]console.log(mon1) //jan
console.log(othermonths) //[ 'feb', 'mar' ]
Promise
When we call a function, and it has promised to pass the results to another function, and when the results are ready, it will automatically call that function. It is called callback function. Some functions will take some time for their completion, in that case we use promise to wrap the content. Instead of using then, we can implement it with async function. await works within the async function.
Hope you all understand the javascript changes.
Happy coding.😊