DEV Community: Truong Phan

Pair of concepts may confuse you in Javascript - Number.isNaN() and isNaN()

Truong Phan — Mon, 24 May 2021 15:08:45 +0000

With a long history of development (and chaos), JS has some messy legacy that can't be removed to keep the consistency but only improved by new features/functions. This leads to confusion for developers. This series is written as notes for myself and others to comprehend these concepts and avoid bugs in development.

What is `NaN`?

NaN is shorthand for Not A Number, specified in The IEEE Standard for Floating-Point Arithmetic (IEEE 754-2008) for floating-point arithmetic established in 1985. In Javascript context, it is a "property of the global object. In other words, it is a variable in global scope.". It has below characteristics:

It is considered a Number type
Equalivent to Number.NaN
NaN is the only value in JavaScript which is not equal to itself.
It's falsy


console.log(NaN === NaN) // false
console.log(NaN == NaN) // false

console.log(NaN !== NaN) // true
console.log(NaN != NaN) // true
console.log(typeof(NaN)) // number
a = NaN;
a ? true : false //false

`isNaN()`

As you can see NaN even can not be compared to itself, so how we can detect if a variable is a NaN, before ES6 we can use the function isNaN(), yet considered the following examples.


isNaN(NaN); // true
isNaN('NaN');   // true
isNaN(undefined); // true
isNaN({}); // true
isNaN('Techika.com'); // true
isNaN(''); // false
isNaN('12abcd') // true

To understand this behavior, we need to understand how it works properly.
According to MDN: "When the argument to the isNaN function is not of type Number, the value is first **coerced to a Number. The resulting value is then tested to determine whether it is NaN"

Then, many people argue that its behavior for non-numeric arguments has been confusing and may cause unexpected results. As the result, the new function was introduced in ECMAScript 2015 (ES6) to solve this problem.

`Number.isNaN()`

It is a static function from the primitive wrapper object - Number. The most important feature of the function is that it doesn't force converting the argument to a number. Because NaN is the only value in JavaScript that is not equal to itself, Number.isNaN() has been claimed it is necessary.


Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0);      // true

// e.g. these would have been true with global isNaN()
Number.isNaN('NaN');      // false
Number.isNaN(undefined);  // false
Number.isNaN({});         // false
Number.isNaN('Techika.com');   // false
Number.isNaN(''); // false
Number.isNaN('12abcd') // false

Conclusion

From my personal point of view, isNaN() may not be a bug as many people thought but it could be considered when you want to focus on the detection of value. The thing is that we need to comprehend its mechanism that it will try to convert arguments to Number. For reliability, we should implement Number.isNaN() when we want to make sure its argument is Number for the comparison.

P/S

As the article has been discussed actively on Reddit, and there is a discussion about Polyfill, so here is a quick and short Polyfill for Number.isNaN() in case you want to support ES5 and previous versions.

if (!Number.isNaN) {
  Number.isNaN = function(n) {
    return n !== n;
  };
}

Originally published at The Techika

HackerNews Reader with Vue 3, Vite 2, VueX 4 & Tailwind — Part 1

Truong Phan — Sat, 09 Jan 2021 12:13:24 +0000

VueJS is raising as one of the most popular front end framework, compared with React (supported by Facebook) and Angular (from Google). Recently, it has been updated to version 3 with many new exciting features. In this post, we will explore the combination with VueX (state management) to handle 3rd party API. To make it simple for the learning purpose, our goal is just to receive the top articles from Hacker News and load it from the client side.

You can try the online demo here https://vhnews.netlify.app/

First of all we use Vite to scaffold the project. You may wonder why I don’t use the official Vue CLI tool. The reason is Vite is really fast, and in this case I just want to make a quick demonstration. Vue CLI, in other hand, is built on top of the powerful and popular Webpack , will bring you an amazing plugin ecosystem (and it’s compatible with Vue 2). So, now we use yarn (you can use npm instead, just a personal favor, although I prefer the speed of yarn) to create our new web app (requires Node.js version >=12.0.0.)

yarn create @vitejs/app

After enter the command, you will be prompted to choose some selections. Then we cd to your working directory and run following commands to install some tools: VueX (version 4.x), eslint as well as its plugin for Vue and axios.

yarn
yarn add axios vuex@next --save
yarn add -D eslint eslint-plugin-vue
yarn eslint --init
yarn dev

Now, you can open the browser and go to the address http://localhost:3000 to see if the dev server is running.

For the interface, I gonna use Tailwind, and “Vue 3 and Vite don’t support PostCSS 8 yet so you need to install the Tailwind CSS v2.0 PostCSS 7”.

yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Next, to generate the tailwind.config.js and postcss.config.js files, run:

npx tailwindcss init -p

From the official guide: “In your tailwind.config.js file, configure the purge option with the paths to all of your pages and components so Tailwind can tree-shake unused styles in production builds.”

module.exports = {
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
}

Then create a new file main.css in src/assets/css:

/* ./src/assets/css/main.css */

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

Then, we need to fetch the data from HackerNews to VueX store first. In the snippet below, I also set up the axios instance, so that we can re-use it later. The API from HackerNews to get top stories only return the IDs, so that we need to fetch each individual item after receiving the arrays.

Next, we create a new component at components/Stories.vue as below:

Then add VueX to the main.js

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
import "./assets/css/main.css";
const app = createApp(App);
app.use(store);
app.mount("#app");

Finally, we edit App.vue

Open the http://localhost:3000 and voilà.

![Top stories from Hacker News(https://dev-to-uploads.s3.amazonaws.com/i/hvhu4g5gnpfii0os2xwk.png)

Hmm, I forgot the time, we need to make it more readable, instead of a string of numbers. I gonna use the timeago.jspackage to manipulate.

yarn add timeago.js

Then, we add a new method in components/Stories.vue:

methods: {
  parseTime(t) {
    return timeago.format(t * 1000);
  }
},

and implement it in template section:

<div class="text-sm text-gray-500">{{ parseTime(item.time) }}</div>

Reload the page to check the result

The final source code is on Github repo.
In the next article, we will implement advanced features of Vue components to render them dynamically. I would appreciate to receive any feedback from you guys

Resources:
Vite.JS
Vuex@Next
Official Hacker News API
Tailwind CSS