My Favorite JavaScript Tips and Tricks

Subscribe to my newsletter and never miss my upcoming articles

Motivation

Most of the programming languages are open enough to allow programmers doing things multiple ways for the similar outcome. JavaScript is no way different. With JavaScript, we often find multiple ways of doing things for a similar outcome, and that's confusing at times.

Some of the usages are better than the other alternatives and thus, these are my favorites. I am going to list them here in this article. I am sure, you will find many of these in your list too.

1. Forget string concatenation, use template string(literal)

Concatenating strings together using the + operator to build a meaningful string is old school. Moreover, concatenating strings with dynamic values(or expressions) could lead to frustrations and bugs.

let name = 'Charlse';
let place = 'India';
let isPrime = bit => {
  return (bit === 'P' ? 'Prime' : 'Nom-Prime');
}

// string concatenation using + operator
let messageConcat = 'Mr. ' + name + ' is from ' + place + '. He is a' + ' ' + isPrime('P') + ' member.'

Template literals(or Template strings) allow embedding expressions. It has got unique syntax where the string has to be enclosed by the backtick (``). Template string can contain placeholders for dynamic values. These are marked by the dollar sign and curly braces (${expression}).

Here is an example demonstrating it,

let name = 'Charlse';
let place = 'India';
let isPrime = bit => {
  return (bit === 'P' ? 'Prime' : 'Nom-Prime');
}

// using template string
let messageTemplateStr = `Mr. ${name} is from ${place}. He is a ${isPrime('P')} member.`
console.log(messageTemplateStr);

2. isInteger

There is a much cleaner way to know if a value is an integer. The Number API of JavaScript provides a method called, isInteger() to serve this purpose. It is very useful and better to be aware.

let mynum = 123;
let mynumStr = "123";

console.log(`${mynum} is a number?`, Number.isInteger(mynum));
console.log(`${mynumStr} is a number?`, Number.isInteger(mynumStr));

Output:

2.png

3. Value as Number

Have you ever noticed, event.target.value always returns a string type value even when the input box is of type number?

Yes, see the example below. We have a simple text box of type number. It means it accepts only numbers as input. It has an event handler to handle the key-up events.

<input type='number' onkeyup="trackChange(event)" />

In the event handler method we take out the value using event.target.value. But it returns a string type value. Now I will have additional headache to parse it to an integer. What if the input box accepts floating numbers(like, 16.56)? parseFloat() then? Ah, all sort of confusions and extra work!

function trackChange(event) {
   let value = event.target.value;
   console.log(`is ${value} a number?`, Number.isInteger(value));
}

Use event.target.valueAsNumber instead. It returns the value as number.

let valueAsNumber = event.target.valueAsNumber;
console.log(`is ${value} a number?`, Number.isInteger(valueAsNumber));

3.png

4. Short hand with AND

Lets consider a situation where we have a boolean value and a function.

let isPrime = true;
const startWatching = () => {
    console.log('Started Watching!');
}

This is too much code to check for the boolean condition and invoke the function,

if (isPrime) {
    startWatching();
}

How about using the short-hand using the AND(&&) operator? Yes, avoid if statement altogether. Cool, right?

isPrime && startWatching();

5. Default value with OR

If you ever like to set a default value for a variable, you can do it using the OR(||) operator easily.

let person = {name: 'Jack'};
let age = person.age || 35; // sets the value 35 if age is undefined
console.log(`Age of ${person.name} is ${age}`);

6. Randoms

Generating random number or getting a random item from an array are very useful methods to keep handy. I have seen them appearing multiple times in many of my projects.

Get a random item from an array,

let planets = ['Mercury ', 'Mars', 'Venus', 'Earth', 'Neptune', 'Uranus', 'Saturn', 'Jupiter'];
let randomPlanet = planets[Math.floor(Math.random() * planets.length)];
console.log('Random Planet', randomPlanet);

Generate a random number from a range by specifying the min and max values,

 let getRandom = (min, max) => {
     return Math.round(Math.random() * (max - min) + min);
 }
 console.log('Get random', getRandom(0, 10));

7. Function default params

In JavaScript, function arguments(or params) are like local variables to that function. You may or may not pass values for those while invoking the function. If you do not pass a value for a param, it will be undefined and may cause some unwanted side effects.

There is a simple way to pass a default value to the function parameters while defining them. Here is an example where we are passing the default value Hello to the parameter message of the greetings function.

