DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
simc dev CSMยฎ
simc dev CSMยฎ

Posted on

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 (26)

Collapse
 
mayallo profile image
Mohamed Mayallo • Edited on

8. Shorthand to remove duplicates from array

Array.from(new Set([1, 2, 3, 1, 2]))
Enter fullscreen mode Exit fullscreen mode

9. Shorthand to conditionally insert a key/value in an object

let isTrue = false;
let obj = {
    name: 'hello',
    ...(isTrue && { age: 30 })
}
console.log(obj)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
h_sifat profile image
Muhammad Sifat Hossain

Thanks for the number 9. I already knew 1 to 8 but I never thought of using number 9 method.

Collapse
 
jonrandy profile image
Jon Randy • Edited on

The two examples on number (3) are not equivalent. In more ways than one.

Other examples are also suffering similarly. Within each example, the code snippets should ideally be functionally equivalent in order to make a fair comparison.

Collapse
 
corscheid profile image
Corey Scheideman

If an arrow function looks too long on one line, just use parens or curly brackets.

// returns undefined
const logSomething = () => {
  console.log('Something')
}

// returns string
const getValue = (isX) => (
  isX ? 'x' : 'not x'
)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
leob profile image
leob

What is it with this if(amount === null) { syntax where people are omitting the space between the if and the (? I'm getting the impression that it's a trend, I see it more and more. Is it because "if()" is being seen as a function, or something?

 
corscheid profile image
Corey Scheideman • Edited on

What do you mean "more common"? I see the form of what I've put here in my previous comment very very often. And in my opinion, pound for pound, it's really not much less readable than

// returns undefined
function logSomething() {
  console.log('Something')
}

// returns string
function getValue (isX) {
  return  isX ? 'x' : 'not x'
}
Enter fullscreen mode Exit fullscreen mode

Although I'll admit, that I personally never use

function foo() { /* ... */ }
Enter fullscreen mode Exit fullscreen mode

or

function() { /*...*/ }
Enter fullscreen mode Exit fullscreen mode

inline inside of outer statements, but rather more often as standalone functions.

 
corscheid profile image
Corey Scheideman • Edited on

Oh I see, fair point. I was thinking of JS in particular.

From my experience in Python,

foo = lambda x: print(x)
Enter fullscreen mode Exit fullscreen mode

is indeed exceedingly rare compared to

def foo(x):
    print(x)
Enter fullscreen mode Exit fullscreen mode

I guess because the former is probably just not "Pythonic". Inline lambda functions in python are imo ugly and much less readable because of their syntax and just not as typical as inline arrows are in JS, for good reason. I think these Python lambdas are only really supposed to be for quick and cheap one-liners where the function only runs a single statement and/or returns the value of it.

Collapse
 
codingjlu profile image
codingjlu

I've been JavaScripting for a long time, but some things you said were invaluable. I love the conditional function one; I can't believe I've never thought of that before! The multiple condition one is also brilliant. Thank you!

Collapse
 
h_sifat profile image
Muhammad Sifat Hossain

Nice tips. But I've a question about the number 1 (though I use it sometimes in my code). Seems like for every check it'll create a new array. Is that inefficient?

Collapse
 
kodikos profile image
Jodi Winters

Yes, but not likely for that reason. I did a quick crude benchmark and Firefox runs the includes-style check at almost 10x slower. Chrome runs them even slower, which is a point that implementations vary. You don't want to run code like that in a tight loop! I ran an extra check with the array creation outside the loop, it didn't improve speed by much. So it's not so much the creation of the new array, I suspect that can be optimised by runtime code compilers - it'll be the looping and checking in the includes method that takes time. I also use it in code, but I'll have to be mindful of where I use it. Alas, many shorthands are actually quite poor for optimisations.

Collapse
 
h_sifat profile image
Muhammad Sifat Hossain

Thanks for the benchmark result. I'll also try to be mindful about it.

 
corscheid profile image
Corey Scheideman • Edited on

All good. Makes sense :)

Hah! Yeah, I saw the term "Pythonic" thrown around in the Python community for a while. I particularly remember seeing it a fair bit on Stack Overflow in response to whenever someone posted something super hacky that would be fine in whatever language but there's a more natural and readable solution built into Python for better simple elegance or something like that.

Collapse
 
adam_cyclones profile image
Adam Crockett

4 would crash on a default case?

Collapse
 
kodikos profile image
Jodi Winters

No, it should return null. It would only crash if data didn't exist or wasn't an object. But in this case it's under your control so very unlikely. I don't know if strictmode modifies that behaviour, though. If you wanted default to return another value, when accessing it you would borrow from no. 3, i.e. data[num] || 'defaultValue'

Collapse
 
adam_cyclones profile image
Adam Crockett

Then I argue that, switch is for finite cases where all answers are known and default with no value being provided is an antipattern of switch which an object has no equivalent

Thread Thread
 
kodikos profile image
Jodi Winters

It might if it's a Map, but the code would be so fugly you might as well use a switch :D

Collapse
 
ebonydomingue13 profile image
Ebony Dominguez

Thank you! Very useful tips. I am just starting to work with JavaScript, so this information is very valuable for me. In addition, I am now getting acquainted with various projects that use this language to see how it works in the system. Of the latter, I would like to mention SlotoGate. It was interesting

Collapse
 
adam_cyclones profile image
Adam Crockett • Edited on

Type heigth detected ๐Ÿค–

Ironically that was meant to say Typo ๐Ÿ˜‚

Collapse
 
varshithvhegde profile image
Varshith V Hegde

Awesome tips ๐ŸŽ‰

Collapse
 
fruntend profile image
fruntend

ะกongratulations ๐Ÿฅณ! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up ๐Ÿซฐ

Collapse
 
devsimc profile image
simc dev CSMยฎ Author

Thanks Man

Collapse
 
maame_afia profile image
Maame Afia Fordjour

Wish I knew these earlier. Thanks!

Visualizing Promises and Async/Await ๐Ÿคฏ

async await

โ˜๏ธ Check out this all-time classic DEV post