JavaScript's Building Blocks: A Beginner's Guide to Data Types

Introduction

In our last adventure, we explored JavaScript variables – the named containers that hold information in our programs. Now, let's look inside those containers! What kind of information can they store? This is where JavaScript data types come into play.
Think of data types like specialized, labeled boxes in your digital workshop. You wouldn't store liquids in a paper box or tiny screws in a giant crate, right? Similarly, JavaScript uses different data types to efficiently sort, store, and manage different kinds of information. Understanding these types is crucial because the type of data determines what you can do with it and how it behaves.
In this post, we'll unpack JavaScript's fundamental data types, often called primitive data types, and see how they help us write more effective and bug-free code.

What Are Data Types, Anyway?

In programming, a data type is a classification that specifies which type of value a variable can hold and what type of mathematical, relational, or logical operations can be applied to it without causing an error. Each piece of information, or "value," in your code has a data type.
JavaScript is a dynamically typed language. This means you don't have to explicitly declare the data type of a variable when you create it. JavaScript automatically determines the data type of a variable based on the value you assign to it at runtime.

let myData = "Hello, learners!"; // JavaScript knows this is a string
myData = 42;                    // Now, JavaScript knows myData is a number
console.log(typeof myData);     // The 'typeof' operator will tell us the current type

We'll look at the typeof operator more later!

The Primitive Data Types in JavaScript

JavaScript has seven primitive data types. Primitives are "primitive" because they are the most basic data types available, and they are immutable (meaning their actual value cannot be changed, though the variable holding them can be reassigned to a new primitive value).
Let's explore each one:

1. String

• Analogy: A labeled box for holding text.
• Definition: Represents textual data. Strings are sequences of characters enclosed in single quotes ('...'), double quotes ("..."), or backticks (... - template literals).
• Use Case: Storing text values like names, descriptions, messages, or any textual information.
• Combinations: Can hold practically any combination of characters, numbers, and symbols.

let greeting = "Hello, world!";
let userName = 'Alice123';
let message = `Welcome back, ${userName}!`; // Template literal with variable interpolation

console.log(greeting);
console.log(userName);
console.log(message);
console.log(typeof greeting); // Output: "string"

Template literals (using backticks) are especially powerful as they allow for multi-line strings and embedding expressions directly within the string.

2. Number

• Analogy: A sturdy box for all sorts of numerical figures.
• Definition: Represents numerical values, including integers and floating-point numbers (decimals). JavaScript has only one number type for both.
• Use Case: Storing numerical values like ages, prices, scores, or any data needed for calculations.
• Range & Special Values: JavaScript numbers have a wide range but also include some special values:
  • Infinity (and -Infinity): Represents mathematical infinity.
  • NaN: Stands for "Not-a-Number." It results from operations that cannot produce a meaningful numerical result (e.g., 0/0 or Math.sqrt(-1)).

let age = 30;
let price = 19.99;
let temperature = -5;
let notANumber = 0 / 0;

console.log(age);
console.log(price);
console.log(typeof price); // Output: "number"
console.log(notANumber);   // Output: NaN
console.log(typeof NaN);   // Output: "number" (Yes, NaN is technically of type number!)

3. Boolean

• Analogy: A switch that can only be ON or OFF.
• Values: Can only hold one of two values: true or false.
• Use Case: Making decisions in your code, controlling program flow (e.g., in if statements or loops), and representing logical states.

let isLoggedIn = true;
let hasPermission = false;
let isAdult = age >= 18; // This expression evaluates to a boolean

console.log(isLoggedIn);    // Output: true
console.log(typeof isLoggedIn); // Output: "boolean"
console.log(isAdult);       // Output: true (if age is 30)

4. Null

• Analogy: An intentionally empty box, clearly marked as "empty."
• Value: Has only one value: null.
• Meaning: Represents the intentional absence of any object value or a deliberate non-value. It's often assigned by a programmer to signify that a variable should have no value.
• Use Case: Used when you want to explicitly state that a variable has no value.

let selectedUser = null; // No user is selected yet
console.log(selectedUser);    // Output: null
console.log(typeof selectedUser); // Output: "object" (This is a long-standing quirk in JavaScript!)

Be aware of the typeof null returning "object". It's a historical bug that hasn't been fixed to avoid breaking existing code.

5. Undefined

