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 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 use
toString(), but now we can use template literals.
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
Copying/Cloning an array
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.
Copying/Cloning an object
Join arrays together
Remove duplicates in an array
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
I’ve seen the following truthy check many times in code.
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.
const foo = bar.baz || "qux";
OR (||) being a boolean operator, if
bar.baz has a value defined and it’s
foo will be
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
foo will be
foo will be
"qux". Both nullish coalescing operator and optional chaining operator treats
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.