10 Quick JavaScript Tips and Tricks

While learning JavaScript, I’ve made it an effort to maintain a list of every time-saving trick that I found in other people’s code, on code challenge websites, and anywhere other than the tutorials I was using. This post is intended to be useful for beginners, but I hope even intermediate JavaScript developers will find something new in this list.

1. Filter for Unique Values

The object type was introduced in ES6, and along with , the ‘spread’ operator, we can use it to create a new array with only the unique values.

2. Destructuring console.logs

When debugging, it’s extremely helpful to see some additional detail about the variable you’re logging to the console. Traditionally I’ve handled this by doing something like this:

While this works fine on a smaller scale as your code grows more complex this becomes increasingly unsustainable. To level your code and simplify your logs try something like this:

3. Destructuring Arguments in Function Definitions

Destructuring your function’s arguments enables you to pass in the arguments in any order and receive the same output. This is especially useful if your declaration is in another file or includes too large a list of arguments to remember the exact positioning of each.

4. Short Circuit Evaluation with && Operator

This is a personal favorite of mine as it’s extremely simple, practical and quite useful. Short circuiting means that when evaluating an AND expression (&&), if the first operand is false, JavaScript will short-circuit and not even look at the second operand.

5. Remove Falsy Values from an Array

To filter out all the values from an array, you can pass the constructor to the method. This works since constructor returns false on any falsy value and vice versa.

6. Swap Values with Array Destructuring

Knowing how to destructure an array, it’s easy to use it for swapping variables. Let’s swap the variables and using destructuring assignment:

At the first step, on the right side of the destructuring, a temporary array (which evaluates to ) is created.

Then the destructuring of the temporary array occurs: . The variable is assigned with , and with . The swapping of and has been performed.

I like this approach because it’s short and expressive: swapping is performed in just one statement. It also works with any data type: numbers, strings, booleans, objects.

7. Convert to Boolean with Double Bang (!!)

How the !! works — the first ! coerces the value to a boolean and inverses it. In this case, !value will return false. So to reverse it back to true, we put another ! on it. Hence the double bang !!

8. console.table

console.table() allows you to display data in the console in a nice tabular format. It comes in very handy when having to visualize complex arrays or objects. It can display tabular data for arrays or objects. In this example, I’m hitting a fake JSON API endpoint to return some dummy user data. Logging it is fine but for a better visual representation of the data we can use console.table.

9. console.assert

Sometimes you want to log ONLY when a condition is falsy — this is known as an assertion. console.assert() writes an error message to the console if and only if the assertion is false. It keeps your code concise by eliminating the need for if statements.

10. Truncate an Array

If you want to remove values from the end of an array destructively, there’s are faster alternatives than using .

For example, if you know the size of your original array, you can re-define its length property, like so:

I hope you found these tips as useful as I did when I first discovered them. Got any JavaScript tricks of your own?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store