Simc Dev

Posted on Aug 4, 2022 • Updated on Oct 3, 2022 • Originally published at cmsinstallation.blogspot.com

Change your old methods for writing a JavaScript Code - Shorthand's for JavaScript Code

#javascript #webdev #beginners #programming

1. Shorthand for if with multiple OR(||) conditions

if (car === 'audi' || car === 'BMW' || car === 'Tesla') {
    //code
}

In a traditional way, we used to write code in the above pattern. but instead of using multiple OR conditions we can simply use an array and includes. Check out the below example.

if (['audi', 'BMW', 'Tesla', 'grapes'].includes(car)) {
   //code
}

2. Shorthand for if with multiple And(&&) conditions

if(obj && obj.tele && obj.tele.stdcode) {
    console.log(obj.tele .stdcode)
}

Use optional chaining (?.) to replace this snippet.

console.log(obj?.tele?.stdcode);

3. Shorthand for checking null, undefined, and empty values of variable

if (name !== null || name !== undefined || name !== '') {
    let second = name;
}

The simple way to do it is...

const second = name || '';

4. Shorthand for switch case to select from multiple options

switch (number) {
  case 1:
     return 'Case one';
  case 2:
     return 'Case two';
  default:
     return;
}

Use a map/ object

const data = {
  1: 'Case one',
  2: 'Case two'
};
//Access it using
data[num]

5. Shorthand for functions for single line function

function example(value) {
  return 2 * value;
}

Use the arrow function

const example = (value) => 2 * value

6. Shorthand for conditionally calling functions

function height() {
    console.log('height');
}
function width() {
    console.log('width');
}
if(type === 'heigth') {
    height();
} else {
    width();
}

Simple way

(type === 'heigth' ? height : width)()

7. Shorthand for To set the default to a variable using if

if(amount === null) {
    amount = 0;
}
if(value === undefined) {
    value = 0;
}
console.log(amount); //0
console.log(value); //0

Just Write

console.log(amount || 0); //0
console.log(value || 0); //0

Top comments (15)

Anton B • Aug 4 '22

On 6th example i would rather use it in that way
type === 'heigth' ? height() : width()

it is more clear for me and for other i guess, and can be passed different arguments to functions

Mike Jacobson • Aug 7 '22

I agree. It also makes it easier to do a global search for all places where those functions are invoked.

Fen • Aug 4 '22

7th example can be written with ??. The difference is that values that evaluate to false would pass but if you use || they don't

Example:

false ?? 0 // false
false || 0 // 0

mikcat • Aug 6 '22

Be careful if you refactor switch by object, because switch uses strict uses strict comparison ===.

console.log(data['1']); will return 'Case one' but switch('1') will jump to the default branch.

Leonardo Montini • Aug 4 '22

The 7th example is not entirely correct though.

You replace

if(amount === null) {
    amount = 0;
}

with

console.log(amount || 0); //0

But if amount is undefined, it will not enter your if, but still undefined || 0 returns 0.

In short, you can't replace === null with the || operator as the behaviour is slightly different.

dmk1111 • Aug 6 '22

in suggested option console.log will still fire with undefined but with if case it won't fire;
works in this particular case. In case you have to return default value it won't work

Danny Engelman • Aug 6 '22

'Audi,BMW,Tesla,Daf,Volkswagen'.includes(car);

or even without ,

mustapha chatbi • Aug 8 '22

this would be a good trick if used just on typescript where car has to have enum type that allows only mentioned car brands
and here is why ( counter example on js )

Rishi U • Aug 7 '22

2nd Example optional chaining will return undefined if console.log like that, you would probably need to do use a ternary instead if you didn't want to print undefined.
but thanks for this.