JavaScript Data Types: A Beginner-Friendly Guide with Simple Examples

JavaScript data types describe the kind of value stored inside a variable.

For example, a variable can store text, numbers, true-or-false values, lists, or complete objects.

const userName = "Rahul";
const age = 24;
const isDeveloper = true;

In this example:

"Rahul" is a string.
24 is a number.
true is a Boolean value.

Understanding data types is important because JavaScript performs different operations depending on the type of value being used.

What Is a Data Type?

A data type tells JavaScript what kind of value a variable contains.

Consider this example:

const firstValue = 10;
const secondValue = 20;

console.log(firstValue + secondValue);

Output:

Both values are numbers, so JavaScript adds them.

Now look at this example:

const firstValue = "10";
const secondValue = "20";

console.log(firstValue + secondValue);

Output:

These values are strings, so JavaScript joins them instead of adding them mathematically.

This is why understanding data types matters.

Types of Data in JavaScript

JavaScript data types are mainly divided into two categories:

Primitive data types
Non-primitive data types

Primitive data types store simple values.

Non-primitive data types store collections of values or more complex information.

Primitive Data Types

JavaScript has several primitive data types:

String
Number
Boolean
Undefined
Null
BigInt
Symbol

For beginners, the most important ones are string, number, Boolean, undefined, and null.

1. String

A string is used to store text.

Strings must be written inside quotation marks.

const userName = "Rahul";
const city = "Delhi";
const message = "Welcome to JavaScript";

You can use:

Double quotation marks
Single quotation marks
Backticks

const firstName = "Aman";
const lastName = 'Sharma';
const greeting = `Hello JavaScript`;

All three examples create string values.

Joining Strings

Strings can be joined using the + operator.

const firstName = "Aman";
const lastName = "Sharma";

const fullName = firstName + " " + lastName;

console.log(fullName);

Output:

Aman Sharma

Template Literals

Template literals use backticks and make it easier to insert variables inside a string.

const userName = "Rahul";
const age = 24;

const message = `My name is ${userName} and I am ${age} years old.`;

console.log(message);

Output:

My name is Rahul and I am 24 years old.

Template literals are widely used in modern JavaScript.

2. Number

The number data type is used to store integers and decimal values.

const age = 24;
const price = 499;
const rating = 4.5;

JavaScript does not use separate data types for whole numbers and decimal numbers.

Both are stored as numbers.

Performing Number Operations

const firstNumber = 20;
const secondNumber = 5;

console.log(firstNumber + secondNumber);
console.log(firstNumber - secondNumber);
console.log(firstNumber * secondNumber);
console.log(firstNumber / secondNumber);

Output:

Special Number Values

JavaScript also has special number values.

Infinity

console.log(10 / 0);

Output:

Infinity

NaN

NaN means “Not a Number.”

console.log("Hello" * 5);

Output:

NaN

The operation cannot produce a valid number.

3. Boolean

A Boolean value can only be:

true
false

Booleans are commonly used for decisions and conditions.

const isLoggedIn = true;
const isAdmin = false;
const hasPermission = true;

Example:

const age = 20;
const isAdult = age >= 18;

console.log(isAdult);

Output:

true

The comparison returns a Boolean result.

4. Undefined

A variable has the value undefined when it is declared but no value has been assigned.

let userName;

console.log(userName);

Output:

undefined

The variable exists, but it does not currently contain a value.

You can assign a value later:

let userName;

userName = "Rahul";

console.log(userName);

Output:

Rahul

5. Null

null represents an intentionally empty value.

const selectedProduct = null;

console.log(selectedProduct);

Output:

null

It means the developer has deliberately set the value to empty.

Example:

let profileImage = null;

This may mean that the user has not uploaded a profile image yet.

Difference Between Undefined and Null

undefined usually means a value has not been assigned.

null means the value has intentionally been kept empty.

let userEmail;
const profileImage = null;

Here:

userEmail is undefined because no value was assigned.
profileImage is null because it was intentionally set as empty.

6. BigInt

BigInt is used to store numbers larger than JavaScript’s normal number limit.

A BigInt value ends with the letter n.

const largeNumber = 123456789012345678901234567890n;

console.log(largeNumber);

BigInt is not commonly required in beginner projects, but it is useful when working with extremely large numbers.

7. Symbol

Symbol creates a unique value.

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

console.log(id1 === id2);

Output:

false

Even though both symbols have the same description, they are unique.

Symbols are mostly used in advanced JavaScript applications.

Non-Primitive Data Types

Non-primitive data types can store multiple values and more complex data.

The most common non-primitive types are:

Object
Array
Function

8. Object

An object stores related information using key-value pairs.

const user = {
  name: "Rahul",
  age: 24,
  city: "Delhi",
  isDeveloper: true
};

In this object:

name, age, city, and isDeveloper are keys.
Their corresponding information is stored as values.

You can access object values using dot notation.

console.log(user.name);
console.log(user.city);

Output:

Rahul
Delhi

Objects are very important in JavaScript because they represent real-world data.

9. Array

An array stores multiple values in a single variable.

const skills = ["HTML", "CSS", "JavaScript"];

Array values are stored using indexes.

The first item has index 0.

console.log(skills[0]);
console.log(skills[1]);
console.log(skills[2]);

Output:

HTML
CSS
JavaScript

Arrays are useful for storing lists such as:

Products
Users
Books
Cities
Marks
Tasks

10. Function

A function stores reusable code.

function greetUser() {
  console.log("Welcome to JavaScript");
}

greetUser();

Output:

Welcome to JavaScript

Functions help developers avoid repeating the same code.

Although functions are technically objects in JavaScript, they are commonly studied as a separate topic.

Checking Data Types with typeof

JavaScript provides the typeof operator to check a value’s data type.

const userName = "Rahul";
const age = 24;
const isDeveloper = true;

console.log(typeof userName);
console.log(typeof age);
console.log(typeof isDeveloper);

Output:

string
number
boolean

More examples:

console.log(typeof undefined);
console.log(typeof 100);
console.log(typeof "Hello");
console.log(typeof true);
console.log(typeof function () {});

Output:

undefined
number
string
boolean
function

Important typeof Behaviour

Consider this example:

console.log(typeof null);

Output:

object

This is an old JavaScript behaviour.

Although typeof null returns "object", null is still treated as a primitive empty value.

You can check for null directly:

const value = null;

console.log(value === null);

Output:

true

Checking an Array

Using typeof on an array returns "object".

const skills = ["HTML", "CSS", "JavaScript"];

console.log(typeof skills);

Output:

object

To check whether a value is an array, use:

console.log(Array.isArray(skills));

Output:

true

Dynamic Typing in JavaScript

JavaScript is a dynamically typed language.

This means a variable can store different types of values at different times.

let value = 100;

console.log(typeof value);

value = "Hello";

console.log(typeof value);

Output:

number
string

The same variable first stored a number and later stored a string.

Although JavaScript allows this, changing data types unnecessarily can make code confusing.

Better code:

let productPrice = 100;
let productName = "JavaScript Book";

Use separate variables for separate meanings.

Type Conversion

Type conversion means changing one data type into another.

Converting String to Number

const price = "500";

const convertedPrice = Number(price);

console.log(convertedPrice);
console.log(typeof convertedPrice);

Output:

500
number

You can also use:

parseInt("500");
parseFloat("499.99");

Converting Number to String

const age = 24;

const convertedAge = String(age);

console.log(convertedAge);
console.log(typeof convertedAge);

Output:

24
string

Converting Values to Boolean

console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean("Hello"));
console.log(Boolean(""));

Output:

true
false
true
false

Values such as 0, empty strings, null, undefined, and NaN are considered falsy.

Most other values are truthy.

Truthy and Falsy Values

Falsy values behave like false inside conditions.

Common falsy values are:

false
0
""
null
undefined
NaN

Example:

const userName = "";

if (userName) {
  console.log("User name is available");
} else {
  console.log("User name is empty");
}

Output:

User name is empty

A non-empty string is truthy.

const userName = "Rahul";

if (userName) {
  console.log("User name is available");
}

Output:

User name is available

Common Beginner Mistakes

Mixing Strings and Numbers

const price = "500";
const deliveryCharge = 50;

console.log(price + deliveryCharge);

Output:

Because price is a string, JavaScript joins the values.

Correct approach:

const price = Number("500");
const deliveryCharge = 50;

console.log(price + deliveryCharge);

Output:

Confusing Null with Undefined

let userName;
const profileImage = null;

These values are not exactly the same.

undefined means no value was assigned.
null means the value was intentionally kept empty.

Using typeof for Arrays

Incorrect check:

const books = ["Book 1", "Book 2"];

console.log(typeof books === "array");

This returns false.

Correct check:

console.log(Array.isArray(books));

Forgetting Quotation Marks

Incorrect:

const city = Delhi;

Correct:

const city = "Delhi";

Text values must be written inside quotation marks.

Practical Example

const product = {
  name: "JavaScript Course",
  price: 999,
  isAvailable: true,
  topics: ["Variables", "Data Types", "Functions"],
  discount: null
};

console.log(typeof product.name);
console.log(typeof product.price);
console.log(typeof product.isAvailable);
console.log(Array.isArray(product.topics));
console.log(product.discount === null);

Output:

string
number
boolean
true
true

This example includes:

A string
A number
A Boolean
An array
A null value
An object

Best Practices

Follow these practices while working with data types:

Use meaningful variable names.
Keep number values as numbers.
Keep text values inside quotation marks.
Use Array.isArray() to check arrays.
Use strict comparison when checking null.
Convert form-input values when numeric calculations are required.
Avoid changing the same variable between unrelated data types.
Use typeof while debugging your code.

Practice Questions

Try these exercises:

Create a string variable containing your name.
Create a number variable containing your age.
Create a Boolean variable showing whether you are a student.
Declare a variable without assigning a value.
Create a variable with a null value.
Create an array containing three cities.
Create an object containing your name, age, and city.
Use typeof to check different values.
Convert "500" into a number.
Check whether an array is really an array.

Practising each example manually will help you remember the concepts much faster.

Conclusion

JavaScript data types define the kind of values stored inside variables.

The most commonly used data types are:

String
Number
Boolean
Undefined
Null
Object
Array
Function

Primitive data types store simple values, while non-primitive data types store collections or structured information.