JavaScript Data Types

JavaScript is a popular programming language that is used to create web apps and websites. When you are writing code in JavaScript, you work with different types of data like numbers, words, and lists and these data are known as JavaScript data types. In this blog, we will discuss what JavaScript data types are, including primitive data types and non-primitive data types, and how you can use them.

Table of Contents:

• What are JavaScript Data Types?
• Primitive Data Types in JavaScript
• Non-Primitive Data Types in JavaScript
• Performance Comparison: Primitive vs. Non-Primitive Data Types
• Type Coercion in JavaScript
• Mutable vs. Immutable Data Types in JavaScript
• Things You Should Know About JavaScript Data Types
• Conclusion

What are JavaScript Data Types?

Learning about JavaScript data types is really important to handle and store information. JavaScript data types are the types of values that a variable can store. Data types help JavaScript to understand what kind of data you are using in your program like numbers, words, or lists. JavaScript data types are divided into two categories:

1. Primitive data types
2. Non-primitive data types

Primitive Data Types in JavaScript

In JavaScript, primitive data types contain basic types of values. They are not objects and can only store a single value. Primitive data types are simple and can not be changed directly. There are 7 types of primitive data types in JavaScript:

1. Number

The Number data type is used when you are working with numbers like whole numbers known as integers and decimal numbers known as floating points. It also contains special values like Infinity, -Infinity, and NaN (Not a Number).

Declaration: You can declare a number using the let, const, or var keyword followed by the variable name as shown below:

let n = 10;

Number Limit in JavaScript:

JavaScript has limits for the numbers that are defined in the number object. Some important properties are: 

1. Largest Safe Integer: The largest integer value in JavaScript without overflowing is 9,007,199,254,740,991 (2^53 – 1). After this, JavaScript may not be able to store numbers accurately.
   
   Representation: Number.MAX_SAFE_INTEGER
   
2. Largest Possible Value: The maximum floating point number that JavaScript can store is approx. 1.7976931348623157 × 10³⁰⁸. After this, it will show infinity.
   
   Representation: Number.MAX_VALUE
   
3. Smallest Possible Value: The smallest positive number greater than 0 that JavaScript can store is 5 × 10⁻³²⁴.
   Note: This is not the smallest negative number but the smallest nonzero number.
   
   Representation: Number.MIN_VALUE
   
4. Epsilon: JavaScript numbers depend on the floating point arithmetic that can create errors. Epsilon represents the smallest difference between two floating point numbers.
   Value: 2.220446049250313e-16
   
   Representation: Number.EPSILON
   
5. Infinity: It represents the overflow of the number. To check if the number has reached infinity or -infinity use Number.isFinite.
   
6. NaN:  It represents that the value is not a number. To check if the number is NaN or not use Number.isNaN.

Example: Let’s see some examples of number data types.

let age = 25; // Whole number
let price = 54.75; // Decimal number
let result = 10 / 0; // Infinity
let invalid = "Intellipaat" - 2; // NaN (Not a Number)
console.log(age);
console.log(price);
console.log(result);
console.log(invalid);

Output:

2. String

The String data type in JavaScript is used to store text. The string is a sequence of characters that can include letters, numbers, symbols, or even space. When writing JavaScript code, you have to enclose the string using single quotes (‘’), double quotes (“”), or backticks (“).

Declaration: You can declare a string using let, const, or var followed by the variable name as shown below:

let x = “Intellipaat”;

Example: Let’s see some examples of string data types.

let x = "HTML";
let y = 'CSS';
let z = `JavaScript`;
console.log(x);
console.log(y);
console.log(z);

Output:

Special Features of Strings:

• Escape Characters: Some characters need a backslash (\) before you can use them inside a string. For example:

let greet = "Hi, It\'s Intellipaat!";
console.log(greet);

Output:

Hi, It's Intellipaat!

