This page looks best with JavaScript enabled

Objects and Primitives in Javascript

 ·   ·  ☕ 3 min read

Get to know all the practical knowledge about Javascript primitives and objects.

In JavaScript, objects are king. If you understand objects, you understand JavaScript.
- W3 Schools

Everything except primitives is an object in Javascript. A couple of days back, we were talking about Javascript having the following primitives: bool, number, string, undefined and null.

Primitives are quite easily defined and accessed -

1
2
3
var name = "Mr. Anderson";
var x = 1;
var universe = null;

Objects on the other hand.. can also be easily defined and accessed.

1
2
var planets = ["earth", "pluto"];
var apple = { color: "red" };

Objects have properties, or props as they are affectionately known.

1
2
console.log("# real planets: ", planets.length);
console.log("color of apple is: ", apple.color);

Things become interesting in Javascript when primitives are also treated as objects.

1
2
3
4
5
6
7
8
9
var worldExists = true; // primitive
console.log("value ", worldExists); // true
console.log("type ", typeof worldExists); // boolean

var objExists = new Boolean(true); // boolean as object
console.log("obj ", objExists); // [Boolean: true]
console.log("obj value ", objExists.valueOf()); // true
console.log("obj type ", typeof objExists); // object
console.log("obj value type", typeof objExists.valueOf()); // boolean

This is true for other types as well. Consider the below example of a string.

1
2
3
4
5
6
7
8
9
var name = "Mr. Anderson";
console.log("primitive name: ", name); // Mr. Anderson
console.log("primitive valueOf: ", name.valueOf()); // Mr. Anderson
console.log("primitive type: ", typeof name); // string

var nameObj = new String("Neo");
console.log("obj name: ", nameObj); // [String: 'Neo']
console.log("obj valueOf: ", nameObj.valueOf()); // Neo
console.log("obj type: ", typeof nameObj); // object

Javascript internally manages to make primitives behave as objects (“coerces”, or “applies coercion”) when we try to do such things in our code.

So, should we just treat any primitive as an object and go wild?

Emm.. no. You cannot set props against a primitive for one.

1
2
3
4
var worldExists = true; // primitive
worldExists["confirmed"] = "y";
console.log("worldExists ", worldExists); // true
console.log("confirmed? ", worldExists["confirmed"]); // undefined

You can do that quite easily for an object.

1
2
3
4
5
var objExists = new Boolean(true); // [Boolean: true]
objExists["confirmed"] = "y";

console.log("obj ", objExists); // [Boolean: true] { confirmed: 'y' }
console.log("obj ", objExists["confirmed"]); // y

You will not find differences in real-world programming - since you naturally keep them separated :). But it is important to know why you do that distinction.

So, what should you use in your code - primitives, objects, or primitives disguised as objects?

  • Use primitives when available
    We know, understand and love the variable for what they are, and not what they hide.
  • Use objects for rest of the circumstances
  • Do not mix and match, i.e., start with primitives and change them to be objects later in the program. Although you feel adventurous on a specific day, you will be left high and dry when trying to debug strange behaviours that could destroy humanity
Stay in touch!
Share on

Prashanth Krishnamurthy
WRITTEN BY
Prashanth Krishnamurthy
Technologist | Creator of Things