let greetings = (name, message='Hello,') => {
    return `${message} ${name}`;
}

console.log(greetings('Jack'));
console.log(greetings('Jack', 'Hola!'));

8. Required Function Params

Expanding on the default parameter technique, we can mark a parameter as mandatory. First define a function to throw an error with an error message,

let isRequired = () => {
    throw new Error('This is a mandatory parameter.');
}

Then assign the function as the default value for the required parameters. Remember, the default values are ignored when a value is passed for a parameter at the invocation time. But, the default value is considered if the parameter value is undefined.

let greetings = (name=isRequired(), message='Hello,') => {
    return `${message} ${name}`;
}
console.log(greetings());

In the above code, name will be undefined and that will try to set the default value for it which is the isRequired() function. It will throw an error as,

8.png

9. Comma Operator

I was surprised when I realized, comma(,) is a separate operator and never gone noticed. I have been using it so much in code but, never realized its true existence.

In JavaScript, the comma(,) operator is used for evaluating each of its operands from left to right and returns the value of the last operand.

let count = 1;
let ret = (count++, count);
console.log(ret);

In the above example, the value of the variable ret will be, 2. Similar way, the output of the following code will be logging the value 32 into the console.

let val = (12, 32);
console.log(val);

Where do we use it? Any guesses? The most common usage of the comma(,) operator is to supply multiple parameters in a for loop.

for (var i = 0, j = 50; i <= 50; i++, j--)

10. Merging multiple objects

You may have a need to merge two objects together and create a better informative object to work with. You can use the spread operator ...(yes, three dots!).

Consider two objects, emp and job respectively,

let emp = {
 'id': 'E_01',
 'name': 'Jack',
 'age': 32,
 'addr': 'India'
};

let job = {
 'title': 'Software Dev',
  'location': 'Paris'
};

Merge them using the spread operator as,

 // spread operator
 let merged = {...emp, ...job};
 console.log('Spread merged', merged);

There is another way to perform this merge. Using Object.assign(). You can do it like,

 console.log('Object assign', Object.assign({}, emp, job));

Output:

10.png

Note, both spread operator and the Object.assign perform a shallow merge. In a shallow merge, the properties of the first object are overwritten with the same property values of the second object.

For deep merge, please use something like, _merge of lodash.

11. Destructuring

The technique of breaking down the array elements and object properties as variables called, destructuring. Let us see it with few examples,

Array

Here we have an array of emojis,

let emojis = ['๐Ÿ”ฅ', 'โฒ๏ธ', '๐Ÿ†', '๐Ÿ‰'];

To destructure, we would use a syntax as follows,

let [fire, clock, , watermelon] = emojis;

This is same as doing, let fire = emojis[0]; but with lots more flexibility. Have you noticed, I have just ignored the trophy emoji using an empty space in-between? So what will be the output of this?

console.log(fire, clock, watermelon);

Output:

11.png

Let me also introduce something called rest operator here. If you want to destructure an array such that, you want to assign one or more items to variables and park rest of it into another array, you can do that using ...rest as shown below.

let [fruit, ...rest] = emojis;
console.log(rest);

Output:

11.a.png

Object

Like arrays we can also destructure objects.

let shape = {
  name: 'rect',
  sides: 4,
  height: 300,
  width: 500
};

Destructuring such that, we get name, sides in couple of variables and rest are in another object.

let {name, sides, ...restObj} = shape;
console.log(name, sides);
console.log(restObj);

Output:

11.b.png

Read more about this topic from here.

12. Swap variables

This must be super easy now using the concept of destructuring we learned just now.

let fire = '๐Ÿ”ฅ';
let fruit = '๐Ÿ‰';

[fruit, fire] = [fire, fruit];
console.log(fire, fruit);

13. isArray

Another useful method for determining if an input is an Array or not.

let emojis = ['๐Ÿ”ฅ', 'โฒ๏ธ', '๐Ÿ†', '๐Ÿ‰'];
console.log(Array.isArray(emojis));

let obj = {};
console.log(Array.isArray(obj));

14. undefined vs null

undefined is where a value is not defined for a variable but, the variable has been declared.

null itself is an empty and non-existent value which must be assigned to a variable explicitly.

undefined and null are not strictly equal,

undefined === null // false

Read more about this topic from here.

15. Get Query Params

window.location object has bunch of utility methods and properties. We can get information about protocol, host, port, domain etc from the browser urls using these properties and methods.

