Javascript Primitives

Javascript is a very widely used and extremely useful language due to its dynamic. However, there are a lot of concepts in javascript which make developers confused such as data type, class, method inheritance.

In this post, I will introduce primitive types in Javascript and related topics.

Definition

What are Primitives in Javascript?

In javascript, any variable must belong to one of three types not defined, object, or primitive.

There are 7 types of primitives in Javascript:

• string
• number
• bigint
• boolean
• null
• undefined
• and symbol. (source).

Where bigint and symbol are 2 new primitive types added from ES6?

Several notes:

• typeof null is 'object'.
• typeof NaN, typeof Infinity, typeof -Infinity, typeof +0, typeof -0 are all 'number'.
• typeof new Number(0), typeof new String('1') are all 'object'.

Equivalent wrapper objects

Most of the primitives (except null and undefined) have equivalent object wrapper.

String for string. Number for number. BigInt for bigint. Boolean for boolean. Symbol for symbol.

Note that the primitive-associated object is a normal Javascript object which keeps (wrap around) a primitive value, and is not primitive.

All primitive-associated classes' prototypes have valueOf method without any argument which returns the associated primitive value.

All primitive-associated classes are function themselves, which takes an input value and return a primitive value.

All expressions in following snippet return true.

new Number(3) !== new Number(3)
new Number(3) !== 3
3 !== new Number(3)
new Number(3).valueOf() === 3
Number(3) === 3
Number() === 0
String() === ''
Boolean() === false
Boolean(1) === true
BigInt() // throws error

Take the attention at  Boolean() function, this is very useful to give conditional elements in an array. I usually use this pattern for optional className in React

['container', isOpen && 'open', isActive && 'active'].filter(Boolean).join(' ')

Method call, property access from primitive value

As definition from MDN docs, primitives do not have method. So, How do '123'.length, or '123'.indexOf('1') calls work? Do these calls imply that string primitive has property or method?

The answer is no. When primitives are placed as an object, in another word, they are asked for property. The interpreter creates a temporary wrapper object which keeps the primitive value, requests the property from prototype chain of the wrapper object to returns the value. Then, they destroy the wrapper object immediately after the call finishes.

String.prototype.self = function(){return this}
'1'.self() // returns the temporary object
'1'.self() !== '1'.self() //returns true
1.valueOf() // syntax error
(1).valueOf() // returns 1

valueOf method

valueOf method is used when primitive value is required in expression, such as +, - operands. valueOf of Object return the object itself.

Check following code snippet

1 + new Number(2) === 3 // true
'hello ' + new String('world') === 'hello world'
const foo = {}
1 + foo === '1[object Object]' // true
foo.valueOf = () => 2
1 + foo === 3 // true
foo.valueOf = () => ' is one'
1 + foo === '1 is one' //true

typeof operator

You may see typeof positioned as a function typeof(1) === 'number'. However, typeof is indeed an unary operator in Javascript, which can be used with parenthesis. For example: typeof 1 === 'number'.

typeof operator always returns a string value or throws ReferenceError.

Returned value can be 'undefined', 'object', 'boolean', 'number', 'bigint', 'string', 'symbol', 'function'.

If the operand variable is not defined, typeof operator returns 'undefined'. This behavior emphasizes that typeof is an operator, NOT a function.

typeof anUnknonwVariable === 'undefined'
typeof undefined === 'undefined'
typeof null === 'object' // due to historical reason
typeof () => 0 === 'function'

Example of Temporal Dead Zone (TDZ):

const func = () => typeof a // ok
typeof a // RefrenceError. TDZ of a
let a
func()

undefined vs not defined vs declared but not initialized

undefined is a value defined by javascript runtime.

Variables that are declared but not initialized have undefined value by default.

Variables that are not declared anywhere are not defined. Not defined variables can be placed as typeof operator 's operand to returned 'undefined'.

I have introduced the topic related to primitive type in Javascript. Please do not feel hesitate to leave a comment.

I am going to write some more posts around Javascript language. You can check it out here.