ReviseAlgo Logo

JS Fundamentals

Data Types — Primitives & Reference

Master JavaScript data types. Distinguish between immutable primitive types and mutable reference types, understand pass-by-value vs pass-by-reference, and type check with typeof.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

JavaScript is a dynamically typed language, meaning variables are not bound to a specific type. Instead, types are associated with the values stored in variables. JavaScript values are divided into two main categories: Primitives and Reference Types.

2. Why It Matters

Misunderstanding types leads to unexpected behavior, such as altering shared objects by mistake, executing bad additions with strings, and incorrectly validating values using typeof.

3. Real-World Analogy

Think of sharing notes:

  • Primitive (Photocopy): You hand a friend a photocopy of your notes (Pass-by-value). If they write comments or spill coffee on their copy, your original sheet remains clean and untouched.
  • Reference (Google Doc Link): You email your friend a link to a shared Google Doc (Pass-by-reference). If they open the link and delete two paragraphs, the text changes for you and anyone else accessing the link.

4. How It Works

JavaScript values fall into one of these structures:

1. Primitives (7 Types):

Primitives are immutable and compared by value. They are stored directly on the Stack.

  • number: Represents integer and floating-point numbers.
  • string: Sequences of characters.
  • boolean: true or false.
  • null: Explicit representation of "no value".
  • undefined: Unassigned variable fallback.
  • symbol: Unique, immutable identifier (ES6).
  • bigint: Large integers exceeding the safe limits of Number (ES2020).

2. Reference Types (Objects):

Objects are mutable and compared by reference. The object reference is stored on the Stack, pointing to the actual data on the Heap.

  • Standard Object, Array, Function, Date, RegExp, Map, Set.

5. Internal Architecture

When you assign a primitive value, JavaScript copies the exact value. When you assign a reference type, the variable stores a pointer representing the memory address of the object in the Heap. Copying the variable only copies the pointer, not the underlying object data.

6. Visual Explanation

Loading diagram…

7. Practical Example

See the difference in assignment behavior below:

8. Common Mistakes

  • typeof null gotcha: typeof null returns "object". This is a legacy bug in JavaScript that cannot be fixed without breaking existing websites.
  • Comparing objects directly: Comparing two identical objects with === returns false because their memory references are different.

9. Quick Quiz

Q1: What does typeof function() {} return?

A) "object"

B) "function"

Answer: B — Although functions are technically objects internally, typeof returns "function".

10. Scenario-Based Challenge

The Shallow Copy Trap:

An API response contains a nested user object: { id: 1, info: { age: 30 } }. You copy this object using the spread operator let copy = { ...user }. When you modify copy.info.age = 31, you notice user.info.age also updates. Explain why this happened and outline how to perform a deep copy.

11. Debugging Exercise

Fix the type checks to ensure they work correctly:

function cleanup(data) {
  if (typeof data === 'object') {
    // Crashing when data is null!
    return Object.keys(data);
  }
}
View Solution

Diagnosis: Since typeof null evaluates to "object", passing null passes the check but crashes Object.keys(null).

Fix: Add a check to confirm the data is not null:

function cleanup(data) {
  if (typeof data === 'object' && data !== null) {
    return Object.keys(data);
  }
  return [];
}

12. Interview Questions

🟢 Q1: What is the difference between null and undefined?

Answer: undefined means a variable has been declared but has not yet been assigned a value. It is the language default value. null is an assignment value that represents the intentional absence of any object value. In type checks, typeof undefined is "undefined", while typeof null is "object".

13. Production Considerations

  • • Deep Cloning: For complex state modifications in React or Node, use structuredClone() to create deep copies rather than relying on shallow copies or parsing stringified JSON.