News & Blogs

JavaScript is one of the most popular programming languages at the moment. Just like any other programming language, it has dozens of neat little tricks that you could start using today.

Each of these tricks accomplishes tasks that most developers need to do on a daily basis. Depending on your experience you might already know some of these tricks, while others will blow your mind.

In this article, we’ll go over a list of tricks that will make you a better developer and supercharge your JavaScript skills.

1. Every and some

The every and some functions are functions that not all developers are familiar with. However, they can be very useful in certain situations. Let’s start with the every function. You can use this function if you want to know whether all elements of an array pass a certain test. Essentially what this is doing is going through each element of the array and checking to see if they’re all true.

This might sound a little abstract to you, so let’s lets take a look at the following example. It’s not as complex as it sounds.

const random_numbers = [ 13, 2, 37, 18, 5 ]
const more_random_numbers = [ 0, -1, 30, 22 ]const isPositive = (number) => {
  return number > 0
}random_numbers.every(isPositive); // returns true
more_random_numbers.every(isPositive); // returns false

The every function returns a boolean. If all elements in the array pass the test, true will be returned. If one of the elements in the array fails the test, false will be returned.

You could also use an anonymous function as a tester function if you’d like to:

random_numbers.every((number) => {
    return number > 0
})

The some function almost works exactly the same as the every function. There’s only one major difference: the some function tests whether at least one element in the array passes the test implemented.

If we take a look at the previous example and use the some function instead of the every function both arrays will return true, since both arrays contain a positive number.

const random_numbers = [ 13, 2, 37, 18, 5 ]
const more_random_numbers = [ 0, -1, 30, 22 ]const isPositive = (number) => {
  return number > 0
}random_numbers.some(isPositive); // returns true
more_random_numbers.some(isPositive); // returns true

 

2. Conditionally setting a variable

Conditionally setting a variable is both easy and makes your code look more elegant. There’s no need to write an if-statement when applying this trick — which personally is one of my favorite tricks in JavaScript.

So how can you conditionally set a variable?

const timezone = user.preferred_timezone || 'America/New_York'

In the example above we check if the user has a preferred timezone. If the user has a preferred timezone, we use that timezone. If the user doesn’t have a preferred timezone we use the default timezone, which is ‘America/New_York’.

This code looks so much cleaner than when using an if-statement.

let timezone = 'America/New_York'if (user.preferred_timezone) {
    timezone = user.preferred_timezone
}

Looks much cleaner, doesn’t it?

3. Casting values in Arrays

Sometimes you want to cast all values in an array. One of those occurrences could be when you’re using the triple equals operator to check whether a certain number exists in an array, for example.

I lately ran into a problem where I had a multi-select. The HTML values of the select options were strings instead of integers, which makes sense. The array of selected values looked like this:

let selected_values = [ '1', '5', '8' ]

The problem was that I was checking if a certain integer existed in the array of the selected values. Without success. I used an intersect function that used the triple equals operator. And since ‘5’ !== 5 I had to find a solution.

The prettiest solution, in my opinion, was to cast all values in the array to an integer. When trying to do this I stumbled upon a painfully simple, yet elegant, solution.

selected_values = selected_values.map(Number) // [ 1, 5, 8 ]

Instead of casting all values to an integer, you could also cast all values in the array to a boolean by simply changing the argument of the map function.

selected_values = selected_values.map(Boolean)

 

4. Object destructuring

Once you know about object destructuring it’s probably something that you’re going to be using every single day.

But what exactly is destructuring?

Destructuring is a JavaScript expression that allows you to extract data from arrays, objects, maps and sets into their own variable. It allows you to extract properties from an object or items from an array, multiple at a time.

Let’s take a look at the following example where we have a user object. If you want to store the user’s name in a variable you have to assign it to a variable on a new line. And if you want to store the gender as well in a variable, you’d have to do the same again.

const user = {
    name: 'Frank',
    age: 23,
    gender: 'M',
    member: false
}const name = user.name
const gender = user.gender

With destructuring you can directly get the variables for the object’s properties using the following syntax:

const { name, age, gender, member } = user;console.log(name)   // Frank
console.log(age)    // 23
console.log(gender) // M
console.log(member) // false

 

5. Better debugging using performance

One of the things that you’ll do a lot as a developer is debugging. However, debugging is more than just printing out a bunch of log messages in your console using console.log.

Did you know that the console object has a great way to analyze performance of pieces of your code? However, most developers only know about the standard console.log way of debugging their code.

The console object has way more helpful functions. It has a time and timeEnd function that can help you analyzing performance. It works really simple.

In front of the code that you want to test, you call the console.time function. This function has one argument, which takes a string that describes what you want to analyze. At the end of the code that you want to test, you call the console.timeEnd function. You give this function the same string as the first parameter. You’ll then see the time it took to run the code in your console.

console.time('loop')  for (let i = 0; i < 10000; i++) {   
    // Do stuff here 
}  console.timeEnd('loop')