[JavaScript] Data Types

JS is a dynamic typing language, i.e. the data type of a variable is inferred by its value.

In other words, variables don't have a type, but values have a type.

JS has several primitive data types and an object type. However, I will explain it from the point of the developer.

If a data types are not a primitive type, it is an object type.

All primitive types are immutable.

Let's find out about the data types of JS.

Number

The number type of JS is represented by a double-precision 64bits floating point.

It can have an integer number, zero, and floating number including positive and negative.

const num_var1 = 7;
console.log(`value: ${num_var1}, type: ${typeof num_var1}`);
// value: 7, type: number
const num_var2 = -5;
console.log(`value: ${num_var2}, type: ${typeof num_var2}`);
// value: -5, type: number

const num_var3 = 0;
console.log(`value: ${num_var3}, type: ${typeof num_var3}`);
// value: 0, type: number
const num_var4 = -0;
console.log(`value: ${num_var4}, type: ${typeof num_var4}`);
// value: 0, type: number

const num_var5 = 3.14;
console.log(`value: ${num_var5}, type: ${typeof num_var5}`);
// value: 3.14, type: number
const num_var6 = -2.71828;
console.log(`value: ${num_var6}, type: ${typeof num_var6}`);
// value: -2.71828, type: number

const num_var7 = 1 / 0;
console.log(`value: ${num_var7}, type: ${typeof num_var7}`);
// value: Infinity, type: number
const num_var8 = -1 / 0;
console.log(`value: ${num_var8}, type: ${typeof num_var8}`);
// value: -Infinity, type: number

const num_var9 = 'Melong';
console.log(`value: ${1 * num_var9}, type: ${typeof 1 * num_var9}`);
// value: Melong, type: NaN

JS is case-sensitive, so you have to care about it.

console.log(typeof Infinity); // number
console.log(typeof infinity); // undefined
console.log(typeof NaN); // number
console.log(typeof Nan); // undefined

I'll show you truthy and falsy of numbers.

console.log(1 ? 'true' : 'false'); // true
console.log(-1 ? 'true' : 'false'); // true

console.log(0 ? 'true' : 'false'); // false
console.log(-0 ? 'true' : 'false'); // false

console.log(3.14 ? 'true' : 'false'); // true
console.log(-3.14 ? 'true' : 'false'); // true

console.log(Infinity ? 'true' : 'false'); // true
console.log(-Infinity ? 'true' : 'false'); // true

All numbers are handled as true except 0 and -0.

NaN (Not a Number)

NaN means it is not a number.

const nan_var = NaN;
console.log(`value: ${nan_var}, type: ${typeof nan_var}`);
// value: NaN, type: number

We can check whether the variable is NaN or not using isNaN() or Number.isNaN().

But, it is a little different.

Show this example.

const nan_var1 = NaN;
const nan_var2 = 'hello';
const nan_var3 = '3';
console.log(`${isNaN(nan_var1)} vs ${Number.isNaN(nan_var1)}`);
// true vs true
console.log(`${isNaN(nan_var2)} vs ${Number.isNaN(nan_var2)}`);
// true vs false
console.log(`${isNaN(nan_var3)} vs ${Number.isNaN(nan_var3)}`);
// false vs false

As you can see, Number.isNaN() is more strict.

It not only checks NaN but also checks number type.

Moreover, both convert string type to number type if it can be changed.

 

Let me show you one more thing.

console.log(NaN ? 'true' : 'false'); // false
console.log(`${NaN == NaN}`); // false
console.log(`${NaN === NaN}`); // false

NaN is handled as false, and it is not the same as itself.

BigInt

BigInt is added from ES11.

It is added to handle large numbers that cannot be handled by number type.

A BigInt value is created by appending n to the end of an integer literal, or by calling BigInt() function.

const bigint_var1 = 9007199254740991
console.log(typeof bigint_var1); // number

const bigint_var2 = 9007199254740991n
console.log(typeof bigint_var2); // bigint

const bigint_var3 = BigInt(9007199254740991)
console.log(typeof bigint_var3); // bigint

BigInt type is similar to the number type in some ways, but also a little different in a few things.

BigInt type and number type cannot mix together.

BigInt value cannot be used with methods in the built-in Math object.

String

The String type is immutable UTF-16 and is composed of more than one character.

We can make strings using a single quote or a double quote.

const str_var1 = 'This is a test string.';
const str_var2 = "Hello, I'm HoYa.";

From ES6 we can use template literal using backtick.

It evaluates expressions and creates a string.

const name = 'HoYa';
const age = 18;
console.log(`My name is ${name} and I'm ${age} years old.`);
// My name is HoYa and I'm 18 years old.

