Recently, I took a 100 dollar JavaScript course called Just JavaScript.

It was created by Dan Abramov, a member of the React team and co author of Redux and Create React App.

As the name suggests, it is really just JavaScript. But it teaches you JavaScript extremely well.

The course begins by completely breaking your mental model of JavaScript, then slowly rebuilding it by explaining the reason behind everything. It fundamentally changes how you think about even the smallest aspects of the language.

Take this example for a moment.

let x = "One"; 
console.log(x === "One");
let y = {};
console.log(y === {});

What do you think will be logged here? Take a moment to think about it and write down your reasoning below to lock in your answer. Then check the solution to see if you got it right.

Solution

Drumroll please🥁🥁🥁🥁

let x = "One"; 
console.log(x === "One"); //true
let y = {};
console.log(y === {}); //false

If you have been working with JavaScript for a while, you might not find it surprising. But if you are completely confused like I was, keep reading.

False? But how?

This is how I initially thought about it.

/* 
 we have: y = {}
 and: {} === {}
 so substituting {} with y, we get:
*/
y === {} // true?

But the actual result is:

y === {} // false

How does that make any sense?

It turns out I was mistaken. There is something deeper happening here. To understand it, we first need to clear up the basics and establish some common ground. We will circle back to this later.

The Basics

Do me a favor and log these values in your browser console.

console.log(typeof(undefined));
console.log(typeof(null));
console.log(typeof(true));
console.log(typeof("hello"));
console.log(typeof(2));

I will share the results below, but trust me you will learn much more if you try it yourself.

Done? Here are the logs.

console.log(typeof(true)); //boolean
console.log(typeof("hello")); //string
console.log(typeof(2)); //number
console.log(typeof(undefined)) //undefined
console.log(typeof(null)); //object

"Wait… what? null is of type object?"

If that was your reaction, I regret to inform you that this is due to an annoying bug that was accidentally introduced into JavaScript. Unfortunately, it cannot be fixed because it would break existing code.

And this gives us our first insight.

Modern JavaScript has seven primitive types: undefined, null, boolean, number, string, bigint, and symbol.

Just like there are seven wonders of the world, seven seas, seven colors of the rainbow, seven continents, and seven days of the week. Of course it had to be the number seven.

The remaining two, BigInts and Symbols, exist but are rarely used so will not be in the spotlight. I will talk about them in future posts.

Primitive Values

Here is the full list.

• Undefined (undefined), unintentionally missing values.

• Null (null), intentionally missing values.

• Booleans (true, false), logical operations.

• Numbers numerical values for mathematical calculations.

• Strings text values.

• BigInts uncommon, for extremely large numbers.

• Symbols uncommon, used to hide internal implementation details.

Objects and Functions

• Objects used to group related data and code.

• Functions references to executable code.

  If you are wondering “What about arrays and all that stuff?” the answer is that almost everything else in JavaScript is an object.

  Well, maybe not literally everything, but almost everything.

Creating a Mental Model. Variables mean Wires

That was a lot of information. Now let us build intuition and develop a mental model.

Variables behave like wires. More precisely, they point to a value in memory. You can think of variables as wires that are attached to a value.

Instead of remembering where a value is stored, you can refer to it with the variable.

For example, take this simple piece of code.

let a = 5;

JavaScript does a few things under the hood.

• First, it creates a variable called a.

• Then it takes the value five and attaches it to the variable a. Technically speaking, it stores a reference to the value five inside the variable a.

• The next time we access a and ask for its value, it will direct us to that value.

• The important point here is that the value five is not stored inside the variable a. The variable only holds a reference. This is very important.

So what happens when we do this.

let a = 5;
let b = 5;

Think for a moment, then see the solution.

Surprising right? This was my aha moment. JavaScript can reuse the same primitive value across multiple variables. Everything begins to make sense now.

Using the Mental Model

You may ask “What do we do with this information?”

Remember the first example.

let x = "One"; 
console.log(x === "One"); //true
let y = {};
console.log(y === {}); //false

We now have the concepts to understand it. Let us break it into smaller parts and understand each piece.

let x //declare a variable called x

let x = "One" //attach that variable to a string value called One

let y //declare a second variable called y

let y = {} //attach that variable to an empty object

Did you notice a difference?

One is a primitive value and the other is not. That is the crucial point.

You may ask “How does that make any difference?”

The difference lies in how references are stored. When you refer to a primitive value, for example the string One, JavaScript has only one copy of that string. There cannot be two separate values that both literally represent One.

Not convinced? Here is proof.

let str = "idea";
str[0] = '1';
console.log(str); // ??

Think about it, then check the result.

let str = "idea";
str[0] = '1';
console.log(str); // "idea"

This prints idea or throws an error in strict mode. You might think that if we can access characters of a string like an array, then we should be able to modify them. Right?

We cannot, because it is a primitive value. JavaScript will never allow us to change a primitive value. Primitive values are immutable and compared by value. They cannot change and cannot have duplicates.

Objects

So what happens when we do this.

let a = {};
let b = {};

Think and experiment with it, then see the solution.

Strange right? Why does it not reference the same object? Why create a new object?

This is because objects have a special status in JavaScript.

Each time you create an empty object, a completely new reference is created.

When you think about it, this makes sense. Objects hold properties and represent their own context.

That is why we can do this.

let obj1 = {name: 'sajan'};
let obj2 = {name: 'joy'};
console.log(obj1.name);
console.log(obj2.name);

If all objects were attached to the same reference, property values would clash instantly.

Now we can finally return to the example from the beginning.

let x = "One"; 
console.log(x === "One"); //true
let y = {};
console.log(y === {}); //false

The triple-equals operator (===) compares primitive values by value and compares objects by reference. For primitives, JavaScript checks whether the actual values are the same. But for objects, it only checks whether both variables point to the exact same object in memory — not whether the objects contain the same properties or “look” identical.

With this understanding, we can determine the results easily.

Since a string is a primitive value, It will be compared by value. Therefore:

let x = "One"; 
console.log(x === "One"); //true

But objects are special and a new instance is created each time. They are compared with reference. A object y which is equal to an object ({}) will not equal to another empty object ({}) because they different references. So That gives us:

let y = {};
console.log(y === {}); //false

I hope I was able to clarify a few things. This is just a small fraction of what the course teaches you about JavaScript.

That said, the course is quite short and doesn’t cover the entirety of JavaScript. It mainly focuses on primitives and objects, and you can finish it in just a few hours.

I would recommend this course only if you already have a solid foundation and want to dig deeper into the language.

See you in my next blog 😄✌️