Cool JavaScript Shortcuts and Tips for Everyday Use

JavaScript has been around for quite sometime now. Although, it only started becoming very popular in the last few years. The results of prove JavaScript to be the most commonly used programming language. With almost 75% of developers in the world being web developers, there is a very high chance that 3 out of every 5 developers use JavaScript.

For the few years I have worked with JavaScript, there are a few JavaScript shortcuts I tend to use often. In this article, I will be sharing a couple of them, hoping that a few JavaScript developers out there will find them useful.

1. Values: truthy and falsy

Most new JavaScript developers may be aware of the built-in data types in JavaScript. However, not so many may know about JavaScript’s classification of truthy and falsy values.

Anytime JavaScript expects a boolean value, a truthy value will behave like true, whereas a falsy value works like false. These are the falsy values:

As you can see, even an empty string is considered a falsy value. All other values besides the above mentioned are truthy values.

The ! operator can be used to convert any value to a boolean. When using the ! operator with values, truthy values evaluate to false, while falsy values evaluate to true. You can use the double (!!) operator to get the corresponding boolean for any value.

Let’s say a variable person can either contain an object or null. You can verify that the person variable is not null, by using the following condition:

if (person !== null) { ... }

Considering that null is falsy while every other object is truthy, you can use this (less strict condition):

if (person) { ... }2. Type Conversion: Number and String

One of the most common things you find yourself doing in JavaScript is using arithmetic operators: +, -, *, /. These operators expect operands that are numbers. So when any of the operands is not a number, JavaScript implicitly coerces it into a number. But there are times when you may not get the result you may be expecting, especially when you are using the + operator. This is majorly because the + operator is also used for string concatenation. See the following snippet:

As you can see, implicit type coercion may not always give you the result you are expecting. This is because of how JavaScript handles type conversion especially for objects. The difference is due to the order in which JavaScript calls the toString() and valueOf() methods on the object for object-to-primitive conversion.

Now here is the trick. The + operator when used as a unary operator always converts its operand to a number. Hence, the following:

Using the unary + operator on a value is functionally equivalent to casting the value using the Number() function.

+new Date === Number(new Date); // true

The + operator can also be used to convert values to string. Concatenate an empty string('') to any value using the + operator to convert the value to a string.

Using the + operator to convert values to string is functionally equivalent to casting values to string using the String() function.

([100, 50] + '') === String([100, 50]); // true3. Short-Circuiting

When working with the (|| and &&) logical operators, you may have noticed an interesting behavior called short-circuiting. Here is how it works:

The logical && operator returns the first operand if it is falsy, otherwise it returns the second operand.

The logical && short-circuiting is commonly used as a replacement for very simple if statements as shown in the following snippet:

Note that using short-circuiting actually returns a value since it is a JavaScript expression. Hence, the result of a short-circuiting operation can be stored in a variable or used anywhere JavaScript expects a value.

var personProfile = person && fetchProfile(person);

However, using if statement does not return a value because it is a JavaScript statement.

The logical || operator returns the first operand if it is truthy, otherwise it returns the second operand.

The logical || short-circuiting is commonly used when assigning fallback values to local variables as shown in the following snippet:

In the following snippet, short-circuiting is used to create two functions that always return a boolean value. If the first argument is a boolean value, it is returned, otherwise the desired fallback boolean value is returned.

4. Ternary Operator

The ternary operator can be used as a substitute for very simple if/else statements. Here is the syntax:

(condition) ? (return value if truthy) : (return value if falsy)

The ternary operation requires 3 operands. The first is a condition value or expression. The second is a value or expression that is evaluated and returned if the condition is truthy. The third is a value or expression that is evaluated and returned if the condition is falsy.

Here is a quick example showing how to use the ternary operation as a shortcut for simple if/else statements.

This feels good already, but it gets more interesting knowing that ternary operations can be nested. The ternary operator has a right-to-left associativity. Hence, the following expression:

a ? b : c ? d : e ? f : g

is evaluated as:

(a ? b : (c ? d : (e ? f : g)))

Nested ternary operations can be used as alternatives to multiple if/else statements. Here is a simple example:

Notice how concise the ternary operation is in comparison to using multiple if/else statements.

Note that the ternary operation returns a value since it is a JavaScript expression. Hence, the result of a ternary operation can be stored in a variable or used anywhere JavaScript expects a value. That is the reason why the value of the ternary operation could be returned from the boundedValue() function.

5. Working with NumbersRandom Numbers

As a JavaScript developer, it is possible that you have used Math.random() at one point or the other. The Math.random() function returns a floating-point, pseudo-random number in the range from 0 inclusive up to but not including 1.

console.log(Math.random()); // 0.684408535330514

If you want to create a random floating-point number in the range from 0 inclusive up to but not including let’s say 10, you multiply Math.random() by 10.

console.log(Math.random() * 10); // 8.368613312939646

Math.random() when combined with other functions like Math.floor() or Math.ceil() can be used for some cool number generation combos.

Here is a simple function that generates a random integer from 1 to the given maxvalue.

Min/Max Numbers

The Math.min() and Math.max() functions also come in very handy when trying to deal with bounded numbers. For example the previous boundedValue() example can be implemented using Math.min() and Math.max() as follows:

Number Base Conversion

In JavaScript, number literals are primitives. However, you can access any method available on number objects created using the Number() constructor, one of which is toString().

The Number.prototype.toString() method accepts a radix integer argument which specifies the base to which the number must be converted. If this argument is not specified, it defaults to 10, which means the number is left the same way and then converted to a string.

Hence, you can convert a number to different bases as shown in the following snippet:

(255).toString(); // "255" (255).toString(2); // "11111111" (255).toString(8); // "377" (255).toString(16); // "ff"

Cool huh? The following snippet shows a function rgbToHex() for converting RGB color value to hex color value.

Conclusion

In this article, I have shared a couple of JavaScript tips and shortcuts that you may find very helpful at certain points while writing JavaScript programs.

If none of the tips shared in this article is new to you, then that’s really lovely. However, if you are one of the few people who adopted a thing or two from this article, then I’m glad you did find it helpful. Do well to give some rounds of applause in that case.

You can also follow me on Twitter at and on Medium as I share more contents you may find helpful.

Happy Coding…