DEV Community 👩‍💻👨‍💻

simc dev CSM®
simc dev CSM®

Posted on • Updated on • Originally published at cmsinstallation.blogspot.com

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

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

if (car === 'audi' || car === 'BMW' || car === 'Tesla') {
    //code
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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

if(obj && obj.tele && obj.tele.stdcode) {
    console.log(obj.tele .stdcode)
}
Enter fullscreen mode Exit fullscreen mode

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

console.log(obj?.tele?.stdcode);
Enter fullscreen mode Exit fullscreen mode

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

if (name !== null || name !== undefined || name !== '') {
    let second = name;
}
Enter fullscreen mode Exit fullscreen mode

The simple way to do it is...

const second = name || '';
Enter fullscreen mode Exit fullscreen mode

4. Shorthand for switch case to select from multiple options

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

Use a map/ object

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

5. Shorthand for functions for single line function

function example(value) {
  return 2 * value;
}
Enter fullscreen mode Exit fullscreen mode

Use the arrow function

const example = (value) => 2 * value
Enter fullscreen mode Exit fullscreen mode

6. Shorthand for conditionally calling functions

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

Simple way

(type === 'heigth' ? height : width)()
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Just Write

console.log(amount || 0); //0
console.log(value || 0); //0
Enter fullscreen mode Exit fullscreen mode

Top comments (15)

Collapse
dred profile image
Anton B

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

Collapse
mikejacobson profile image
Mike Jacobson

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

Collapse
fen1499 profile image
Fen

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
Enter fullscreen mode Exit fullscreen mode
Collapse
mikcat profile image
mikcat

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.

Collapse
balastrong profile image
Leonardo Montini

The 7th example is not entirely correct though.

You replace

if(amount === null) {
    amount = 0;
}
Enter fullscreen mode Exit fullscreen mode

with

console.log(amount || 0); //0
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
dmk1111 profile image
dmk1111
  1. in suggested option console.log will still fire with undefined but with if case it won't fire;
  2. works in this particular case. In case you have to return default value it won't work
Collapse
dannyengelman profile image
Danny Engelman

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

or even without ,

Collapse
chatbim profile image
mustapha chatbi

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 )
Image description

Collapse
ricky11 profile image
Rishi U

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.

Collapse
orliesaurus profile image
orliesaurus

good reminders always easy to forget optional chaining!

Collapse
mjcoder profile image
Mohammad Javed

Good examples - thank you. 🙌

Collapse
jacksonkasi profile image
Jackson Kasi

thank for share with us :)

Collapse
devsimc profile image
simc dev CSM® Author

Cheers

Collapse
citronbrick profile image
CitronBrick

Did not know about number 6 before. It's really cool !

Collapse
devsimc profile image
simc dev CSM® Author

Cheers

🌚 Life is too short to browse without dark mode