Code Cleanup, Modern Javascript, One Liners in your FrontEnd frameworks 2022

Before jumping into article, I have interivew questions on javascript, react and vue that I was asked during my transitioning. Check them if you are preparing for frontend interview that includes javascript, react and vue.

Interview questions 2022 basic javascript

Javascript Interview Questions 2022

React interview questions that I came across in 2022

Vue basic interview questions 2022

Most important thing, give a follow if this didn’t waste your time and enjoyed it and a clap and comment if my articles help you OR things that you didn’t find here.

Most important thing, give a follow if this didn’t waste your time and enjoyed it and a clap and comment if my articles help you OR things that you didn’t find here.

1. Using ?? instead of || null coalescing operator (??)

We generally use || to validate. But incase, if you want to send empty string OR zero instead of default value || fails in the javascript.

That’s where null coalescing operator comes into picture.

if you check the example,

Incase of (||)
empty string
OR
0 (zero)
OR
null
OR
undefined

NA is returned.

But when ?? used only under the condition of undefined OR null NA is returned.

let currentValue = '' OR currentValue = 0; OR currentValue = undefined ; OR currentValue = null;
let cloneValue = currentValue || 'NA'

console.log(cloneValue) // NA

//INSTEAD WE CAN USE ??
let currentValue = '' OR currentValue = 0
let cloneValue = currentValue ?? 'NA'

console.log(cloneValue) // '' OR 0

let currentValue = undefined OR let currentValue = null;
let cloneValue = currentValue ?? 'NA'

console.log(cloneValue) // NA

2. Optional chaining

The way you check the nested object if the previous value exists or not is called guard.

Let see the example

const event = {
  eventData: {
    id: 'IDD'
     ...
     ...
  }
  ...
  ...
}

// Traditionaly way to print id

if(event && event.eventData && event.eventData.id){
  console.log(event.eventData.id)
}

// Here event.eventData has a guard event and event.eventData.id has event.eventData as guard

the Optional Chaining way

const event = {
  eventData: {
    id: 'IDD'
     ...
     ...
  }
  ...
  ...
}

console.log(event?.event.eventData?.event.eventData.id) // IDD

const event = {}
console.log(event?.event.eventData?.event.eventData.id) // undefined

3. Dynamic calling

function some(){
  console.log("this is some function");
}

function none(){
  console.log("none is greater function");
}

let number = 3

if(number > 3) {
  none();
}else{
  some();
}

//INSTEAD WE CAN DO

(z>3 ? none : some)();

4. Generate Random color

const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;

5. While working on the POC or when your API is not ready, you need some kind of dummy data to test your code or to develop.

Simple way is to use fill() for the array

let people = new Array(10).fill({name: 'Rob', id: 224});
console.log(newArray); 
// returns[
//  {name: 'Rob', id: 224}
//  {name: 'Rob', id: 224}
//  {name: 'Rob', id: 224}
//]

6. lastIndexOf() method

The lastIndexOf method returns the position/index of the last occurrence specified value in the array/string.

if not found then it returns -1 and it is case sensitive.

Just incase if you have missed, following are the stories that I have written. Check them out if you are learning javascript OR preparing for interviews.

Just incase if you have missed following are the stories that I have written. Check them out if you are learning javascript OR preparing for interviews.

Interview questions 2022 basic javascript

Javascript Interview Questions 2022

React interview questions that I came across in 2022

Vue basic interview questions 2022