Over a million developers have joined DZone.

JavaScript values: not everything is an object

DZone 's Guide to

JavaScript values: not everything is an object

· Web Dev Zone ·
Free Resource
This blog post explains that JavaScript has two main kinds of values: primitive values and objects. There are several things one needs to be aware of when working with them.

Kinds of values: primitives versus objects

Values can be partitioned into two main kinds: primitives and objects. The difference is explained below. There are the following values in JavaScript.
  • Primitives:
    • string: "abc"
    • number: 4, 3.57 (all numbers in JavaScript are floating point)
    • boolean: true, false
    • null: explicitly assigned (see below)
    • undefined: default value (see below)
  • Objects – wrappers for primitives: Boolean, Number, String. Rarely needed.
  • Objects – alternatives to literals. In the following cases it is better to use literals. But literal and constructor are equivalent.
    • [] is the same as new Array()
    • {} is the same as new Object()
    • function() {} is the same as new Function()
    • /\s*/ is the same as new RegExp("\\s*")
  • Objects – Date
The primitives mybool, mynum and mystr are held directly in variables. myobj1 and myobj2 contain references to the same object.
The difference between primitives and objects is as follows (see diagram above).
  • A primitive is a value that can be stored in its entirety in a variable. [Primitives being immutable, it does not matter whether a JavaScript engine actually implements it this way. But it helps with understanding how primitives and objects are different.] In an assigment y=x with x holding a primitive, y will receive a copy of x. Primitives are immutable.
  • An object is a value that exists externally to variables. Variables don’t hold objects directly, but rather references to objects. In an assigment y=x with x holding such a reference, only the reference will be copied. Both x and y will refer to the same object and changes made via one variable will be observable via the other variable. All non-primitives are objects. That is, you can do things such as adding a property etc. Note that that includes arrays and functions.

      > function foo() {}
    > foo.myprop = 123;
    > foo.myprop

    Pitfall: Primitive values and their wrappers


  • Ignore wrapper types as much as possible. In contrast to other programming languages such as Java, you will rarely notice them.
The three primitive types string, number and boolean have corresponding types whose instances are objects: String, Number, Boolean. They are sometimes called wrapper types and converting between primitive and wrapper is simple:
  • Primitive to wrapper: new String("abc")
  • Wrapper to primitive: new String("abc").valueOf()
Primitive values such as "abc" are fundamentally different from wrapper instances such as new String("abc"):

 > typeof "abc"
> typeof new String("abc")
> "abc" === new String("abc")

Wrapper instances are objects and there is no way of comparing objects in JavaScript, not even via non-strict equals == (which is more lenient than the preferred strict equals ===).

 > var a = new String("abc");
> var b = new String("abc");
> a == b
> a == a

Primitive values don’t have methods of their own

Wrappers are rarely need in JavaScript, as primitives can be stored anywhere without wrapping them. But primitives don’t have their own methods and borrow them from wrappers:

> "abc".charAt === String.prototype.charAt

There are two ways that this borrowing is done. The old way is to convert a primitive to a wrapper, on the fly. The new way (via ECMAScript 5 strict mode) is to transparently use the methods from the wrapper’s prototype. The following code illustrates the difference [inspired by “The Secret Life of JavaScript Primitives”].

String.prototype.getType = function() {
return typeof this;
String.prototype.getTypeStrict = function() {
"use strict";
return typeof this;



Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}