• Analogy: A box that hasn't been given anything yet, its contents are unknown.
• Value: Has only one value: undefined.
• Meaning: Indicates that a variable has been declared but has not yet been assigned a value. It can also be the result of functions that don't explicitly return a value.
• Use Case: This is often the default state of uninitialized variables.

let userEmail; // Declared but not assigned
console.log(userEmail);    // Output: undefined
console.log(typeof userEmail); // Output: "undefined"

function doNothing() {
    // This function doesn't return anything
}
console.log(doNothing()); // Output: undefined

• Null vs. Undefined:
  • undefined typically means a variable has been declared but not yet given a value, or a function didn't return a value. It's often JavaScript's default.
  • null is an assignment value. It means you, the programmer, have intentionally set the variable to have no value.

6. BigInt

• Analogy: An extra-large, reinforced box specifically for exceptionally huge numbers.
• Definition: Introduced in ES2020 (ES11), BigInt is used for storing and manipulating integers that are too large to be represented by the standard Number data type. You create a BigInt by appending n to the end of an integer or by calling the BigInt() constructor.
• Use Case: Working with very large integers, such as those found in cryptography, high-precision timing, or when dealing with large database IDs.

const veryLargeNumber = 1234567890123456789012345678901234567890n;
const anotherLargeNumber = BigInt("987654321098765432109876543210");

console.log(veryLargeNumber);
console.log(typeof veryLargeNumber); // Output: "bigint"

// Cannot mix Number and BigInt in most operations directly
// console.log(veryLargeNumber + 10); // This would cause an error
console.log(veryLargeNumber + 10n); // This works

7. Symbol

• Analogy: A unique serial number or a secret key for a box, even if other boxes have identical labels.
• Definition: Introduced in ES6 (ES2015), Symbols are unique and immutable primitive values. Each time you call Symbol(), you get a new, unique symbol.
• Use Case: Primarily used as unique property keys for objects to avoid naming collisions. This is more of an advanced use case, but it's good to know it exists.

const id1 = Symbol("id");
const id2 = Symbol("id");

console.log(id1 === id2);    // Output: false (they are unique)
console.log(typeof id1);     // Output: "symbol"

let user = {
    name: "John",
    [id1]: "User ID 123" // Using a symbol as an object property key
};
console.log(user[id1]); // Output: "User ID 123"

Checking Data Types: The typeof Operator

As we've seen in the examples, JavaScript provides the typeof operator to find out the data type of a variable or a value.

console.log(typeof "Hello");      // "string"
console.log(typeof 100);          // "number"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object" (the quirk!)
console.log(typeof 123n);         // "bigint"
console.log(typeof Symbol("key"));// "symbol"
console.log(typeof {a: 1});       // "object" (we'll cover objects soon!)
console.log(typeof [1, 2, 3]);    // "object" (arrays are a type of object)
console.log(typeof function(){}); // "function" (functions are also objects)

Why Do Data Types Matter? The Importance of Knowing

Your provided statement sums it up well: "Knowing when and where to use each data type makes for more efficient and effective coding. Each piece of information (value) is 'data,' and different values need different storage methods and allow for different operations."

• Correct Operations: You can't perform mathematical addition on two typical strings and expect a numerical sum (though string concatenation will happen). Using the correct type ensures operations behave as expected.
• Efficiency: While less of a manual concern in JavaScript than in some other languages, understanding types can indirectly lead to more efficient code patterns.
• Bug Prevention: Type errors are a common source of bugs. Understanding data types helps you anticipate and prevent these. For example, trying to call a string method on a number will cause an error.
• Readability: Using data types appropriately makes your code easier to understand.

Beyond Primitives: A Quick Note on Objects

While we've focused on primitive data types, it's important to know that JavaScript also has a complex data type called Object. Arrays, Functions, and regular Objects (collections of key-value pairs) all fall under this category. We'll dive deep into objects in a future post, as they are fundamental to building more complex applications.

Conclusion

Understanding JavaScript's data types is like learning the different kinds of materials available to an architect. Strings, Numbers, Booleans, Null, Undefined, BigInt, and Symbols are the foundational elements you'll use to store, manipulate, and make sense of information in your programs.
By grasping what each type is for and how it behaves, you're well on your way to writing cleaner, more robust, and more powerful JavaScript code. Keep practicing with variables and assigning them different types of data to see how they work!

Sources

github