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 

Recognized as a Google Developer Expert by Google

I am officially a Google Developer Expert in Angular and Web Technologies. I take this opportunity to thank the Angular global community and all my students who come to my training, meetups, and workshops. This recognition was never possible without you.

a

I am humbled to be one of the few professionals who are awarded as both Microsoft MOST Valuable Professional and Google Developer Expert.

Though I have been awarded the Microsoft MVP Award 10 times since 2010, this is my 1st GDE recognition.

About GDE

As of the official website, GDE is a program to recognize individuals who are experts and help others. You can learn more about the program here

abc

There are around 110 Google Developer Experts in Angular all across the world, and I am humbled to be part of the esteemed group.  I understand this is a responsibility and would carry that with pride.

My Community Contributions

I have started working on Angular and JavaScript and for the Angular/ JavaScript community since August 2016, and since then

  • Organizing India’s Largest Angular Conference, ng-India. It’s third edition is happening on 29th Feb 2020 in Delhi. Find more details here
  • Have hosted 12 free full day Angular workshops in various Indian cities.
  • I have delivered 8 talks on Angular in various conferences. Find details here
  • I have written more than 50 blog posts on Angular. You can read them here
  • Authored best selling Angular book called Angular Essentials
  • Helped start-ups to embrace Angular as technology

Besides the above Angular contributions, I have also been making contributions to other technologies such as JavaScript, .NET, Azure, etc.

One of the most important aspects of the GDE program is mentoring others, and I have been mentoring many folks to be author, speaker, learn Angular to get a better job, etc, and I am very proud of that.  Below, sharing some photos from events I hosted in the past,

a1.jpg

a2

a3

a4

a5.jpg

The process to become GDE

There are four steps in the GDE process:

  1. The first step is the Nomination. The Country community lead, a member of the Google Product Team, or an existing GDE can nominate you for the GDE.
  2. The second step is the Community Interview. If your nomination is accepted, the next round is Community Interview, which is taken by an existing GDE in your expertise area.
  3. The third step is the Product Interview. Once you pass Community Interview, the third step is Product Interview, which is taken by a member of the product team.
  4. The fourth step is signing the NDA and getting accepted into the program.

Thank You

I was (perhaps am) always a Microsoft technologies boy. When I was just 25 years old, I received my 1st MVP award. Hence I have grown up with Microsoft technologies and is a Microsoft Most Valuable Professional who was always involved with MS stack. However, when I entered to open source community and started advocating JavaScript and Angular some individuals were very welcoming and supported me since beginning.  This post would be incomplete without thanking them.

Thank you, these amazing people, from the Angular community,

Todd Motto, Geard Sans, Deborah Kurata, Joe Eames, Jesse Sanders, Brian Holt, John Papa, and Ben Lesh

I also would like to thank my constant support for a decade now (in all my winters and summer)

Julie Lerman, Glenn Block, Dan Wahlin, Steve Smith, Stephen Forte, Rey Bango, and Jeff Fritz

From the Angular Team,

Stephen Fluin, Vikram, Jules Kremer, and   Brad Green

And last but not least thank you  to Shiv Prasad Koirala  ,  Gaurav Mantri, Abhishek Kant, and my elder brother Mritunjay Kumar

Once again, a big thank you to everyone who comes to my meetups, workshops, and ng-India. This was never possible without your love and respect.

What Next?

I will continue teaching and helping you understand when to use the async pipe and JavaScript prototype diagram. For any training or speaking reach out to me at debugmode@outlook.com

See you in India’s Largest Angular Conference , ng-India  on 29 February 2020.

Thanks