Important JavaScript shorthands you should know as a developer to save your time Part-1

The Ternary Operator

This is you can use instead of if, else statements to reduce the code lines in javascript.

The traditional way of if, else:

const x = 220;
let answer;

if (x > 100) {
    answer = "greater than 100";
} else {
    answer =  "less than 100";
}

With Ternary Operator

const answer = x > 100 ? "greater than 100" : "less than 100";

not only a single if-else statement but also you can write nested if-else with this Ternary operator.

const answer = x > 10 ? "greater than 10" : x < 5 ? "less than 5" : "between 5 and 10";

Short-circuit Evaluation Shorthand

when assigning a variable value to another variable you may want to make sure that the source variable is not null, empty, or undefined in order to overcome unexpected errors. for this, you can use a traditional if, else statement or you can write this with a single line of code.

The traditional way to do it:

if (variable1 !== null || variable1 !== undefined) {
     let variable2 = variable1;
}

Shorthand :

const variable2 = variable1  || 'new';
let variable1;
let variable2 = variable1  || 'bar';
console.log(variable2 === 'bar'); // prints true

variable1 = 'foo';
variable2 = variable1  || 'bar';
console.log(variable2); // prints foo

Declaring Variables Shorthand

If we want to declare two variables and assign one value to another variable at the same time we normally do like this.

let x;
let y;
let z = 3;

But we can do it like this to save our time.

let x, y, z=3;

Object Property Shorthand

es6 is providing a good way of organizing objects. If the variable name and key name are equal you can take advantage of shorthand notation.

Traditional way:

const x = 1000, y = 2000;
const obj = { x:x, y:y };

With shorthand method:

const x = 1920, y = 1080;
const obj = { x, y };

Implicit Return Shorthand

the return keyword is to return a final result of a function. But arrow functions with a single statement will return the value implicitly in order to reduce the usage of return key words you should make sure to omit the ({}).

function multiplyByThree(a) {
  return a*3
}
const multiplyByThree = a => (
  a * 3;
)

Template Literals

To concatenate few variables to a string we normally use + mark but sometimes we get tired of it when we have more variables to use in a single string. if you are able to use es6 then you are very lucky because es6 provides an easier way of doing it using backticks and enclose your variables with ${}.

const welcome = 'You have logged in as ' + firstName + ' ' + lastName + '.'

shorthand:

const welcome = `You have logged in as ${firstName} ${lastName}`;

Spread Operator Shorthand

The spread operator is introduced in es6. It has several use-cases where it makes javascript code more efficient. it can be used as a replacement to some array functions too which is a series of three dots.

The traditional way to join and cloning arrays.

// joining arrays
const even= [2, 4, 6];
const nums = [1 ,3 , 5].concat(even);

// creating a copy of arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()

with spread operator.

// joining arrays
const even= [2, 4, 6];
const nums = [1 ,3 , 5, ...even];
console.log(nums); // [ 1 ,3 , 5, 2, 4, 6 ]

// creating a copy of arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

Here you have an advantage using the spread operator over the Concat function. It is you can use the spread operator anywhere you want to combine the array into another array.

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

Conclusions

I hope you have got some knowledge about javaScript shorthand and would be used it in your further coding. I will explain more shorthand in the coming stories. Thank you for reading