We can also use escape sequences.

\0	null	\b	backspace	\n	line feed	\r	carriage return
\t	horizontal tab	\v	vertical tab	\f	form feed	\uXXXX	Unicode
\'	single-quote	\"	double quote	\\	back slash

Let's find out about an empty string.

console.log("" ? 'true' : 'false'); // false
console.log(`${new Number("")}`); // 0
console.log("" == ""); // true
console.log("" === ""); // true

An empty string is handled as false, it is the same as itself.

Boolean

The Boolean type has a value of true or false.

const true_var = true;
const false_var = false;
console.log(`value: ${true_var}, type: ${typeof true_var}`);
// value: true, type: boolean
console.log(`value: ${false_var}, type: ${typeof false_var}`);
// value: false, type: boolean

undefined

undefined is literally an undefined type.

console.log(`${typeof undefined_var}`);
// undefined

It is the default value of all variables defined by var.

const undefined_var = undefined;
console.log(`value: ${undefined_var}, type: ${typeof undefined_var}`);
// value: undefined, type: undefined

Let me show you some interesting things.

console.log(undefined ? 'true' : 'false'); // false
console.log(`${new Number(undefined)}`); // NaN
console.log(`${undefined == undefined}`); // true
console.log(`${undefined === undefined}`); // true

undefined is handled as false the same as the NaN.

If we create a Number with undefined, it becomes NaN.

 

We can initialize a variable with this characteristic.

let undefined_var;
...
undefined_var = undefined_var || 7;
console.log(`value: ${undefined_var}, type: ${typeof undefined_var}`);
// value: 7, type: number

If the variable is not initialized yet, i.e. undefined, it will be initialized.

null

null means a variable is defined but doesn't have a value.

const null_var = null;
console.log(`value: ${null_var}, type: ${typeof null_var}`);
// value: null, type: object

Let's dig into the null.

console.log(null ? 'true' : 'false'); // false
console.log(`${new Number(null)}`); // 0
console.log(`${null == null}`); // true
console.log(`${null === null}`); // true

null is handled as false as well.

If we create a Number with null, it becomes 0.

 

If you are interested in the history of type null, see the below link.

It explains why the type of null is treated as an object even though it is a primitive type.

https://2ality.com/2013/10/typeof-null.html

Symbol

The symbol type is added from ES6. It is a value that is an immutable primitive type.

The symbol type's value is a unique value.

It is mainly used for making unique property keys of objects.

Unlike other primitive types, the symbol type uses Symbol() function to create value.

let symbol_var = Symbol('key');
console.log(typeof symbol_var); // symbol

Object

An object consists of key and value pairs.

JS treats almost everything as an object type except for primitive type.

const obj_var = {
  name: 'HoYa',
  age: 18
};
console.log(`value: ${JSON.stringify(obj_var)}, type: ${typeof obj_var}`);
// value: {"name":"HoYa","age":18}, type: object

Now, let's look at empty objects.

console.log({} ? 'true' : 'false'); // true
console.log(`${new Number({})}`); // NaN
console.log(`${{} == {}}`); // false
console.log(`${{} === {}}`); // false

Every empty object is treated differently.

Array

An array is a group of values. Unlike other languages like C, an array in JS can have various types.

const arr_var = [1, 'test', 3.14];
console.log(`value: ${arr_var}, type: ${typeof arr_var}`);
// value: 1, test, 3.14, type: object

How is the empty array?

console.log([] ? 'true' : 'false'); // true
console.log(`${new Number([])}`); // 0
console.log(`${[] == []}`); // false
console.log(`${[] === []}`); // false

Yes, an empty array is handled as true.

Moreover, it is not the same as itself, because it is located in its own memory space, as is the object type.

Compares Each of Them

Let's compare the NaN, undefined, and null.

They are all treated false.

console.log(`${NaN == undefined}, ${NaN == null}, ${undefined == null}`);
// false, false, true
console.log(`${NaN === undefined}, ${NaN === null}, ${undefined === null}`);
// false, false, false

Now, Let's compare the remaining types.

console.log(`${0 == ""}, ${0 == []}, ${0 == {}}`);
// true, true, false
console.log(`${"" == []}, ${"" == {}}, ${[] == {}}`);
// true, false, false
console.log(`${0 === ""}, ${0 === []}, ${0 === {}}`);
// false, false, false
console.log(`${"" === []}, ${"" === {}}, ${[] === {}}`);
// false, false, false

As you can see in the above examples, JS's type system is chaos.

So, if you need to compare things, you have to use the identity operator (===).