JavaScript Shorthand Techniques You must use

    Mar 12, 2020       by Pankaj Kumar
javascript-shorthand-techniques-a-developer-must-know.jpg

JavaScript is an extremely versatile language, And No doubt, It is one of the most popular web technology today. It has completely changed the world of web development. You can code on client-side(frontend) application using Angular, server-side application using Node.js and also the cross-platform apps using React Native.

In this article, I am going to discuss Javascript Shorthand Techniques which an experience developer must know to improve his/her coding standard. 

If true … else Shorthand

It is a very common statement we use while coding.

// Longhand

let child;
if (age < 10) {
    child = true;
}
else {
    child = false;
}

//Shorthand

let child = age < 10 ? true : false;

 

Assignment Operators Shorthand

These are used to assign values to javascript variables.

// Longhand

counter = counter - 1;
a=a+1;
b=b*10;
 

//Shorthand

counter --;
a++
b*=10;
 

 

IF Checks Assignment

When the value is of boolean type, it can be directly checked with if statement.

// Longhand
if (trueStatus === true)
if (trueStatus === false)


// Shorthand
if (trueStatus)
if (!trueStatus)

 

For Loop

// Longhand
let fruits = ['Apple', 'Mango', 'Banana', 'Grapes']
for(let x = 0; x < fruits.length; x++){
   console.log(fruits[x])
}


// Shorthand
let fruits = ['Apple', 'Mango', 'Banana', 'Grapes']
for(let fruit of fruits){
   console.log(fruit)
}
 

 

Undefined, Null,  Empty Checks Shorthand

// Longhand
if (var1 !== null || var1 !== undefined || var1 !== '') {
  var var2 = 10; // assigned default value
}
// Shorthand
var var2 = var1  || '';
 

 

Concatenation with Spread Operator

Spread Operator can be used in many scenarios to make the code more short, clean and efficient.

// Longhand
let fruits = ['Apple', 'Mango', 'Banana']
let fruits2 = ['Orange'].concat(fruits) // concatenate


//shorthand
let fruits = ['Apple', 'Mango', 'Banana']
let fruits2 = ['Orange', ...fruits] // used spread operator for concatenation

 

Cloning with Spread Operator

// Longhand
const fruits =  ['Apple', 'Mango', 'Banana'];
const fruits2 = fruits.slice()

// Shorthand
const fruits =  ['Apple', 'Mango', 'Banana'];
const fruits2 = [...fruits];

 

Declaring variables

//Longhand
let x;
let y;
let z = 3;

//Shorthand
let x, y, z=3;

 

Template Literals

JavaScript Template literals are the Literals or Strings allowing Expression in between them. These are enclosed inside two back-ticks (&#96;) and the expressions start with $ sign and then are enclosed in curly braces {}.

//Longhand
const welcomeMsg = 'You have logged in as ' + firstName + ' ' + lastName + '.'

//Shorthand
const welcomeMsg = `You have logged in as ${firstName} ${lastName}`;
 

 

Conclusion

These are very helpful techniques that can improve the code and makes it more efficient, clean and shorter.

Click here to find  Sample Applications on different frameworks of Javascript.

Let me know your thoughts over email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

javascript techniques

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS