JavaScript Data Types — Complete Guide

Module 3 — Data Types

Every value in JavaScript has a data type. Data types determine how values are stored in memory, manipulated, and used during program execution.

Understanding data types is essential because every JavaScript application—from simple scripts to enterprise web applications—works with numbers, text, objects, arrays, dates, and many other kinds of data.

In this module, you'll learn:

• Primitive Data Types
• Reference Data Types
• Memory Storage
• typeof Operator
• Value vs Reference
• Best Practices

What is a Data Type?

A data type defines the kind of value a variable can hold.

Example:

javascriptCopy
1let age = 23;
2let name = "Ankit";
3let isAdmin = false;

Here:

• 23 → Number
• "Ankit" → String
• false → Boolean

JavaScript Data Type Categories

JavaScript has two categories of data types.

textCopy
1JavaScript Data Types
2
3│
4
5├── Primitive Types
6
7│     ├── Number
8│     ├── String
9│     ├── Boolean
10│     ├── Undefined
11│     ├── Null
12│     ├── Symbol
13│     └── BigInt
14
15│
16
17└── Reference Types
18
19      ├── Object
20      ├── Array
21      ├── Function
22      ├── Date
23      ├── RegExp
24      ├── Map
25      └── Set

Primitive Data Types

Primitive values are immutable.

This means their values cannot be changed directly.

JavaScript has 7 primitive types.

1. Number

The Number type represents integers and floating-point numbers.

Examples

javascriptCopy
1let age = 23;
2let price = 499.99;
3let temperature = -5;

Output

javascriptCopy
1console.log(typeof age);

number

JavaScript supports:

javascriptCopy
1let a = 10;
2let b = 10.5;
3let c = Infinity;
4let d = NaN;

Number Operations

javascriptCopy
1let x = 20;
2let y = 5;
3
4console.log(x + y);
5console.log(x - y);
6console.log(x * y);
7console.log(x / y);
8console.log(x % y);

Output

25
15
100
4
0

2. String

A String stores text.

javascriptCopy
1let firstName = "Ankit";
2let city = 'Delhi';

Template Literals

javascriptCopy
1let name = "Ankit";
2
3console.log(`Hello ${name}`);

Output

Hello Ankit

Common String Operations

javascriptCopy
1let language = "JavaScript";
2
3console.log(language.length);
4console.log(language.toUpperCase());
5console.log(language.toLowerCase());
6console.log(language.includes("Script"));

Output

10
JAVASCRIPT
javascript
true

3. Boolean

Boolean values represent logical states.

Possible values:

• true
• false

javascriptCopy
1let isLoggedIn = true;
2let isAdmin = false;

Example

javascriptCopy
1let age = 20;
2
3console.log(age >= 18);

Output

true

4. Undefined

A variable that has been declared but not assigned a value has the type undefined.

javascriptCopy
1let username;
2
3console.log(username);

Output

undefined

Check Type

javascriptCopy
1console.log(typeof username);

Output

undefined

5. Null

null represents the intentional absence of a value.

javascriptCopy
1let user = null;
2
3console.log(user);

Output

null

Interestingly,

javascriptCopy
1console.log(typeof null);

Output

object

This is a well-known historical bug in JavaScript that has been kept for backward compatibility.

Undefined vs Null

Example

javascriptCopy
1let a;
2let b = null;
3
4console.log(a);
5console.log(b);

6. Symbol

A Symbol creates a unique identifier.

javascriptCopy
1const id1 = Symbol("id");
2const id2 = Symbol("id");
3
4console.log(id1 === id2);

Output

false

Symbols are commonly used to create unique object property keys.

javascriptCopy
1const id = Symbol();
2
3const user = {
4    [id]: 1001,
5    name: "Ankit"
6};
7
8console.log(user[id]);

7. BigInt

BigInt stores integers larger than the safe range of the Number type.

javascriptCopy
1const big = 123456789012345678901234567890n;
2
3console.log(big);

Output

123456789012345678901234567890n

Another way

javascriptCopy
1const big = BigInt("123456789012345678901234567890");

Reference Data Types

Reference types store references (memory addresses) instead of actual values.

1. Object

Objects store data in key-value pairs.

javascriptCopy
1const user = {
2    name: "Ankit",
3    age: 23,
4    country: "India"
5};
6
7console.log(user.name);

Output

Ankit

Access Object Properties

javascriptCopy
1console.log(user.name);
2console.log(user["age"]);

Update Object

javascriptCopy
1user.age = 24;
2
3console.log(user);

2. Array

Arrays store ordered collections.

javascriptCopy
1const colors = [
2    "Red",
3    "Blue",
4    "Green"
5];
6
7console.log(colors);

Access Elements

javascriptCopy
1console.log(colors[0]);

Output

Red

Add Items

