JavaScript Primitives vs Objects
Primitive Values vs Objects
JavaScript values can be primitive values or objects.
Primitive values are simple values.
Objects are collections of properties.
Primitive Values
A primitive value is a value that is not an object.
JavaScript has seven primitive types:
stringnumberbooleanbigintsymbolundefinednull
Example
let text = "Hello";
let count = 123;
let valid = true;
Objects
An object is a collection of properties.
Objects can contain data and functions.
Example
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
Arrays, functions, dates, regular expressions, maps, and sets are also objects.
Primitive Values Are Not Objects
Primitive values are not objects.
Primitive values do not store properties.
Example
let text = "Hello";
document.getElementById("demo").innerHTML = typeof text;
The result is:
string
Object Wrappers
JavaScript provides object wrappers for some primitive types.
| Primitive Type | Object Wrapper |
|---|---|
string |
String |
number |
Number |
boolean |
Boolean |
Object wrappers make it possible to use methods on primitive values.
Example
let text = "Hello";
document.getElementById("demo").innerHTML = text.toUpperCase();
When a method is used on a primitive value, JavaScript temporarily treats the value as an object.
Primitive Strings vs String Objects
A string literal creates a primitive string.
The new String() constructor creates a String object.
Example
let a = "Hello";
let b = new String("Hello");
document.getElementById("demo").innerHTML =
typeof a + "<br>" + typeof b;
The result is:
string
object
Primitive Numbers vs Number Objects
A numeric literal creates a primitive number.
The new Number() constructor creates a Number object.
Example
let a = 123;
let b = new Number(123);
document.getElementById("demo").innerHTML =
typeof a + "<br>" + typeof b;
The result is:
number
object
Primitive Booleans vs Boolean Objects
A boolean literal creates a primitive boolean.
The new Boolean() constructor creates a Boolean object.
Example
let a = true;
let b = new Boolean(true);
document.getElementById("demo").innerHTML =
typeof a + "<br>" + typeof b;
The result is:
boolean
object
Avoid Wrapper Objects
Primitive values are normally preferred.
Wrapper objects are rarely needed.
Do not create String, Number, or Boolean objects unless you have a specific reason.
Example
let a = "John";
let b = new String("John");
document.getElementById("demo").innerHTML = (a === b);
The result is:
false
Boolean Objects Are Always Truthy
All objects are truthy in JavaScript.
This includes Boolean objects that contain false.
Example
let x = new Boolean(false);
if (x) {
document.getElementById("demo").innerHTML = "This is true";
}
The result is:
This is true
BigInt and Symbol
BigInt() and Symbol() return primitive values.
They cannot be used with the new keyword.
Example
let x = BigInt(123);
let y = Symbol("id");
document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
The result is:
bigint
symbol
Summary
| Value | Type | Recommended |
|---|---|---|
"Hello" |
Primitive string | Yes |
new String("Hello") |
String object | No |
123 |
Primitive number | Yes |
new Number(123) |
Number object | No |
true |
Primitive boolean | Yes |
new Boolean(true) |
Boolean object | No |