• Template Literals (Backticks `): You can use another variable inside a string using ${}. For example:

let age = 25;
let info = `I am ${age} years old.`;
console.log(info);

Output:

3. Boolean

Boolean is a primitive data type in JavaScript that has only two values True or False. It is used when you face a situation where there are two possible values that are either true or false. Boolean helps you in decision-making, comparisons, and conditional statements.

In JavaScript, some other values are also considered true and false which are:

• True values:

1. Any non-zero number like 1, -5, 3.14
2. Any non-empty string like “hello”
3. Objects and arrays {}, []
4. true

• False values:

1. false
2. 0
3. empty string (“”)
4. null
5. undefined
6. NaN

Declaration: You can assign a boolean value using true or false.

let x = true;

Example: Let’s see an example of a boolean data type in JavaScript.

let isRaining = true;
let isSunny = false;
console.log(isRaining);
console.log(isSunny);

Output:

4. Null

The Null is a special primitive data type in JavaScript that represents nothing or empty. It is used when you want to say that the variable has no value intentionally.

Declaration: You can assign a variable using null to show that it is empty or has no value.

let x = null;

Example: Let’s see an example of a null data type in JavaScript.

let user = null;
console.log(user);

Output:

To check if the variable is null or not you can use the strict equality operator (===).

Example:

let data = null;
if (data === null) {
  console.log("Data is null!");
} else {
  console.log("Data is not null.");
}

Output:

5. Undefined

Undefined is a primitive data type in JavaScript that represents a variable that has been created but didn’t get a value yet. JavaScript automatically declares a variable undefined if it has no value.

Declaration: A variable automatically becomes undefined when you don’t assign a value to it.

let x;

Example: Let’s see an example of an undefined variable that has no value.

let name;
console.log(name);

Output:

6. Symbol

Symbol is a primitive data type in JavaScript that was introduced in ES6 (ECMAScript 2015). Symbols are used to create unique values. They are mostly used in objects as unique keys to avoid conflicts with other properties.

Declaration: 

• You can create a symbol using the symbol() function.

let x = symbol();

• You can also provide a description to the symbol.

let x = Symbol("userID");

Example: Let’s see an example of how you can create symbols.

let sym1 = Symbol("hello");
let sym2 = Symbol("Intellipaat");
console.log(sym1 === sym2);

Output:

7. BigInt

The BigInt data type in JavaScript is used to store very big numbers that you can’t store using the normal Number data type. It was introduced in ES11 (ECMAScript 2020) to work with bigger numbers than the largest safe integer (2^53 – 1).

Note: You can not store decimal numbers using BigInt. You can only store whole numbers.

Declaration: 

• You can create a BigInt number by adding ‘n’ at the end.

let n = 123456789012345678901234567890n;

• Or, you can create a BigInt number using the BigInt() function.

let n = BigInt(9876543210);

Example: Let’s see an example of how you can create a BigInt number in JavaScript.

let num1 = 90265284856342758573n;
let num2 = BigInt(97362484852463);
console.log(num1);
console.log(num2);

Output:

Non-Primitive Data Types in JavaScript

In JavaScript, non-primitive data types also known as reference types are used to store multiple values, unlike primitive data types that can only store single values. Non-primitive data types are stored as references which means you can change them later. There are mainly 5 non-primitive data types in JavaScript:

1. Object

An Object is a non-primitive data type in JavaScript that is used to store multiple values as key-value pairs. Keys are also known as properties and each key is a string that can be any data type primitive or non-primitive. Objects are mainly used to group related data and functions in a structured way.

Declaration: You can create an object in multiple ways.

• Object Literal (Most common way): In this method, we will create a literal using the var, let, or const keyword and then assign the key-value pairs to it which are written inside {}.

Syntax:

let obj = {
    key: "value"
}

• By calling the constructor: In this method, we will declare an object by calling object() constructor using a new keyword and then will assign the key-value pairs to it using the .operator.

Syntax:

let obj = new Object();
obj.name = 'Javascript';

Let’s see examples of object data types using both methods.

Example 1: Using object literal method.

let user = {
  name: "Intellipaat", 
  age: 25,  
};
console.log(user);

Output:

Example 2: Using constructor method.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let user = new Person("Intellipaat", 25);
console.log(user);

Output:

2. Arrays

An Array in JavaScript is a non-primitive data type that is used to store multiple values in an ordered list. Values in an array are known as elements and you can access them using an index that starts from 0.

Arrays can store any type of data like numbers, strings, objects, functions, etc., which makes them very flexible when working with list data.

Declaration: You can create an array in multiple ways:

• By using Square Brackets [] (Most Common Method):

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

• By using new Array() Constructor:

let numbers = new Array(10, 20, 30);

Example: Let’s see an example array data type in JavaScript.

let colors = ["Red", "Green", "Blue"];
console.log(colors[0]); // Output: Red
console.log(colors[1]); // Output: Green
console.log(colors.length);

Output:

3. Function

A Function in JavaScript is a non-primitive data type that can help you use a single block of code multiple times. Basically, functions are used to perform a specific task. They take input as parameters and return the output.

Functions in JavaScript are first-class objects which means you can store them in variables, pass them as arguments, and return them from other functions.

Declaration: You can declare a function in many ways.

• Function Declaration – using a named function:

function greet(name) {
  return "Hello, " + name + "!";
}

• Function Expression – using an anonymous function assigned to a variable:

let greet = function(name) {
  return "Hello, " + name + "!";
};

• Arrow Function:

let greet = (name) => "Hello, " + name + "!";

Example: Let’s see an example of a function with multiple parameters.

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));

Output:

4. Date Object

The Date object in JavaScript is a non-primitive data type that is used when you are working with date and time. You can get the current date and time and do the calculations with time. Because it is a non-primitive data type you can change its value after it is created.

Declaration: You can create a Date object using the new Date() constructor.

• To create a Date Object with the Current Date & Time:

let currentDate = new Date();
console.log(currentDate);

• To create a Date Object with a Specific Date:

let specificDate = new Date("1999-01-31"); 
console.log(specificDate);

• To create a Date Object with Year, Month, Day, Hour, Minute, Second:

let customDate = new Date(2024, 0, 15, 14, 30, 0);  
console.log(customDate);

Example: Let’s see an example of getting Date and Time components.

let today = new Date();
console.log(today.getFullYear());
console.log(today.getMonth() + 1);
console.log(today.getDate());
console.log(today.getDay());
console.log(today.getHours());
console.log(today.getMinutes());
console.log(today.getSeconds());

Output:

5. Regular Expression

A Regular Expression (RegExp) in JavaScript is a non-primitive data type that is used for searching and pattern matching in text. You can find, replace, and verify text easily. Regular expressions are mostly used to check if the input that the user provided is correct like email and password, find words in the text, break text into small parts, and get important information from a very big text.

Declaration: You can declare a Regular Expression in two ways.

• By using the Slash Notation (/pattern/) – The most common method:
  <pre>let pattern = /Intellipaat/;</pre>
  
• By using the RegExp() Constructor:
  <pre>let pattern = new RegExp(“Intellipaat”);</pre>
  

Example: Let’s see an example of finding the match in a string using match().

let text = "JavaScript is amazing!";
let result = text.match(/amazing/);
console.log(result);

Output:

Performance Comparison: Primitive vs. Non-Primitive Data Types

Type Coercion in JavaScript

Type Coercion refers to the automatic conversion of the values from one type to another. It happens when JavaScript expects a specific type, but the value you have given is of a different type, then JavaScript will automatically convert it for you.

1. Implicit Coercion

It means JavaScript will automatically convert the type when needed.

• String + Number: Converts a number to a string to create a longer string.

Example:

let result = "Number of courses are " + 40;
console.log(result);

Output:

2. Explicit Coercion

It means you can manually convert types using functions like String(), Number(), and Boolean().

Example:

let num = 123;
let str = String(num);
console.log(str);

Output:

Mutable vs. Immutable Data Types in JavaScript

Mutable and immutable data types in JavaScript refer to whether a data type can be changed or not after it is created. Let’s see them both in detail:

1. Mutable Data Types

You can change mutable data types in JavaScript after they are created. You can modify, add, or delete elements or properties from mutable data types. For example, Arrays and Objects.

Example:

// Array
let arr = [1, 2, 3];
arr[0] = 5;
console.log(arr);

// Object
let obj = { name: "Employee" };
obj.name = "Intellipaat";
console.log(obj);

Output:

2. Immutable Data Types

You can not change immutable data types in JavaScript after they are created. If you try to modify a value, it will create a new value instead of changing it. For example, Strings, Numbers, null, undefined, and boolean.

Example:

// String
let str = "Hello";
str[0] = "h";
console.log(str);

// Number
let num = 42;
num += 1;
console.log(num);

Output:

Things You Should Know About JavaScript Data Types

JavaScript has many different characteristics when you are working with data types. Here are all the important things you should know with examples to make it easier to understand:

1. JavaScript is Dynamically Typed

JavaScript is a dynamically typed language which means you don’t need to tell it what type of data a variable will store. It will change automatically from one type to another.

Example:

let x = 10;
x = "Intellipaat";
console.log(x);

Output:

2. NaN is Not Equal to Itself

NaN stands for “Not a Number” which is a special value that means that this value is not a number. But the thing is NaN is not equal to itself. NaN is technically a type of number.

Example:

console.log(NaN === NaN);
console.log(Number.isNaN(NaN));

Output:

3. A Symbol is Never Equal to Another One

A Symbol will always have a unique value. Even if there are 2 symbols that look the same, they are different and can never be equal.

Example:

let sym1 = Symbol("id");
let sym2 = Symbol("id");
console.log(sym1 === sym2);

Output:

4. Difference between Undefined and Null

People get confused when they hear Undefined and Null. Undefined means you created a variable but didn’t assign the value yet and Null means you set a variable to ‘nothing’ intentionally.

Example:

let a;
console.log(a); 
let b = null;
console.log(b);

Output:

5. Integers and floating points are only numbers

It means JavaScript doesn’t have different data types for whole numbers and decimal numbers. There is only one type ‘Number’ that includes both of them.

Example:

let whole = 10;
let decimal = 10.5;
console.log(typeof whole);
console.log(typeof decimal);

Output:

6. A character is also a string

It means JavaScript doesn’t have a different data type for a single character. Whether it is a character or a whole sentence, it is a string. A single character is just a string with one character.

Example:

let char = "A";
let word = "Intellipaat";
console.log(typeof char);
console.log(char.length);
console.log(word.length);

Output:

7. Everything is an Object

Most of the things in JavaScript are objects like functions and arrays except the primitive data types which are number, string, boolean, null, undefined, symbol, and BigInt. But even they can behave like objects temporarily when you add the properties to them.

Example:

console.log(typeof {});
console.log(typeof []);
console.log(typeof new Date());

Output:

Conclusion

So far in this blog, we have learned what JavaScript data types are, including primitive data types and non-primitive data types, and how you can use them. JavaScript data types are the types of values that a variable can store. Data types help JavaScript to understand what kind of data you are using in your program like numbers, words, or lists. 

FAQs – JavaScript Data Types

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 === 0.3);