JavaScript Interview Series – All about NaN

nan1In JavaScript, NaN is one of the most confusing concepts; hence, it is often asked in the interview. You may have come across questions such as,

  • What is NaN
  • What is the type of NaN
  • How to check for the NaN
  • What is the difference between isNaN() and Number.isNaN()

In this post, let us learn the answer to the above questions one by one.

For me, The NaN is an error value in the JavaScript. However, technically it is the property of the global object. You get NaN when the value cannot be computed or as a result of attempted number coercion (type conversion) of non-numeric value (such that undefined) for which primitive numeric value is not available.NaN2

For example, for an arithmetic operation in which one of the operands is a missing value (read it undefined), JavaScript returns NaN. However, there are some other non-computational scenarios, such that divide by zero; instead of NaN you get Infinity value.



const foo = 7 + undefined; 
const too  = 7/0; 
console.log(foo); // NaN
console.log(too); // Infinity 


NaN3

You get value NaN in the following scenarios,

  • If one of the operands in an arithmetic operation is undefined
  • If one of the operands in an arithmetic operation is NaN
  • Dividing Zero by Zero
  • Dividing Infinity by Infinity
  • Multiplying zero with Infinity


let foo = 7 + undefined; // NaN
let koo = undefined - 7 ; // NaN 
let loo = NaN + NaN ; // NaN 
let hoo = NaN - NaN; // NaN 
let noo = 7 + NaN // NaN
let too = NaN * NaN // NaN
let poo = NaN % NaN // NaN
let roo = NaN % NaN // NaN
let zoo = 0 / 0 // NaN 
let qoo = 0 * Infinity; // NaN


NaN stands for Not a Number, and interestingly its type is number



console.log(typeof NaN); // number


NaN4

JavaScript treats NaN like any real number and can be used in any number type operations. The NaN is a property of the global object, and its other equivalent is Number.NaN.

NaN5

Keep in mind that both are the same.


console.log(NaN); // NaN
console.log(Number.NaN); // NaN 


The property attributes of NaN property are set to false. That means you cannot write, enumerate, or configure NaN property.



const NaNProp = Object.getOwnPropertyDescriptor(Number,'NaN');

/*Output 
{ value: NaN,
    writable: false,
    enumerable: false,
    configurable: false } */

console.log(NaNProp); 


Also, to use NaN property, you do not have to create the Number object, as it is a static property.

Check for NaN

In JavaScript, NaN is a value that is not strictly equal to itself, which makes it tricky to check for the NaN.

NaN8

It is not possible to rely on the equality operators (== and ===) to determine whether a value is NaN or not, because both NaN == NaN and NaN === NaN evaluate to false.



const foo = NaN; 
console.log(NaN === foo) // false 
console.log(NaN === NaN) // false 
console.log(NaN == foo) // false 
console.log(NaN == NaN) // false 


As you cannot use equality operator to check for the NaN value, JavaScript provides other ways to check value for NaN,

  1. isNaN() function
  2. isNaN()
  3. is(foo,NaN)

The Number.isNaN() method determines whether the value of the passed parameter is NaN and also its type is number.



const foo = NaN; 
console.log(Number.isNaN(foo)) // true 
const too = 'NaN';
console.log(Number.isNaN(too)) // false 


The Number.isNaN() method checks for both

  1. Whether the value is NaN
  2. Whether the type is number

As it checks for both types and the value, it always returns the expected result.


const foo = NaN;
console.log(Object.is(foo,NaN)); // true 
console.log(Object.is('NaN','NaN')); // true 
console.log(Object.is('NaN',foo)); // false


 

You can also use the Object.is() method to check for the value of NaN.



const foo = NaN;
console.log(Object.is(foo,NaN)); // true 
console.log(Object.is('NaN','NaN')); // true 
console.log(Object.is('NaN',foo)); // false


The Object.is() method determines whether two values are the same value or not. It checks for both equality and strict equality.  So you can also use the Object.is() method for the value of NaN.

How about isNaN()

The isNaN()  function also determines whether a value is NaN or not. Before checking for the value NaN, it tries to covert value to be tested as a number resulting in many unexpected results.



const foo = NaN;
console.log(isNaN(NaN)); // true 
console.log(isNaN(foo)); // true 
console.log(isNaN(undefined)); // true
console.log(isNaN(null)); // false 
console.log(isNaN(0/0)); // true
console.log(isNaN({})); // true
console.log(isNaN(false)); // false
console.log(isNaN(1234)); // false


In the above example, for many cases such that isNaN({}),  JavaScript is not able to do coercion of the passed value as a number, hence returns true.

Let us consider when you pass undefined in to check for the value of NaN in isNaN() function and JavaScript is not able to convert undefined to a valid real number; hence, it converts it to NaN, and as a result, you get true.

Starting ECMA 2O15, it is advisable to use Number.isNaN() method to check for the value of NaN.

NaN9

As a summary, JavaScript returns NaN for the value which can not be computed, and you should use Number.isNaN() to check whether a value is NaN or not.

I hope now you can answer about JavaScript NaN confidently in the interview.  Thanks for reading and any training or consulting need reach out to me at debugmode[at]outlook[dot]com 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s