JavaScript

JavaScript Data Types: Complete Beginner’s Guide

9 min read Harshit No comments
JavaScript Data Types

JavaScript data types define what kind of value a variable can store. Understanding data types is one of the most important steps when learning JavaScript because almost every JavaScript program works with different types of data.

In this tutorial, you will learn about JavaScript primitive and non-primitive data types with simple examples.

What Are Data Types in JavaScript?

A data type tells JavaScript what kind of value you are working with.

For example:

let name = "Harshit";
let age = 25;
let isDeveloper = true;

Here:

  • name contains a string.
  • age contains a number.
  • isDeveloper contains a boolean.

JavaScript is a dynamically typed language, which means you do not need to specify the data type when declaring a variable.

let value = 100;

value = "Hello";

value = true;

The same variable can hold different types of values at different times.


Types of Data Types in JavaScript

JavaScript data types are generally divided into two categories:

  1. Primitive Data Types
  2. Non-Primitive Data Types

Primitive Data Types

JavaScript has seven primitive data types:

  1. String
  2. Number
  3. BigInt
  4. Boolean
  5. Undefined
  6. Null
  7. Symbol

Non-Primitive Data Type

The main non-primitive data type is:

  • Object

Arrays, functions, and many other JavaScript structures are also objects internally.


1. String

A string represents text.

You can create strings using single quotes, double quotes, or backticks.

let name = "Harshit";
let city = 'Jaipur';
let message = `Welcome to JavaScript`;

You can also check the type using typeof:

console.log(typeof name);

Output:

string

Template Literals

Backticks allow you to include variables inside a string.

let name = "Harshit";
let age = 25;

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

console.log(message);

Output:

My name is Harshit and I am 25 years old.

Template literals are especially useful when creating dynamic messages.


2. Number

The Number type is used for both integers and floating-point numbers.

let age = 25;
let price = 99.99;
let temperature = -5;

JavaScript does not have separate int and float types like some other programming languages.

console.log(typeof age);

Output:

number

You can perform mathematical operations with numbers:

let a = 10;
let b = 5;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

JavaScript also has special numeric values such as:

  • NaN
  • Infinity
  • -Infinity

For example:

console.log(10 / 0);

Output:

Infinity

3. BigInt

BigInt is used to represent very large integers that cannot be safely represented by the regular Number type.

You can create a BigInt by adding n at the end of an integer.

let bigNumber = 123456789012345678901234567890n;

console.log(bigNumber);

Check its type:

console.log(typeof bigNumber);

Output:

bigint

BigInt is useful when working with very large integer values, such as large IDs or financial and scientific calculations where integer precision matters.

You should not directly mix BigInt and Number in arithmetic operations.

let a = 10n;
let b = 5;

console.log(a + b);

This causes an error because JavaScript does not automatically combine BigInt and Number in this operation.


4. Boolean

A Boolean can have only two values:

true
false

Booleans are commonly used for conditions.

let isLoggedIn = true;
let isAdmin = false;

Example:

let age = 20;

if (age >= 18) {
    console.log("You are an adult.");
}

Boolean values are very important when working with if statements, loops, comparisons, authentication, permissions, and application logic.


5. Undefined

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

let username;

console.log(username);

Output:

undefined

You can check its type:

console.log(typeof username);

Output:

undefined

For example:

let user;

if (user === undefined) {
    console.log("User is not defined.");
}

undefined commonly means that a value has not been assigned or is not available.


6. Null

null represents an intentional absence of a value.

let user = null;

This means the variable currently has no object/value assigned intentionally.

For example:

let selectedUser = null;

Later, you can assign a user:

selectedUser = {
    name: "Harshit"
};

Important: typeof null

There is a famous JavaScript behavior:

console.log(typeof null);

The result is:

object

This is a historical JavaScript quirk. Although null is a primitive value, typeof null returns "object".

So do not use typeof alone when you need to specifically check for null.

Use:

if (value === null) {
    console.log("Value is null");
}

7. Symbol

Symbol creates a unique value.

let id = Symbol("id");

Every Symbol is unique, even when the descriptions are the same.

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

console.log(id1 === id2);

Output:

false

Symbols are often used as unique object property keys.

const id = Symbol("id");

const user = {
    name: "Harshit",
    [id]: 101
};

console.log(user[id]);

You will usually encounter Symbols more often when working with advanced JavaScript features and libraries.


8. Object

An object stores data in key-value pairs.

let user = {
    name: "Harshit",
    age: 25,
    city: "Jaipur"
};

You can access object properties using dot notation:

console.log(user.name);

Or bracket notation:

console.log(user["age"]);

Objects can contain different types of values:

let product = {
    name: "Laptop",
    price: 50000,
    available: true
};

Here, the object contains a string, number, and Boolean.

Objects are one of the most important concepts in JavaScript because they are used extensively in web applications, APIs, JSON data, and JavaScript frameworks.


Arrays Are Objects in JavaScript

An array is used to store multiple values.

let fruits = ["Apple", "Banana", "Mango"];

You can access an item using its index:

console.log(fruits[0]);

Output:

Apple

Interestingly, arrays are objects in JavaScript.

console.log(typeof fruits);

Output:

object

This is why checking only typeof is not enough to determine whether a value is an array.

You can use:

Array.isArray(fruits);

Output:

true

Functions Are Objects Too

Functions are another important part of JavaScript.

function greet() {
    console.log("Hello!");
}

You can check its type:

console.log(typeof greet);

Output:

function

