JavaScript Primitives vs. Objects for Complete Beginners

Primitives vs. Objects

If you've been following along with this lesson series, you might have heard me say "everything in JavaScript is an object". Until now, I haven't explained myself.

But since we will be covering a lot of these built-in JavaScript functions and objects in this lesson, you need to have a basic understanding of primitives vs. objects.

Here is what I mean:

const string1 = new String("Hello, world!");
const string2 = "Hello, world!";

console.log(string1 === string2); // false
console.log(string1 == string2); // true

Remember the === and == from lesson 3? Triple equals compares both type and value. Double equals just compares value.

The value of these "strings" are equal, but the type is not (one is an object and one is a string).

You're probably thinking–"so you're telling me that string1 is not a string???!".

That's exactly what I'm telling you. And furthermore, some might argue that string2 is not a string because it has "methods" on it. For example:

// This code is valid
"am I a string?".toUpperCase();

How on earth can a "string" also have a method like this? We will not answer this question in a huge amount of detail, but I want to at least address it.

What is a primitive value?

Think of a "primitive" as the simplest form of something. If a coding language had a "periodic table of elements", it would be filled with "primitives".

In JavaScript, there are six primitives.

string
number
bigint
boolean
undefined
symbol

We haven't talked about all of these, and that's okay.

A "primitive" data type does not have any "methods" attached to it, but behind the scenes, JavaScript wraps primitive values with their corresponding Object value. This is why 'some string'.toUpperCase() is valid JavaScript code.

So what do I do about this?

I created this section of the lesson series because this was a question that I had when I learned JavaScript.

I recommend that you take this as "good to be aware of" information, but do not go any further than that yet. Once you are more experienced, you can go back and learn the underlying details of the JavaScript language. If you are a naturally curious person like me, I suggest reading the following short resources and then return to the lesson.

Let's return to the code at the beginning of this section with some comments to wrap up our short discussion on primitives.

// DO NOT define your strings like this
const string1 = new String("Hello, world!");

// DO define your strings like this
// We call this a "string literal"
const string2 = "Hello, world!";

console.log(string1 === string2); // false
console.log(string1 == string2); // true

// Here, we are converting string1 from an Object to a primitive and then comparing
console.log(string1.valueOf() === string2); // true

// JavaScript will wrap string2 in a String object prior to executing this method
// You don't need to do anything further than this
console.log(string2.toUpperCase());

What is this "new" keyword?

Another reason I wanted to visit this section is because as we move into topics like JavaScript Dates (next section), you will start to see a JavaScript keyword, new.

Technically, new is an operator, but we didn't cover it in our lesson about operators. Here is what the new operator does:

Creates a blank JavaScript object
Links this new object to a "parent" object

There are actually some additional steps, but not relevant to us yet.

In plain English, the new operator creates an "instance" of an existing object. We will revisit this concept later in the series. For now, whenever you see the new operator, just think of it like this:

We have some existing, pre-defined object such as Date
We want a "copy" of that object that we can store in a variable
So... We use the Date as a "template" to create that "copy"