fbpx

9 JavaScript Tricks to speed up your coding

#1. Default Parameter Values:

In JavaScript we can pass default value to a parameter in function definition that can help to reduce a few number of lines.

// Looooooong way
function xyz(b, c, a) {
  if (!a) {
    a = "singhak";
  }
  // TODO
}

At below code we pass default value to the parameter. The default value will be used when no value pass for this parameter.

// Short way
function xyz(b, c, a = "singhak") {
  //TODO
}

#2. Short Circuit Evaluation

We can use our logical operator OR (||) and AND (&&) to avoid any unnecessary if-else check.

// Looooooong way
let age, year;
if (year) {
  age = year;
} else {
  age = 30;
}
// Short way
let age, year;
age = year || 30

Like OR operator we can use AND operator to avoid some if-else

// Looooooong way
let age, year = 1
if (year) {
  age = 30;
}
// Short way
let age, year = 1
age = year && 30; // age = 30 

#3. Merging

There are several way to merge array Each way has there own prone and cons.

// Looooooong way
let cars = [1,2,3,4];
let num = ['c','a','r','s']
// cloning
let a = cars.slice();
// merging
let canum = cars.concat(num);
// Short way
let cars = [1,2,3,4];
let num = ['c','a','r','s']
// cloning
let a = [...cars];
// merging
let canum = [...cars,...num];

We can use spread operator on object also

car = {'h':1, 'M':2}
bike = {'H':3,'D':4}

bica = {...car, ...bike, 'HP':5}

#4. Destructuring:

Using this feature of JavaScript we can write elegant and more readable code.

let about = {
  name:'Singhak',
  age:'30',
  location:'India',
  place:'Earth',
  education:'Graduate',
  status:'engaged'
}

// normal way
function aboutYou(about) {
 `I am ${about.name} and age is ${about.age} lived in ${about.location}.`
}
// better way

function aboutYou({name, age, location}) {
  `I am ${name} and age is ${age} lived in ${location}.`
 }
//OR
 function aboutYou(about) {
   const {name, age, location} = about
   `I am ${name} and age is ${age} lived in ${location}.`
 }
 let about = ['singhak', '30','India']

 //Long way
 let name = about[0]
 let age = about[1]
 let location = about[2]

 // Short way

 const {name, age, location} = about

#5. Convert String to number:

//Normal way
let num = "1232";
num = parseInt(num);

// better way

num = +num;
// OR
num = num * 1;

#6. Converting To Boolean:

Many time we want to convert string, number, undefined or null value to boolean.

s = "singhak";
n = 0;
u = undefined;

!!s; // true
!!n; // false
!!u; // false

#7. Object Property Shorthand:

let x = 10;
let y = 3;
// normal way
let obj = {x:x,y:y} //{x: 10, y: 2}
console.log(x,y) //10,2

// Better way
let obj = {x,y} //{x: 10, y: 2}
console.log({x,y}) //{x: 10, y: 2}

#8. Optional Chaining (?.):

This is a new feature of JavaScript 2020 which helps to access the value of an object without checking the object is undefined of null.

// normal way
let user = {} // without any name property
if(user.name.lastname) {
console.log(user.name.lastname) 
}
//Better way
console.log(user?.name?.lastname) //undefined#9.

#9. Nullish coalescing operator (??):

This is also a new operator. It help to assign a default value if value is null or undefined

function sum(a,b) {
a = a ?? 10;
b = b ?? 20;
return a+b
}
 sum();

These are my learning of JavaScript. As I will learn more trick, I will update this. Use above tips and take benefit of it.