Functions are technically objects in JavaScript and can have properties and methods, but typeof gives the special result "function" for callable functions.


The typeof Operator

The typeof operator is useful for checking the type of a value.

let name = "Harshit";
let age = 25;
let isDeveloper = true;
let user = {};
let value;

console.log(typeof name);
console.log(typeof age);
console.log(typeof isDeveloper);
console.log(typeof user);
console.log(typeof value);

Output:

string
number
boolean
object
undefined

Some common results are:

Valuetypeof result
"Hello""string"
100"number"
true"boolean"
123n"bigint"
undefined"undefined"
null"object"
{}"object"
[]"object"
function(){}"function"
Symbol()"symbol"

Primitive vs Non-Primitive Data Types

One important distinction in JavaScript is between primitive and non-primitive values.

Primitive Values

Primitive types represent a single value.

Examples:

let name = "Harshit";
let age = 25;
let active = true;
let value = null;

Primitive types include:

  • String
  • Number
  • BigInt
  • Boolean
  • Undefined
  • Null
  • Symbol

Non-Primitive Values

Objects can contain collections of values.

let user = {
    name: "Harshit",
    age: 25
};

Arrays are also objects:

let numbers = [10, 20, 30];

Functions are objects as well.


Primitive Values Are Immutable

Primitive values themselves cannot be changed.

For example:

let name = "Harshit";

name[0] = "h";

console.log(name);

The original string remains unchanged.

However, you can assign a completely new value to the variable:

name = "Rahul";

This is different from modifying the original primitive value.


Objects Are Mutable

Objects can be modified after creation.

let user = {
    name: "Harshit",
    age: 25
};

user.age = 26;

console.log(user.age);

Output:

26

The object itself was changed.

This difference between primitive values and objects becomes very important when you learn about references, functions, and memory management.


Dynamic Typing in JavaScript

JavaScript uses dynamic typing.

This means a variable can contain one type of value and later contain another type.

let value = 100;

console.log(typeof value);

value = "Hello";

console.log(typeof value);

value = true;

console.log(typeof value);

Output:

number
string
boolean

You do not need to declare the type manually.

This makes JavaScript flexible, but it also means developers need to pay attention to the values their variables contain.


Type Conversion

JavaScript allows you to convert values from one type to another.

For example, converting a string into a number:

let value = "100";

let number = Number(value);

console.log(number);
console.log(typeof number);

Output:

100
number

You can also convert a number into a string:

let number = 100;

let value = String(number);

console.log(typeof value);

Output:

string

Boolean conversion is also possible:

let value = 1;

console.log(Boolean(value));

Output:

true

Type conversion is an important topic because JavaScript sometimes performs automatic type conversion during operations.


Common Mistakes with JavaScript Data Types

Mistake 1: Assuming null is an object

Although:

typeof null

returns:

object

null is a primitive value.

Use:

value === null

when specifically checking for null.

Mistake 2: Assuming arrays have type "array"

This:

typeof [1, 2, 3]

returns:

object

Use:

Array.isArray([1, 2, 3]);

instead.

Mistake 3: Mixing BigInt and Number

Avoid:

10n + 5

Convert values intentionally before performing the operation.

Mistake 4: Confusing undefined and null

undefined usually means a value has not been assigned or is unavailable.

null generally represents an intentionally empty value.


JavaScript Data Types Example

Here is a simple example using several JavaScript data types:

let name = "Harshit";
let age = 25;
let isDeveloper = true;
let salary = null;
let company;
let largeNumber = 12345678901234567890n;
let id = Symbol("id");

let user = {
    name: name,
    age: age,
    isDeveloper: isDeveloper
};

console.log(name);
console.log(age);
console.log(isDeveloper);
console.log(salary);
console.log(company);
console.log(largeNumber);
console.log(id);
console.log(user);

This example demonstrates how different data types can be used together in a JavaScript application.


Frequently Asked Questions

How many data types are there in JavaScript?

JavaScript has 7 primitive data types: String, Number, BigInt, Boolean, Undefined, Null, and Symbol. Objects are the main non-primitive type.

Is an array a data type in JavaScript?

Arrays are not a separate primitive type. They are objects in JavaScript.

typeof []

returns:

object

Use Array.isArray() to check for arrays.

What is the difference between null and undefined?

undefined generally means that a value has not been assigned, while null is usually used to represent an intentionally empty value.

Is JavaScript statically typed?

No. JavaScript is dynamically typed, so variables can hold values of different types during program execution.

What is the use of typeof?

The typeof operator helps determine the type of a value.

typeof "Hello"

returns:

string

Practice Exercises

Try these exercises to test your understanding:

  1. Create variables for your name, age, and city.
  2. Print the data type of each variable.
  3. Create an array containing five programming languages.
  4. Create an object representing a user.
  5. Create a variable with null.
  6. Create a variable without assigning a value.
  7. Create a BigInt value.
  8. Use typeof to inspect different values.
  9. Use Array.isArray() to check an array.
  10. Convert a string containing a number into a Number.

Conclusion

Understanding JavaScript data types is essential before moving to more advanced concepts such as functions, arrays, objects, DOM manipulation, promises, and asynchronous JavaScript.

The most important types to remember are String, Number, BigInt, Boolean, Undefined, Null, Symbol, and Object.

Once you understand how JavaScript stores and handles different values, writing and debugging JavaScript code becomes much easier.

In the next tutorial, we can explore JavaScript Operators, including arithmetic, comparison, logical, assignment, and increment/decrement operators.

Leave a comment

Your email address will not be published.