I have a dropdown that allow the user to select a value. When the selected item changes, it calls a function in my ponent (onDropdownChange). The value passed to onDropdownChange can be a string ("Please select an option") or the index number of a selected value.

Here's the onDropdownChange in my TypeScript file:

onDropdownChange(id: any) {
  if(Number.isNaN(id)){
    this.selectedIndex = null;
    this.isItemSelected = false;
  }
  else{
    this.selectedIndex  = id;
    this.isItemSelected = true;
  }
}

When the value of id is "Please select an option", isNaN returns false. Why?

When I use the '+' unary operator to return the number representation of the string in the code below, isNan correctly returns true. Why?

onDropdownChange(id: any) {
  // convert id to a number representation using '+'
  if(Number.isNaN(+id)){
    this.selectedIndex = null;
    this.isItemSelected = false;
  }
  else{
    this.selectedIndex  = id;
    this.isItemSelected = true;
  }
}

Here is the relevant code in my html template:

            <select class="form-control" (change)="onItemChange($event.target.value)">
              <option> Please select </option>
              <option *ngFor="let item of items; let i=index" [value]="i" [selected]="i === selectedIndex"> Item {{i+1}}</option>
            </select>

I have a dropdown that allow the user to select a value. When the selected item changes, it calls a function in my ponent (onDropdownChange). The value passed to onDropdownChange can be a string ("Please select an option") or the index number of a selected value.

Here's the onDropdownChange in my TypeScript file:

onDropdownChange(id: any) {
  if(Number.isNaN(id)){
    this.selectedIndex = null;
    this.isItemSelected = false;
  }
  else{
    this.selectedIndex  = id;
    this.isItemSelected = true;
  }
}

When the value of id is "Please select an option", isNaN returns false. Why?

When I use the '+' unary operator to return the number representation of the string in the code below, isNan correctly returns true. Why?

onDropdownChange(id: any) {
  // convert id to a number representation using '+'
  if(Number.isNaN(+id)){
    this.selectedIndex = null;
    this.isItemSelected = false;
  }
  else{
    this.selectedIndex  = id;
    this.isItemSelected = true;
  }
}

Here is the relevant code in my html template:

            <select class="form-control" (change)="onItemChange($event.target.value)">
              <option> Please select </option>
              <option *ngFor="let item of items; let i=index" [value]="i" [selected]="i === selectedIndex"> Item {{i+1}}</option>
            </select>

• javascript
• angular

• 1 The best way to answer questions you have about things like this is to always consult the docs first. developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Daniel W Strimpel Commented May 3, 2018 at 1:19
• When the value of id is "Please select an option", isNaN returns false. Why? well it's a bit of a circular logic but...it's false because the string "Please select an option" is not the value NaN. It pretty much describes itself there. – VLAZ Commented May 3, 2018 at 1:22

2 Answers 2

Number.isNaN()

The Number.isNaN() method determines whether the passed value is NaN and its type is Number. It is a more robust version of the original, global isNaN().

If id is a string, then it is not a number, so Number.isNaN() returns false:

console.log(Number.isNaN('Please select an option'));
console.log(Number.isNaN('foo'));

The only time to use Number.isNaN() is when you would want to, essentially, check to see if someVariable === NaN, which doesn't work by itself because NaN !== NaN.

For your case, just use the plain isNaN:

console.log(isNaN('Please select an option'));
console.log(isNaN('foo'));

isNaN(id) === Number.isNaN(+id)

There is only one value of x for which Number.isNaN(x) evaluates to true: NaN:

console.log( Number.isNaN( NaN ) );
console.log( Number.isNaN( 'foo' ) );
console.log( Number.isNaN( {} ) );
console.log( isNaN( '5' ) );
console.log( Number.isNaN( 0 ) );

That is in contrast to the global isNaN function which returns true for anything that is NaN after coercing it to a number:

console.log( isNaN( NaN ) );
console.log( isNaN( 'foo' ) );
console.log( isNaN( {} ) );
console.log( isNaN( '5' ) );
console.log( Number.isNaN( 0 ) );

Neither of those functions are meant to test if their argument is not a number. They are both meant for testing if their argument is the number NaN.