Understanding Types in JavaScript

One of the most peculiar characteristics of JavaScript is the behavior of data types, but understanding their behavior allows us to know how our data behaves during execution.

What Is a Type?

Basically, types define the behavior that data will have.

“A type is an intrinsic, built-in set of characteristics that uniquely identifies the behavior of a particular value and distinguishes it from other values, both for the engine and the developer” You Don’t Know JS: Types & Grammar

What Types Exist?

The language specification defines the types:

• string
• number
• boolean
• null
• undefined
• object
• symbol

Before we continue, it’s important to note that in JavaScript, variables don’t have types — values do. Variables can hold any type.

“Variables in JavaScript don’t have types — values are the ones that have types”

These types are divided into two categories:

Primitives

string, number, boolean, null, undefined

Let’s understand their behavior.

When we define a primitive value:

let variable = "hola"; //string

The variable name is instantiated in its scope, and this name references the location in memory where the value is stored.

Now, if we assign this variable to another, the value is copied to another location in memory, and each variable points to a different location.

This behavior means that if we declare a primitive value inside a variable with const, it will be immutable, since it can’t be reassigned.

By Reference

object

Objects define subtypes, which are: String, Number, Boolean, Object, Function, Array, Date, RegExp, Error

When we define an object:

let obj = {nombre: 'yeison'}

The variable name is instantiated in its scope, and it references the object in memory. The object contains a list of its properties, which in turn reference where the values are stored.

Now, if we assign obj to another variable, the object it references won’t be copied. What happens instead is that the new variable becomes another reference to the same object.

let obj2 = obj

That’s why if we change the nombre property of obj2, since both variables point to the same object, it will also change in obj.

obj2.nombre = "camilo";

console.log(obj.nombre) // camilo

This is the behavior of objects in JavaScript, and it works the same way for objects nested inside other objects.

let identify = {
  name: {
    first: "yeison",
  },
  social: {
    twitter: "@yeion7"
  }
};

Which would look something like this:

And if I were to do:

let identify2 = identify.name

identify2 = {first: "juan"}

console.log(identify.name.first) // ???

What would it show in the console?

As we saw, not everything in JavaScript is an object, but all values relate through references/pointers. Having a solid understanding of how the different types work will allow us to understand how to work with our values without ending up with unexpected mutations.

I recommend watching this video that shows some quirks of the language regarding types.