Shorthand Examples

1. Declaring Variables

Lets you declare multiple variables at once.


//Longhand 
let x = []; 
let y = 20; 
let z = "shoe";

//Shorthand 
let x = [], y = 20, z = "shoe";

2. Assigning Multiple Variables

Lets you quickly assign 1 or more values to 1 or more variables.


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

3. Conditional Operator

Lets you condense an if then else then statement into a single line.


let marks = 68;

//Longhand
let result; 
if(marks >= 70){
 result = 'Pass'; 
}else{ 
 result = 'Fail'; 
}

//Shorthand 
let result = marks >= 70 ? 'Pass' : 'Fail';

4. Filter for Bad Data

Lets you check for null, undefined, and blank value before setting a variable.


//Longhand 
let shoeNumber; 
let shoes = numberOfShoes(); 
if(shoes !== null && shoes !== undefined && shoes !== '') { 
  shoeNumber = shoes; 
} else { 
  shoeNumber = 'default.jpg'; 
} 

//Shorthand 1
let shoeNumber = numberOfShoes() || 'default.jpg';

//Shorthand 2
let shoeNumber = numberOfShoes() ?? 'default.jpg';

5. Swap Two Variables

Lets you swap the values of two variables without a temporary variable for storage.


let rightShoes = 0, leftShoes = 55; 

//Longhand 
const temp = rightShoes; 
rightShoes = leftShoes; 
leftShoes = temp; 

//Shorthand 
[rightShoes, leftShoes] = [leftShoes, rightShoes];

6. Template Literals

Lets you concatinate without concatinating... hmmmmm...


//Longhand 
console.log('You saw a(n) ' + animal + ' at ' + location); 

//Shorthand 
console.log(`You saw a(n) ${animal} at ${location}`);

7. Multi-Line String

Using backticks instead of single quotes lets you use return to declare new lines.


//Longhand 
console.log('line 1 \n' +             
'line 2 \n' + 
'line 3');

//Shorthand 
console.log(`line 1
line 2
line 3`);

8. Faster Value Matching

Lets you match multiple values at once using an array instead of ||.


//Longhand 
if (value === 1 || value === 'one' || value === 2 || value === 'two') { 
    // Number your shoes 
} 

// Shorthand 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) { 
   // Number your shoes 
}

// Shorthand 2
if ([1, 'one', 2, 'two'].includes(value)) { 
   // Number your shoes 
}

9. Automatically ParseInt(Float)

Lets you use + instead of parseInt or parseFloat.


//Longhand 
let total = parseInt('23'); 
let average = parseFloat('23.45'); 

//Shorthand 
let total = +'23'; 
let average = +'23.45';

10. Easier Exponents

Lets you declare an exponent with **.


// Longhand 
const power = Math.pow(4, 5); // 1024

// Shorthand 
const power = 4**5; // 1024