Bad Parts of JavaScript — Arithmetic and Objects
By: John Au-Yeung
Tags: Technology, JavaScript, Software Development, Programming, Web Development

Photo by Maria Teneva on Unsplash

JavaScript is one of the most popular programming languages in the world. It can do a lot and have some features that are ahead of many other languages.

In this article, we’ll look at bad parts of JavaScript that we should avoid, including some math features and objects.

parseInt

The global parseInt function has a problem. It converts a string into an integer.

However, it doesn’t have to be a string that only contains a number for parseInt to work.

That’s bad because of the confusion it causes.

For instance, if we have:

parseInt("6")

that returns 6 as we expect. But if we have:

parseInt("6 grams")

Then we also get 6 returned.

That definitely causes confusion for many people.

The rule for parseInt is that if the first character of the string is 0, then the string is evaluated as base 8 instead of 10.

Base 8 and 9 aren’t digits, so '08' and '09' will be converted to 0 with paeseInt .

However, we can provide the radix as a second argument to convert them to decimal:

parseInt( '08', 10)

Number.parseInt doesn’t have these issues, so that we should use that instead.

+

+ can both add or concatenate. It depends on the type of the operands.

If either operand is an empty string, then it converted the other one into a string.

If both are numbers, then their sum is returned.

Otherwise, it converts bot operands to string and concatenates them.

This is a great source of bugs. Therefore, we should convert them both to numbers or strings.

Floating Point

Floating point numbers are numbers that handle decimal fractions badly.

0.1 + 0.2 doesn’t equal 0.3 .

Therefore, we should convert each operand of an arithmetic operation to the scale that we want before operating on them.

For instance, if we want whole numbers as a result, then we should convert them both to whole numbers before doing the arithmetic operation that we want.

NaN

NaN is an IEEE standard value for representing things that aren’t numbers.

However, in JavaScript, we have:

typeof NaN === 'number'

returning true .

NaN is the returned value when we try to convert a non-numeric string to a number.

If we have one or more NaN in an arithmetic expression, then NaN will be returned.

We can’t use the === to check for NaN since NaN isn’t equal to itself.

For instance, NaN === NaN returns false and NaN !== NaN returns true .

Therefore, we should use the isNaN function in the JavaScript library to check for NaN .

isNaN(NaN) returns true .

isNaN also returns true if we pass in anything that’s not a number, so:

isNaN('foo')

also returns true .

isNaN will try to convert anything passed into the function to a number before checking.

If we don’t want that, we can use Number.isNaN to compare the value as-is.

Phony Arrays

Arrays are just objects in JavaScript, so the typeof operator won’t work for checking arrays.

typeof [1, 2] returns 'object' for example.

Instead, we can use the Array.isArray method to check if something is an array.

Falsy Values

JavaScript has a large set of falsy values.

0, NaN , '' (empty string), false , null and undefined are all falsy.

They’re all falsy, but they aren’t interchangeable.

Therefore, we should use the === operator checks for values to avoid any issues with different kinds of falsy values.

hasOwnProperty

hasOwnProperty is a method, and it can be replaced with a method accidentally or otherwise.

Therefore, we should make sure that hasOwnProperty is actually what we’re expected to use.

Also, we can write:

Object.hasOwnProperty.call(foo, 'bar');

where foo is an object is 'bar' is the property name that we want to check for.

This way, we don’t have to worry about the hasOwnProperty method being overwritten.

Photo by Connor Botts on Unsplash

Object

JavaScript objects aren’t usually empty since they at least inherit from Object.prototype .

This may matter because we may be calling the methods from an object’s prototype accidentally.

Conclusion

parseInt is a function that may have issues if we use it since it tries to convert non-numeric strings into numbers.

+ also tries to convert the types of its operands, so we should change all operands to the same name.