JavaScript Data Types - Primitives & Reference Types

Introduction

Data types define what kind of value a variable can hold. JavaScript has 7 primitive types and reference types! Let's learn them all!

What You Will Learn

• The 7 primitive data types
• Reference types (objects, arrays, functions)
• Differences between primitives and references
• Type checking with typeof
• Type conversion and coercion

Prerequisites

• Variables let const var

The 7 Primitive Types

Primitive types hold simple values, stored directly in memory!

1. Number: Integers and floats
2. String: Text
3. Boolean: true or false
4. Null: Intentional absence of value
5. Undefined: Variable declared but not assigned
6. Symbol: Unique identifier (ES6+)
7. BigInt: Very large integers (ES2020+)

Number

let age = 30;
let price = 19.99;
let negative = -5;
let scientific = 1e6; // 1,000,000
let infinity = Infinity;
let notANumber = NaN; // Not a Number (still a Number type!)

String

let single = 'Hello';
let double = "World";
let template = `${single} ${double}!`; // Template literal!

let multiLine = `Line 1
Line 2
Line 3`; // Backticks allow multi-line!

Boolean

let isOnline = true;
let isAdmin = false;

Null & Undefined

let notAssigned; // undefined - declared, no value
let empty = null; // null - intentional nothingness

Symbol

let id1 = Symbol('id');
let id2 = Symbol('id');
console.log(id1 === id2); // false - every Symbol is unique!

BigInt

let big = 123456789012345678901234567890n; // Add 'n' at end!

Reference Types

Reference types hold references (addresses) to values in memory!

Object

let person = {
  name: 'John',
  age: 30,
  isAdmin: true
};

Array

let numbers = [1, 2, 3, 4, 5];
let mixed = [1, 'hi', true, null];

Function

function sayHi() {
  console.log('Hi!');
}

Primitives vs Reference Types: The Big Difference!

Primitives are copied by value

let a = 10;
let b = a;
a = 20;
console.log(b); // 10 - copied value, no change!

References are copied by reference

let obj1 = { x: 10 };
let obj2 = obj1;
obj1.x = 20;
console.log(obj2.x); // 20! Both point to same object!

Visual:

graph LR
    A[obj1] -->|reference| C[Object { x: 20 }]
    B[obj2] -->|reference| C

Type Checking

typeof Operator

console.log(typeof 5); // "number"
console.log(typeof 'hi'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof {}); // "object"
console.log(typeof []); // "object" - wait, array is object!
console.log(typeof function(){}); // "function" - special case!
console.log(typeof null); // "object" - known bug in JS!

Check Array

console.log(Array.isArray([1,2,3])); // true

Type Conversion & Coercion

Explicit Conversion

Number('5'); // 5
String(123); // "123"
Boolean(1); // true

Implicit Coercion

console.log('5' + 3); // "53" - string concatenation!
console.log('5' - 3); // 2 - number subtraction!
console.log(5 + true); // 6 - true becomes 1

Best Practices

1. Use strict equality (===) not loose (==) to avoid coercion bugs!
2. Prefer explicit conversion over implicit!
3. Use template literals for strings with variables!

Common Mistakes

1. Confusing == and ===!
2. Forgetting arrays are objects!
3. Modifying objects that are referenced elsewhere!

Summary

7 primitives, 3 main reference types! Primitives copy value, references copy the address!

Related Articles

• Type Conversion & Coercion
• Variables let const var

Previous Tutorial

← Variables let const var

Next Tutorial

Let's learn type conversion! → Type Conversion & Coercion