One of the properties that I found very useful is,

window.location.search

The search property returns the query string from the location url. Here is an example url: https://tapasadhiary.com?project=js. The location.search will return, ?project=js

We can use another useful interface called, URLSearchParams along with location.search to get the value of the query parameters.

let project = new URLSearchParams(location.search).get('project');

Output: js

Read more about this topic from here.

This is not the end

This is not the end of the list. There are many many more. I have decided to push those to the git repo as mini examples as and when I encounter them.

What are your favorite JavaScript tips and tricks? How about you let us know about your favorites in the comment below?


If it was useful to you, please Like/Share so that, it reaches others as well. To get e-mail notification on my latest posts, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on twitter @tapasadhikary.

The cover image was built on top of an image from freepik.

Jatin Rao's photo

Whoa! This post is a Treasure ๐Ÿฅ‡ Thanks for sharing ๐Ÿงก

Sandeep Panda's photo

Wow! Such a wonderful list. We should pin it somewhere and force every JavaScript developer to go through this. ๐Ÿ˜Ž

event.target.valueAsNumber: I never knew about this neat trick! Learned something new!

I also found isRequired check very clever.

Thanks for writing this article. It's a treausure. ๐Ÿ™

Tapas Adhikary's photo

โ˜ UI/UX Enthusiast | ๐Ÿ’ป Work @MicroFocus | โœ๏ธ Blogger | ๐Ÿ‘จโ€๐Ÿซ Mentor | ๐ŸŽค Speaker | ๐ŸŸ Foodie

Thanks Sandeep! I am very glad, it was useful to you.

I am not sure, how many such tricks we discover, find or learn from others on daily basis. When I sat down and looked through some project code written in recent past, I found these I have used but never documented any better ways. Thought of doing that today.. ๐Ÿ˜Š

Pankaj Patel's photo

Cool collection of JS tricks

I like the isRequired trick as it is simply claver and very useful.

Good job Tapas

Simon Scarfe's photo

Great list - lots of lovely little tidbits, especially the isRequired helper function. Love that!

You have to be slightly careful with the default or in 5, though. If age is 0, it will overwrite it (making your new born person object a 35 year old ๐Ÿ˜‰).

A safer, albeit slightly less-well-supported (IE doesn't know about it), way of attacking it is to use the nullish coalescing operator - ?? which returns truthy values such as 0.

More info available on MDN: developer.mozilla.org/en-US/docs/Web/JavaSc..

Tapas Adhikary's photo

โ˜ UI/UX Enthusiast | ๐Ÿ’ป Work @MicroFocus | โœ๏ธ Blogger | ๐Ÿ‘จโ€๐Ÿซ Mentor | ๐ŸŽค Speaker | ๐ŸŸ Foodie

Hey Simon,

Thank you very much for liking it and the encouraging words.

You got a great point about the defaults.. Thanks, really appreciate!

Afraz Momin's photo

Very helpful article Tapas. Thank you ๐Ÿ™

Faith Gaiciumia's photo

Thanks a lot for this

Luiz Filipe da Silva's photo

Amazing tricks! Thanks for sharing ๐Ÿค ๐Ÿš€

Victoria Lo's photo

Another legendary article born from Mr. Tapas Adhikary's fingers! Thanks!

Rutik Wankhade's photo

These are some great tricks. Thanks for sharing. Bookmarked ๐Ÿ‘

Bolaji Ayodeji's photo

This is really amazing, thanks for sharing!

Tapas Adhikary's photo

โ˜ UI/UX Enthusiast | ๐Ÿ’ป Work @MicroFocus | โœ๏ธ Blogger | ๐Ÿ‘จโ€๐Ÿซ Mentor | ๐ŸŽค Speaker | ๐ŸŸ Foodie

Thanks Bolaji!

Federico Kereki's photo

I'm not sure about the random function, because of the rounding. Check it out: I believe that the min and max values aren't produced as often the other ones.

Tapas Adhikary's photo

โ˜ UI/UX Enthusiast | ๐Ÿ’ป Work @MicroFocus | โœ๏ธ Blogger | ๐Ÿ‘จโ€๐Ÿซ Mentor | ๐ŸŽค Speaker | ๐ŸŸ Foodie

Federico Kereki, Thanks!

Yes, the floor function has surely got more chances of producing randoms than round, I believe. Appreciate your feedback and thanks for reading through.