JavaScript can do that? (shorthand techniques)

Do more with JavaScript shorthand techniques.

Wibodha Dhanik Alkegama
Jan 20 · 4 min read
Image by Alltechbuzz from Pixabay

JavaScript is one of the most popular programming languages, and sometimes knowing shorthand techniques in JavaScript could improve your code and do more with less. In this post, I’m going to talk about some of these shorthand techniques.

These techniques might make your code look neat and tidy, but it could compromise the readability for some users, especially a junior dev might struggle to understand what’s going on, so use them wisely, KISS.

So let’s dive in;

Convert a value to a boolean

This conversion is based on ‘Truthyness” or “Falsyness” of the value.

This is pretty much like the DoubleNot operator as shown above. But I think it’s cleaner and easier to understand. It’s just as fast as (!!).

Convert numeric strings and null to numbers

The easiest way to do is by adding the Unary Operator + in front of the string. The stringwill be converted into an integerif it's in the right format. Not a very well-known trick, maybe because it tends to confuse the reader.

Number()👍🏽 is the most readable and easier to understand. You can also use (*1) but, I feel it just a bit messy.

Convert a value to a string

The most popular way to do a string conversion is to usetoString(), but now we can use template literals.

Concatenation

We can use template literals for concatenation. It gives you the ability to create multiline strings and expression interpolation.

Arrays & Objects with the Spread operator

When you want to copy an array or an object, you can use the spread operator (…). This creates a shallow copy of the array/object, just like Array.prototype.slice() / Object.assign(). However, this isn’t recommended when dealing with multidimensional arrays.

Set is a new data object introduced in ES6. The set object allows you to store unique values of any type. I read about Set from Samantha Ming’s blog. I think it’s really neat 😀.

IndexOf() or includes()

When looking for an item in an array, we use indexOf() to get the position of that item we looked for. If the value is a number (+ or -) and not a 0 then it is considered to be Truthy. We can also use includes(), which will simply return a boolean appropriately.

There is also ~(Tilde [ til-duh ]) the bitwise operator which can be used with indexOf(), but I’d rather use includes()to keep things simple. The bitwise operator will return a truthy value for anything but -1.

if(👽) condition

I’ve seen the following truthy check many times in code.

In JavaScript, if the value is not undefined, null, false, 0, "", NaN then it will evaluate to truthy. So instead of doing what’s shown in the above example, you can simply use the variable itself as the condition.

A shorthand way to do a truthy check:

Experimental and limited availability

At work, I use TypeScript almost all the time, and one of the best things about TypeScript is you get to use upcoming features of ECMAScript, right now. The recent release of TypeScript v3.7 allows you to use Optional chaining and Nullish coalescing.

This allows us to read the value of a property, that is deep inside an object safely. We no longer have to expressly check if each property of the object chain is valid. This makes our code shorter, simpler and easier to follow.

// What we current use:
let y = (foo === null || foo === undefined) ? undefined : foo.bar;

Instead of doing what’s above, you can simply do this: let y = foo?.bar;, see how simple and elegant it is 🙂.

Because of optional chaining, the expression will just return undefined. Instead of getting the exception TypeError: Cannot read property 'bar' of undefined we all familiar with.

In JavaScript, for nullish coalescing, we use logical OR || operator. But this comes with some unexpected behaviours.

const foo = bar.baz || "qux";

OR (||) being a boolean operator, if bar.baz has a value defined and it’s0, thenfoo will be "qux", because 0 is a falsy value. This is because the left-hand-side value is coerced to a boolean for the evaluation and any falsy value is not returned. This is where nullish coalescing operator comes handy.

const foo = bar.baz ?? "qux";

Now, If the value of bar.baz is 0, then foo will be 0. If bar.bazwas undefined or null, then foo will be "qux". Both nullish coalescing operator and optional chaining operator treats undefined and null as specific values.


These are some of the techniques that I thought worth sharing, and there’s a lot more; we’ll look at them some another time.

JavaScript in Plain English

Learn the web's most important programming language.

Wibodha Dhanik Alkegama

Written by

Software Engineer👨🏾‍💻✍🏻, Born in 🇱🇰, lives in 🏴󠁧󠁢󠁳󠁣󠁴󠁿🇬🇧. JavaScript🤩, TypeScript😀, Angular😀, Vue😀, GraphQL🤩, Apollo👍🏽

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade