How to avoid NaN in JavaScript

Are you getting a NaN errors?

Here are 4 methods to avoid NaN values.

Avoid #1: Mathematical operations with non-numeric string values

In JavaScript you can execute mathematical operations with numeric string values.

// Subtracting
const a = "10" - "10"; // 0

// Multiply
const b = "10" * "10"; // 100

// Division
const c = "10" / "10" // 1

But what if the string value is non-numeric?

const y = 5 * "Apples"; // NaN

Than NaN gets produced.

To avoid it completely, it’s best if you do all your mathematical operations with numbers.

Sometimes stringed values may come back from an API, just check if the value is NaN in the first place.

isNaN("5") || 0

Avoid #2: Mathematical operations with functions

Doing mathematical operations with a function will result in a NaN value.

function fooBar() {
  // ...stuff
}

fooBar * 5 // NaN

Avoid #3: Mathematical operations with objects

Doing mathematical operations with a JavaScript object will result in a NaN value.

const obj = {};

obj * 5 // NaN

Avoid #4: Mathematical operations with falsy values

Avoid doing mathematical operations with falsy values such as:

• undefined
• NaN
• null
• false
• empty string ("")

Just avoid it.

const a = undefined + 5; // NaN

const b = NaN / 5; // NaN

const c = null - 5; // -5. Null behaves like a 0.

const d = false * 5; // -5. False behaves like a 0.

const e = "" + 10; // 10. Empty string behaves like a 0.

Conclusion

Stick to doing mathematical operations with number type values.

Here’s a fallback option that will convert your falsy value to 0.

const a = nanValue || 0; // Converts false to value 0

I like to tweet about JavaScript and post helpful code snippets. Follow me there if you would like some too!