Javascript is 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 about primitive type in Javascript and related topic.


Definition

What is 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.


Equivalent wrapper object

Most of 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 keep (wrap around) a primitive value, and is not primitive.

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

All primitive-associated classes are function itself, whose takes an input value and returns 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
All expressions (except the last) return true

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

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

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 other 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 value. Then, the 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
all comparison expressions return 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 behaviour 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'

undefined vs not defined vs declared but not initialized

undefined is a value defined by javascript runtime.

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

Variables which 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 comment.

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