JavaScript Data Types Explained with Examples (Complete Guide

By Kundan
Data Types in JavaScript with Examples — Complete Beginner Guide 2026
🔢 JavaScript Fundamentals · Data Types

Data Types in JavaScript
With Full Examples

Complete guide to all JavaScript data types — String, Number, Boolean, Null, Undefined, Symbol, BigInt, Object and Array — explained simply with real code examples and outputs.

⏱️ 9 min read 🔢 All 8 Types 💻 Code + Output ✅ A to Z Guide

What Are Data Types in JavaScript? — The Complete Explanation

Every piece of information your JavaScript program works with has a data type. A data type tells JavaScript what kind of data is being stored or used. Is it text? A number? True or false? A list of items? An empty value? Each of these is a different data type.

Understanding JavaScript data types is absolutely essential. Without knowing data types, you will constantly run into confusing bugs — like trying to add a number to some text and getting a weird result, or checking if something is empty and getting the wrong answer. These bugs come directly from not understanding data types.

JavaScript has 8 data types in total, divided into two main categories: Primitive types (simple, single values) and Reference types (complex values that can hold multiple items). Let's go through every single one — completely from A to Z — with full code examples and outputs for each.

7 Primitive Types
String · Number · Boolean · Null · Undefined · Symbol · BigInt — simple, single values stored directly.
1 Reference Type
Object (includes Arrays, Functions) — complex values that store collections of data.
typeof

The typeof Operator — How to Check a Data Type

Before we explore each type, you need to know the typeof operator. It is JavaScript's built-in tool for checking what data type a value is. You will use this constantly while learning and debugging. Just write typeof before any value or variable and it returns a string telling you the type:

console.log(typeof "Hello");      // "string"

console.log(typeof 42);           // "number"

console.log(typeof true);          // "boolean"

console.log(typeof undefined);    // "undefined"

console.log(typeof null);         // "object"  ← famous JS quirk!

console.log(typeof {});            // "object"

console.log(typeof []);            // "object"  ← arrays are objects

console.log(typeof function(){});  // "function"
▶ Output
string number boolean undefined object object object function
Str

1. String — Text Data in JavaScript

A String is any piece of text data — letters, words, sentences, emojis, symbols, numbers written as text, or any combination. In JavaScript, strings are written inside quotes. You can use single quotes '...', double quotes "...", or backtick template literals `...`.

Strings are by far the most commonly used data type in JavaScript. Every time you display a message, capture a username, show an error, or build a URL — you are working with strings.

// Three ways to write a string

let single   = 'Hello, World!';

let double   = "I love JavaScript!";

let template = `My name is Sara`;

// String concatenation (joining strings)

let firstName = "Ahmed";

let lastName  = "Khan";

let fullName  = firstName + " " + lastName;

console.log(fullName);         // Ahmed Khan

// Template literals — embed variables directly

let age = 22;

console.log(`I am ${firstName} and I am ${age} years old.`);

// Useful string methods

let text = "  javascript is awesome!  ";

console.log(text.trim());           // removes spaces

console.log(text.toUpperCase());   // JAVASCRIPT IS AWESOME!

console.log(text.length);          // 28 — total characters

console.log(text.includes("awesome"));  // true

console.log(text.replace("awesome", "amazing"));
▶ Output
Ahmed Khan I am Ahmed and I am 22 years old. javascript is awesome! JAVASCRIPT IS AWESOME! 28 true javascript is amazing!
123

2. Number — All Numeric Values in JavaScript

The Number data type represents all numeric values in JavaScript — both integers (whole numbers) and floating-point numbers (decimals). Unlike many other programming languages, JavaScript does not have separate types for integers and decimals — it uses one Number type for everything.

JavaScript's Number type also includes three special values: Infinity (when you divide by zero), -Infinity, and NaN (Not a Number — when a math operation produces an invalid result like trying to multiply text by a number).

// Integer and decimal numbers

let age     = 25;

let price   = 99.99;

let temp    = -5;

// Math operations

console.log(10 + 3);   // 13

console.log(10 - 3);   // 7

console.log(10 * 3);   // 30

console.log(10 / 3);   // 3.3333...

console.log(10 % 3);   // 1  (remainder)

console.log(2 ** 10);  // 1024 (power)

// Special number values

console.log(5 / 0);          // Infinity

console.log("hello" * 5);    // NaN (Not a Number)

console.log(isNaN("hello"));  // true — checking for NaN

// Math object — useful built-in methods

console.log(Math.round(4.7));   // 5

console.log(Math.floor(4.9));   // 4  (round down)

console.log(Math.ceil(4.1));    // 5  (round up)

console.log(Math.max(3,9,6));   // 9

console.log(Math.random());     // random 0–1 (e.g. 0.472)
▶ Output
13 · 7 · 30 · 3.333... · 1 · 1024 Infinity NaN true 5 · 4 · 5 · 9 · 0.472 (random)
T/F

3. Boolean — True or False Values

A Boolean is the simplest data type in JavaScript. It has only two possible values: true or false. That's it. No text, no numbers — just yes or no, on or off, true or false.

Booleans are the backbone of every decision in JavaScript. Every if statement, every loop condition, every comparison operator — they all ultimately produce a Boolean value that controls what your code does next.

// Direct boolean values

let isLoggedIn  = true;

let isAdmin     = false;

let hasAccount  = true;

// Comparison operators return booleans

console.log(10 > 5);      // true

console.log(10 === 10);   // true

console.log(5 !== 5);     // false

console.log("a" === "b"); // false

// Booleans in if statements

if (isLoggedIn) {

  console.log("Welcome back! 👋");

} else {

  console.log("Please log in.");

}

// Logical operators with booleans

console.log(isLoggedIn && isAdmin);   // false (both must be true)

console.log(isLoggedIn || isAdmin);   // true (at least one true)

console.log(!isLoggedIn);             // false (opposite)
▶ Output
true · true · false · false Welcome back! 👋 false · true · false
∅

4 & 5. Null and Undefined — Empty Values Explained

These two data types both represent the concept of "no value" — but they mean it in different ways, and confusing them is one of the most common JavaScript mistakes beginners make. Understanding the difference is critical.

null
Intentional Empty Value
null means a variable has been deliberately set to have no value. A developer writes = null on purpose to say: "this variable exists, but it currently holds nothing — intentionally." It is like an empty box that someone purposely left empty.
undefined
Automatically Empty Value
undefined means a variable was declared but JavaScript has not been given any value for it yet. It is JavaScript's automatic way of saying "I created this box, but nobody put anything in it." You don't manually set undefined — JavaScript sets it for you.
// UNDEFINED — JavaScript sets it automatically

let a;

console.log(a);             // undefined

console.log(typeof a);     // "undefined"

// NULL — developer sets it intentionally

let user = null;            // user exists but has no data yet

console.log(user);          // null

console.log(typeof user);  // "object" (famous JS quirk!)

// Comparing null and undefined

console.log(null == undefined);   // true  (loose comparison)

console.log(null === undefined);  // false (strict — different types!)

// Practical use of null — clearing a value

let currentUser = "Sara";

console.log(currentUser);   // Sara

currentUser = null;         // user logged out — clear the value

console.log(currentUser);   // null
▶ Output
undefined · "undefined" null · "object" true · false Sara null
⚡

6 & 7. BigInt and Symbol — Advanced Primitive Types

These two types are more advanced and you will not use them often as a beginner — but knowing they exist is important for a complete understanding of JavaScript data types.

BigInt
JavaScript's regular Number type can safely handle integers up to about 9 quadrillion. For larger numbers (used in cryptography, finance, or science), BigInt allows you to work with arbitrarily large integers. Created by adding n after the number.
Symbol
A Symbol creates a completely unique identifier every time it is called — even if two symbols have the same description, they are never equal to each other. Used for creating unique object property keys to avoid naming conflicts in large programs.
// BigInt — for very large numbers

const bigNum = 9007199254740991n;    // add "n" at the end

console.log(bigNum);                  // 9007199254740991n

console.log(typeof bigNum);           // "bigint"

// Symbol — creates unique identifiers

const id1 = Symbol("id");

const id2 = Symbol("id");

console.log(id1 === id2);             // false — always unique!

console.log(typeof id1);              // "symbol"
▶ Output
9007199254740991n · "bigint" false · "symbol"
{ }

8. Object — The Most Powerful Data Type in JavaScript

An Object is JavaScript's most important and most powerful data type. While primitive types store a single value, an object can store multiple values as key-value pairs. Objects represent real-world things — a user, a product, a car — with all their properties bundled together.

In JavaScript, almost everything is an object. Arrays are objects. Functions are objects. Even the null quirk we saw earlier (typeof null === "object") comes from JavaScript's internal object-based design. Mastering objects is the key to mastering JavaScript.

// Creating an object with properties and a method

const student = {

  name:    "Sara",

  age:     21,

  country: "Pakistan",

  isPass:  true,

  scores:  [85, 90, 78],

  // Method — a function inside an object

  greet: function() {

    return `Hi! I am ${this.name} from ${this.country} 👋`;

  }

};

// Access properties — dot notation

console.log(student.name);          // Sara

console.log(student.age);           // 21

console.log(student.scores[0]);    // 85

// Access properties — bracket notation

console.log(student["country"]);   // Pakistan

// Call a method

console.log(student.greet());

// Add a new property

student.grade = "A";

console.log(student.grade);         // A

// Update a property

student.age = 22;

console.log(student.age);           // 22
▶ Output
Sara · 21 · 85 · Pakistan Hi! I am Sara from Pakistan 👋 A · 22
[ ]

9. Array — Ordered Lists of Data (Special Object Type)

An Array is a special type of object designed to store an ordered list of items. While regular objects store items with named keys, arrays store items with numbered positions called indexes — starting from index 0. Arrays are one of the most used data structures in all of JavaScript programming.

Arrays can store any type of data — strings, numbers, booleans, other arrays, objects, or even a mix. They come with powerful built-in methods like push, pop, map, filter, and forEach that make working with lists of data incredibly efficient.

// Creating arrays

const fruits  = ["apple", "banana", "mango"];

const scores  = [85, 90, 78, 95, 88];

const mixed   = ["Sara", 22, true, null];

// Access by index (starts at 0)

console.log(fruits[0]);           // apple

console.log(fruits[2]);           // mango

console.log(fruits.length);        // 3

// Modifying arrays

fruits.push("orange");             // add to end

fruits.pop();                       // remove from end

fruits.unshift("grape");           // add to beginning

// Powerful array methods

const passed = scores.filter(s => s >= 85);

console.log(passed);               // [85, 90, 95, 88]

const doubled = scores.map(s => s * 2);

console.log(doubled);              // [170, 180, 156, 190, 176]

const total = scores.reduce((sum, s) => sum + s, 0);

console.log("Total: " + total);    // Total: 436

// Loop through an array

fruits.forEach(fruit => {

  console.log("🍎 " + fruit);

});
▶ Output
apple · mango · 3 [85, 90, 95, 88] [170, 180, 156, 190, 176] Total: 436 🍎 grape 🍎 apple 🍎 banana 🍎 mango
📊

All JavaScript Data Types — Complete Reference Table

Here is a complete reference of all JavaScript data types, what they store, and what typeof returns for each one:

Data TypeExample Valuetypeof ResultCategory
String"Hello, World!""string"Primitive
Number42 · 3.14 · -5"number"Primitive
Booleantrue · false"boolean"Primitive
Undefinedundefined"undefined"Primitive
Nullnull"object" ⚠️Primitive
BigInt9007199254740991n"bigint"Primitive
SymbolSymbol("id")"symbol"Primitive
Object{ name: "Sara" }"object"Reference
Array["a", "b", "c"]"object"Reference
Functionfunction() {}"function"Reference
⚠️ Famous JavaScript Quirk: typeof null returns "object" — this is a well-known historical bug in JavaScript from 1995 that was never fixed to avoid breaking old websites. null is actually a primitive type, not an object. Remember this quirk!

✅ Complete Summary — JavaScript Data Types

🟢 String — text data in quotes — "Hello", 'World', `template ${literal}`
🔵 Number — integers and decimals — 42, 3.14, -5, Infinity, NaN
🟡 Boolean — true or false only — the foundation of all decisions
🟠 Null — intentionally empty value — set by developer on purpose
🩷 Undefined — automatically empty — variable declared but not assigned yet
🟣 BigInt — very large integers — 9007199254740991n
🩵 Symbol — unique identifiers — always unique even with same description
🔮 Object — key-value pairs — stores multiple values together
🌿 Array — ordered lists — ["apple", "banana", "mango"]
⭐ Use typeof — to check any value's data type while learning and debugging
📌 Important Note for Beginners

You don't need to memorize every method for every data type right now. Start by understanding what each type is and when to use it. The methods (like .map(), .filter(), .trim()) will become natural with practice. The most important types to master first are String, Number, Boolean, Array, and Object — these five cover 95% of everything you will do in JavaScript as a beginner. The others you will naturally encounter as you grow!

Comments

Post a Comment