Modern JavaScript Every Software Engineer Must Know

JS logo

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.

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Upulie Handalage

Upulie Handalage

45 Followers

Everything in my point of view. Here for you to read on....