Common Shorthand Techniques in JavaScript

Declaration of variables

// Longhand
let x = 1;
let y = 2;

// Shorthand
let x = 1, y = 2;

Assigning values to multiple variables

// Longhand 
let a = 1;
let b = 2, c = 3;
// Shorthand
let [a, b, c] = [1, 2, 3];

Ternary operator

// Longhand 
let marks = 7;
let result;
if(marks >= 3.5){
result = 'Pass';
} else {
result = 'Fail';
}
//Shorthand
let result = marks >= 3.5? 'Pass' : 'Fail';

Assigning default value

// Longhand 
let imagePath;
let path = getImagePath();
if(path !== null && path !== undefined && path !== '') {
imagePath = path;
} else {
imagePath = 'default.jpg';
}
// Shorthand
let imagePath = getImagePath() || 'default.jpg';

Short circuit evaluation

// Longhand 
if (isLoggedin) {
goToHomepage();
}
// Shorthand
isLoggedin && goToHomepage();

The AND(&&) short circuit shorthand is more useful in React when you want to conditionally render a component. For example:

<> { this.state.isLoading && <Loading /> } </>

Swap two variables

let x = 'Hello', y = 55; // Longhand 
const temp = x;
x = y;
y = temp;
// Shorthand
[x, y] = [y, x];

Arrow Function

// Longhand 
function add(num1, num2) {
return num1 + num2;
}

// Shorthand
const add = (num1, num2) => num1 + num2;

Template Literals

// Longhand 
console.log('You got a missed call from ' + number + ' at ' + time);
// Shorthand
console.log(`You got a missed call from ${number} at ${time}`);

Multiple condition checking

// Longhand 
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
// Execute some code
}
// Shorthand 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
// Execute some code
}
// Shorthand 2
if ([1, 'one', 2, 'two'].includes(value)) {
// Execute some code
}

Object Property Assignment

let firstname = 'Abhay'; 
let lastname = 'Jain';
// Longhand
let obj = {firstname: firstname, lastname: lastname};
// Shorthand
let obj = {firstname, lastname};

Repeat a string multiple times

// Longhand 
let str = '';
for(let i = 0; i < 5; i ++) {
str += 'Hello ';
}
console.log(str); // Hello Hello Hello Hello Hello
// Shorthand
'Hello '.repeat(5);

Exponent Power

// Longhand 
const power = Math.pow(4, 3); // 64
// Shorthand
const power = 4**3; // 64

Double NOT bitwise operator

// Longhand 
const floor = Math.floor(6.8); // 6
// Shorthand
const floor = ~~6.8; // 6

Max and Min number in an array

// Shorthand 
const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2

For loop

let arr = [10, 20, 30, 40]; //Longhand 
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// Shorthand
// for of loop
for (const val of arr) {
console.log(val);
}
// for in loop
for (const index in arr) {
console.log(`index: ${index} and value: ${arr[index]}`);
}

Merging of arrays

let arr1 = [20, 30];// Longhand 
let arr2 = arr1.concat([60, 80]);
// [20, 30, 60, 80]
// Shorthand
let arr2 = [...arr1, 60, 80];
// [20, 30, 60, 80]

Get character from string

let str = 'jscurious.com'; // Longhand 
str.charAt(2); // c
// Shorthand
str[2]; // c

--

--

--

Developer with 3 yrs of industrial experience in developing scalable web applications.

Love podcasts or audiobooks? Learn on the go with our new app.

Spread and Rest

Building my First Chatbot from Start to Finish in Three Weeks

My Favorite Programming Quotes

Ember — the good, the bad and the ugly

Chart.js vs D3.js

MEAN — async package vs callbacks vs promises

Mongoose

Learning Java after Javascript: Bubble Sort

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
Abhay Jain

Abhay Jain

Developer with 3 yrs of industrial experience in developing scalable web applications.

More from Medium

Javascript, my love/hate story

Special Concepts about JavaScript & MongoDB

Function Buzzwords in Javascript

Understand the JavaScript Execution Mechanism Thoroughly This Time