We already know what JavaScript is, how it was created, and the keywords we can use while programming using this language. Now we’re getting to know our data types, and how we can make use of the ways JavaScript handles them.
By the end of this post, you should be able to understand how JavaScript handles values under the hood and you’ll have the ability to tell them apart at a glance… at least that I hope, so let’s get into it!
TL;DR
- JS has two both primitive and reference types.
- Primitives types: string, number, bigint, boolean, symbol, undefined, null.
- Reference types: object, array, function.
- You can use typeof function to inspect types, though, be mindful that, sometimes, JavaScript can handle types in every way but a logical one.
- Understand the difference between checking type equality via == (loose) and === (strict) operators.
- Remember! you must be careful while modifying both objects and arrays as they are mutable, even if declared with const.
Data Types: what are they?
This is one of the first things we need to make sure we understand when programming in any language. No matter the task you’re working on, the chances for you to stumble upon the need to use the right data type will come up. As a concept, data types might be a bit confusing at the beginning for some people but believe me it is way simpler than it sounds.
First you need to understand that data types themselves are only a way for JavaScript to represent different kinds of values, and we categorize them in Primitive or Reference
Primitive Types
These data types are pretty simple, they are not objects and have no methods with them and they are sometimes treated as the lowest level of implementation of programming languages.
The primitive types in JS are:
- string: Used to store text values (eg. “hello!”).
- number: numbers and floats (numbers including decimal points)
- bigint: Used to represent whole numbers larger than 2^53 - 1 (the largest number JavaScript can reliably represent with the Number primitive)
- boolean: Simple, true or false.
- symbol: An immutable and unique primitive value.
- undefined: A variable that has been declared but not assigned.
- null: “Empty” value.
Reference (Non‑Primitive) Types
These data types represent more complex data structures, and their values are not directly stored in the variable. Instead, the variable stores a reference to where the object is stored in memory. This is important to keep in mind because it means when we copy the variable to another both will be storing the same reference, so any changes made through one variable will reflect in another.
The reference types in JavaScript are:
- object: key/value stores.
- array: a kind of object: ordered lists.
- function: also objects, but callable.
How can I tell the Type?
As I mentioned before, the type is something that most times you’d be able to tell just by looking at the value… or at least that would be true in most Object Oriented Programming Languages, not on JavaScript though. See, as I explained in the first article of this series, JavaScript is what we call “loosely typed”. Which turns out to generate some really interesting situations. For example, we know that Null as a type means it has no value, this being said when checking the type of Null the result states that the variable is an object.
In JavaScript if we want to know a type of a variable at any specific moment, we can use the typeof operator. This operator allows us to see the type of any variable or value at any given time.
Type Conversion & Coercion
JavaScript is a funny programming language, and even though there’s others that also handle things similarly, I’d say JavaScript is the most aggressive of the bunch. When talking about types, it tries to be ”helpful” by automatically switching types when it believes it makes sense. This is what we call Coercion, and while in some cases it can actually save us time it generally leads to some pretty awkward situations too. Though to avoid this we created things like TypeScript, which we’ll be touching on later in the series.On the other hand we have Conversion which is the action of forcing a value to a specific type.
Now let me show you the difference between Conversion and Coercion in code:
Type conversion (explicit) → You tell JS exactly what type you want:
Number("42"); // 42
String(10); // "10"
Boolean(0); // falseType coercion (implicit) → JS changes the type for you, often in comparisons or math:
"5" * 2; // 10
5 + "5"; // "55"And since coercion can turn values into booleans behind the scenes, we also get the concepts of truthy and falsy values.
Loose equality (==) vs Strict equality (===)
Another thing to keep in mind is how we check for equality in values. When validating if 2 values are the same we use the equality operator (==) but this is not the end of the story. When validating equality we need to keep an eye on the coercion of values. A string and a number with the same value can be considered the same under a loose equality operator but they are different when reviewing for strict equality.
0 == false; // true
0 === false; // false
"" + 5; // "5" (string)
5 + ""; // 5 (string)
"5"+"5"; // 55 (string)Truthy and Falsy
JavaScript treats certain values as false in a boolean context, this is what we call falsy values which are considered “empty” no number, no text, no object. Everything else is truthy.
if ("hello") { console.log("Runs!"); } // truthy
if (0) { console.log("Won't run"); } // falsyBest Practices
- Use const for values you don’t want to reassign, but remember objects can still be modified.
- Favor === unless you have a specific coercion case.
- Avoid comparing null and undefined loosely, using explicit typing helps readability.
- Use Number(), String(), Boolean() when converting variable types but only when strictly needed.
- If you are modifying a type using Number(), String(), Boolean() , consider wrapping the operation in a try, catch block to prevent the application from stopping. we’ll see this in a future article.
In a Nutshell