javascriptCopy
1colors.push("Yellow");

3. Function

Functions are first-class objects in JavaScript.

javascriptCopy
1function greet(name) {
2    return `Hello ${name}`;
3}
4
5console.log(greet("Ankit"));

Output

Hello Ankit

Functions can be:

• Stored in variables
• Passed as arguments
• Returned from other functions

4. Date

The Date object works with dates and times.

javascriptCopy
1const today = new Date();
2
3console.log(today);

Current Year

javascriptCopy
1console.log(today.getFullYear());

Current Month

javascriptCopy
1console.log(today.getMonth() + 1);

5. RegExp

Regular Expressions search and match patterns.

javascriptCopy
1const pattern = /javascript/i;
2
3console.log(pattern.test("JavaScript"));

Output

true

Replace Example

javascriptCopy
1const text = "I love JavaScript";
2
3console.log(text.replace(/JavaScript/, "TypeScript"));

6. Map

Map stores key-value pairs.

Unlike Objects, keys can be of any type.

javascriptCopy
1const map = new Map();
2
3map.set("name", "Ankit");
4map.set("age", 23);
5
6console.log(map.get("name"));

Output

Ankit

Map Methods

javascriptCopy
1map.set();
2map.get();
3map.has();
4map.delete();
5map.clear();
6map.size;

7. Set

Set stores unique values.

javascriptCopy
1const numbers = new Set();
2
3numbers.add(10);
4numbers.add(20);
5numbers.add(20);
6
7console.log(numbers);

Output

Set(2) {10,20}

Useful Methods

javascriptCopy
1numbers.add(5);
2
3numbers.delete(5);
4
5numbers.has(10);
6
7numbers.clear();

The typeof Operator

Use typeof to determine the type of a value.

javascriptCopy
1console.log(typeof 10);
2console.log(typeof "Hello");
3console.log(typeof true);
4console.log(typeof undefined);
5console.log(typeof Symbol());
6console.log(typeof 10n);

Output

number
string
boolean
undefined
symbol
bigint

Reference Types

javascriptCopy
1console.log(typeof {});
2console.log(typeof []);
3console.log(typeof function(){});

Output

object
object
function

Primitive vs Reference Types

Primitive

Stored directly in memory.

javascriptCopy
1let a = 10;
2let b = a;
3
4b = 20;
5
6console.log(a);
7console.log(b);

Output

10
20

Changing b does not affect a.

Reference

Stored by reference.

javascriptCopy
1const user1 = {
2    name: "Ankit"
3};
4
5const user2 = user1;
6
7user2.name = "Rahul";
8
9console.log(user1.name);

Output

Rahul

Both variables reference the same object in memory.

Data Type Comparison

Best Practices

• Use the appropriate data type for your data.
• Use const whenever possible for objects and arrays.
• Prefer Map over Object when keys are dynamic or non-string.
• Use Set to store unique values.
• Use === instead of == to avoid unexpected type coercion.
• Use typeof to inspect primitive values and Array.isArray() to identify arrays.

Mini Project: User Information Manager

HTML

htmlCopy
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>JavaScript Data Types</title>
6</head>
7<body>
8
9<h2>User Profile</h2>
10
11<div id="output"></div>
12
13<script src="script.js"></script>
14
15</body>
16</html>

JavaScript (script.js)

javascriptCopy
1const user = {
2    id: 1001,
3    name: "Ankit",
4    age: 23,
5    isStudent: true,
6    hobbies: ["Coding", "Reading"],
7    createdAt: new Date(),
8    skills: new Set(["JavaScript", "React", "Node.js"]),
9    settings: new Map([
10        ["theme", "dark"],
11        ["language", "English"]
12    ])
13};
14
15const output = document.getElementById("output");
16
17output.innerHTML = `
18    <p><strong>Name:</strong> ${user.name}</p>
19    <p><strong>Age:</strong> ${user.age}</p>
20    <p><strong>Student:</strong> ${user.isStudent}</p>
21    <p><strong>Hobbies:</strong> ${user.hobbies.join(", ")}</p>
22    <p><strong>Theme:</strong> ${user.settings.get("theme")}</p>
23`;

Summary

In this module, you learned:

• The two categories of JavaScript data types: Primitive and Reference.
• How to use all seven primitive types: Number, String, Boolean, Undefined, Null, Symbol, and BigInt.
• How to work with reference types such as Object, Array, Function, Date, RegExp, Map, and Set.
• The difference between storing values and storing references in memory.
• How to use the typeof operator to inspect data types.
• Best practices for choosing the right data structure in modern JavaScript applications.

In the next module, you'll learn JavaScript Operators, including arithmetic, comparison, logical, assignment, bitwise, spread, rest, optional chaining, nullish coalescing, and many other operators used in professional development.