Useful JavaScript Tips — Formatting Numbers and Objects

Like any kind of apps, JavaScript apps also have to be written well.

Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at some tips we should follow to write JavaScript code faster and better.

Intl.NumberFormat

We can use the Intl.NumberFormat constructor to format numbers.

For instance, we can write:

const formatter = new Intl.NumberFormat('fr-ca', {
  style: 'currency',
  currency: 'CAD'
})
const price = formatter.format(100);

Then price is “100,00 $” since we set the locale to Canadian French and the currency is Canadian dollars.

We can also set the minimumFractionDigits property to set the minimum number of fractional digits in the return number string.

For instance, we can write:

const formatter = new Intl.NumberFormat('fr-ca', {
  style: 'currency',
  currency: 'CAD',
  `minimumFractionDigits: 2
`})
const price = formatter.format(100);

We set the minimumFractionDigits to 2 so that we’ll always show those digits.

Intl.PluralRules

The Intl.PluralRules constructor lets us return the name of the plural rule to use.

For instance, we can write:

const pr = new Intl.PluralRules('en-gb', {
  type: 'ordinal'
})

Then we can use the select method on pr as follows:

pr.select(0)

Then we get 'other' . If we write pr.select(1) we get 'one' .

pr.select(2) returns 'two' and pr.select(3) returns 'few' .

Now, we can create an object to get the proper ordinal suffix for the language.

For instance, we can write:

const suffixes = {
  'one': 'st',
  'two': 'nd',
  'few': 'rd',
  'other': 'th'
}

So we can format a number by writing:

const format = number => `${number}${suffixes[pr.select(number)]}`

Then we can call the format function with the proper number by writing:

format(0)

Then we get '0th' . format(1) returns '1st' and so on.

Objects

There are many ways to create objects, we can create an object literal, use the Object constructor or use Object.create .

For instance, we can write:

const dog = {};

or:

const dog = Object();

or:

const dog = Object.create();

Object.create is used to create an object with its own prototype.

Object literal is the preferred way if we don’t need to set our own prototype.

We can also create a constructor function to create multiple objects of the same type.

For instance, we can write:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName= lastName;
}

Then we can use the new operator by running:

const person = new Person('james', 'smith');

Objects are always passed by reference.

If we assign it to a variable, then the variable references the original object.

Built-in Object Properties

Most objects have built-in properties.

It has a prototype that has the Object.prototype object, which most objects inherit from.

All objects that aren’t created with a null prototype inherits from Object.prototype .

Object valueOf() Method

JavaScript objects have the valueOf method to return the primitive representation of an object.

For instance, we can write:

const person = { name: 'joe' };
const val = person.valueOf();

Then we get back the object.

However, the value of it is that we can override the method to return what we want.

Object toString() Method

The toString method returns a string representation of an object.

For example, we can write:

const person = { name: 'joe' };
const val = person.valueOf();

Then we get ‘[object Object]' , but we can override it to give us the string value we want.

Check if an Object is Enumerable

The enumerability of an object indicates whether we can traverse an object property.

For instance, we can write:

const person = { name: 'james' }

Object.defineProperty(person, 'age', {
  value: 27,
  enumerable: false
})

Then we can use the propertyIsEnumerable method to check if the property can be traversed.

For instance, we can write:

person.propertyIsEnumerable('name')

and returns true .

And:

person.propertyIsEnumerable('age')

returns false .

So if we use a for-in loop to loop through person , then we’ll see name but not age .

Conclusion

We can create objects with object literals, the Object constructor, and the Object.create method.

To check if an object property is enumerable, then we can use the propertyIsEnumerable method.

There are also methods to format numbers in a language-sensitive manner.