Modern JavaScript Every Software Engineer Must Know
JavaScript often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time (JIT) compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.
The word “modern” when it comes to technologies is really subjective. For JS, 1995 modern - was JavaScript events, in 2004 - modern was AJAX, in 2006 - modern was jQuery, in 2010 - modern was Angular 1, in 2012 - modern was Node JS, in 2014 - modern was React, in 2016 - modern was Angular 2 in 2019 - modern was the Deno runtime.
This being said, JavaScript techniques from 20 years ago are still considered modern best practices.
JavaScript is created using ECMA as the syntax which could be considered as its building block. Here are few things every JavaScript Enigineer MUST know.
- The difference between var and let.
for(var i = 0;i<10;i++){
var k=i;
console.log(“>>> “+i);
}
console.log(“last value “+i); //prints 10
console.log(“inner value “+i); //prints 9
However,
changing the second line to let k = i; will give a runtime error. Therefore, using let guarantees that a certain variable is made invisible outside of its scope.
On the other hand, using const k = i; will also give out the same error. Using const k; on top of the loop to define will also not work as you have to initial a const in its declaration.
2. Const on a non-variable (such as an object or array) works fine
const city =”Colombo”;
city =”Colombo”; // error
However,
const city =[”Colombo”,”Galle”];
city.push(”Colombo”); // works fine as its an array
console.log(city);
3. arrow functions
function area(x,y){
return x*y;
}
const area2 = (x,y)=>{ //an arrow function
return x*y;
}
const area3 = (x,y)=>return x*y; //same function
const area4=x=>x*x;
console.log(area(10,12));
console.log(area(10,12));
console.log(area(10,12));
console.log(area(10));
4. functions and arrow functions don’t behave the same
A typical function represents the this keyword of a function. But an arrow function does not.
const print={
function1: function(){
console.log(“this is function 1 ”,this));
},
function2: ()=>{
console.log(“this is function 2”,this);
}
}
print.function1(); //this is function 1 {function1:[Function: function1], function2: [Function: function2]}
print.function2(); //this is function 2 {}
5. Object handling in modern JS
let SQRT = Math.SQRT2;
const vehicle={ // a standard object with key-value pairs inside
make:”Mitsubishi”,
p1:100, //a key-value pair
p2:200, //a key-value pair
drive(){}, //a function
stop:()=>{}, //an arrow function
//[status]:”ready”, //a dynamic property
SQRT //can use a variable from outside (is equal to SQRT:SQRT)
}
console.log(vehicle); //uncommenting the dynamic property gives error “status is not defined”. But if you define a variables as status=”order condition”, the error will be fixed.
Simply put, if the key of a certain key-value pair is going to be dynamic, then it could be saved in a variable. Eg: To save a record based on the customer id.
6.
let obj = {“country”:””};
obj.country=”Sri Lanka”;
console.log(obj); //Sri Lanka
obj.country=”USA”;
console.log(obj); //USA
let obj = {“country”:””};
obj.country=”Sri Lanka”;
//Object.freeze(obj); //Freezing the object stops it from changing its value
console.log(obj); //Sri Lanka
obj.country=”USA”;
console.log(obj); //Sri Lanka
This could be used to freeze a value when a certain variable is passed from one function to another etc.
let flower={
name:””,
price:{
t1:10,
t2:20
}
}
flower.name=”rose”;
flower.price.t1=15;
console.log(flower); //{name: ‘rose’, price:{t1:15,t2:20}}
Object.freeze(flower);
flower.name=”Violet”;
flower.price.t1=18;
console.log(flower); //{name: ‘rose’, price:{t1:18,t2:20}}
Object.freeze() only changes first level. It does not freeze deeper levels.
7. Printing values from inside an object
const person={
fname:john”,
lname:”doe”,
age:30,
country:”USA”
}
let intro=`congrats ${person.name}`;
console.log(intro);
8. OOP concepts
class Employee{
constructor(name){
this.name = name; //no need of a local variable
}
banner=()=> console.log(this.name + ‘ is an Employee’);
}
class Manager extends Employee{
constructor(name, section){
super(name);
this.section = section;
}
banner=()=> console.log(this.name + ‘ is an Employee’);
}
const e1 = new Employee(“Brian”);
const e2 = new Manager(“Chriss”, “QA”);
e1.banner(); //Brian is an Employee
e2.banner(); // Chriss is an Employee an manager of QA
e2.banner()=>console.log(“this function is overriden”); //this function is overriden
e2.banner();
9. imports
//option 1 for imports
const PI=Math.PI
const SQRT2=Math.SQRT2
//option 2 for imports
const {PI,SQRT}=Math
10. value passing
const square = {
base:12.2,
id:”main”,
color:”blue”,
line:true,
rounded:false,
round:0
}
const area = ({base})=>{ //only the property is passed inside
return base*base;
}
console.log(area(square))
const area2= ({base},{round=3}={})=>{
return (base*base).toFixed(round); //for rounding up
}
console.log(area2(square));
11. function imports
//import option 1
var fs=require(‘fs’);
fs.writeFile(‘sample2.txt’,’Hello JS!!’, function(err){
if(err) throw err;
console.log(‘Saved!’);
});
//import option 2
const {writeFile}=require(‘fs’);
writeFile(‘sample2.txt’,’Hello JS!!’, function(err){
if(err) throw err;
console.log(‘Saved!’);
});
12. rest operator
//skipping in array option 1
const [jan,feb,march,,may]=[10,20,30,40,50]; //4 variables 5 values (40 will be skipped and 50 will be assigned to may)
console.log(jan); //10
console.log(may); //50
//skipping in array option 2 (rest operator)
const [month1, …otherMonths]=[10,20,30,40,50];
console.log(month1); //10
console.log(otherMonths); //20,30,40,50
let newArray= […otherMonths]; //copying the values of otherMonths to newArray
let new2=[…otherMonths,newArray]
console.log(newArray); //10,20,30,40,50
console.log(new2); //10,20,30,40,50,10,20,30,40,50
13. rest use to eliminate
const data={
name:”Brian”,
city:”NY”,
country:”USA”,
age:48,
vehicle:”ford”,
game:”baseball”
}
let {vehicle,game, …person}=data; //to extract separate values from an object
console.log(person); //rest is assigned to the person object
const person2={
…person //copy the values inside one object to another object
}
console.log(person2)
Thanks for reading. Until next time! 👋🏽
References
