JavaScript data type demystified: From primitives to objects

SrijanUpdated Mar 17, 2025 - JavaScript

Introduction

In JavaScript, a datatype specifies the kind of value that a variable can hold. It simply tells the JavaScript engine how to interpret the data. Understanding datatypes is fundamental for mastering JavaScript because it influences how data is stored, manipulated, and evaluated within your code.

JavaScript categorizes datatypes into two main groups:

• Primitives: String, Number, Boolean, Undefined, Null, Symbol, and BigInt.
• Objects: Object Literals, Arrays, Functions, Date, RegExp, Error, and Custom Objects.

This article will demystify these types by providing clear explanations and practical examples, helping you better understand how JavaScript handles data.

Table of Contents

• Understanding primitive data type
  • String
    • Working with strings
    • Finding the length
    • Changing case
    • Extracting substrings
    • Replacing text
    • Combining strings
    • Removing whitespace
  • Number
    • NaN (Not-a-Number)
    • Infinity
  • Boolean
  • Undefined
  • Null
  • Symbol
  • BigInt
• Understanding object data type
• Summary

Understanding primitive data type

Primitive datatypes are the fundamental building blocks of data in JavaScript. These include basic types like strings, numbers, and booleans. You cannot change primitive values once you create them because they are immutable. If you attempt to modify a primitive value, JavaScript creates a new value instead.

String

A string is a sequence of characters used to represent text. Example: "Hello, World!".

Working with strings

Strings in JavaScript come with a rich set of built-in methods that simplify text manipulation. Here are some of the most frequently used methods:

Finding the length

The length property returns the number of characters in a string.

1console.log("Hello".length); // Output: 5

Changing case

toUpperCase() and toLowerCase() convert strings to uppercase and lowercase, respectively.

1console.log("hello".toUpperCase()); // Output: HELLO
2console.log("HELLO".toLowerCase()); // Output: hello

Extracting substrings

substring() and slice() allow you to extract portions of a string. substring() uses start and end indices, while slice() can also use negative indices to count from the end.

1console.log("JavaScript".substring(0, 4)); // Output: Java
2console.log("JavaScript".slice(4)); // Output: Script

Replacing text

replace() substitutes a specified substring with another.

1console.log("Hello World".replace("World", "JavaScript")); // Output: Hello JavaScript

Combining strings

concat() joins two or more strings together.

1console.log("Hello ".concat("World")); // Output: Hello World

Removing whitespace

trim() eliminates whitespace from both ends of a string.

1console.log("  Hello  ".trim()); // Output: Hello

Number

The Number datatype in JavaScript represents numeric values, including whole numbers (integers) and numbers with decimals (floating-point numbers).

1let age = 30; // Integer
2let temperature = 36.6; // Floating-point number

JavaScript also provides special numeric values:

NaN (Not-a-Number)

NaN represents a value that is not valid, often resulting from invalid mathematical operations.

1let result = 0 / 0;
2console.log(result); // NaN

Infinity

Infinity represents a value that exceeds the upper limit of JavaScript's number range.

1let infinite = 1 / 0;
2console.log(infinite); // Infinity

Understanding these unique values will help you handle unusual numeric operations and avoid common pitfalls in JavaScript.

Boolean

The Boolean datatype represents a logical value that can be true or false. Developers often use booleans in conditional statements (if, else, switch) to control the flow of a program.

1let isLoggedIn = true;
2
3if (isLoggedIn) {
4  console.log("You are logged in");
5} else {
6  console.log("Please login to continue");
7}

Undefined

A variable becomes undefined when you declare it but don't assign a value.

1let result;
2console.log(result); // undefined

Null

Null represents an intentional absence of any value. Null is generally used to indicate that a variable has no explicit value.

1let user = null;

Symbol

JavaScript introduced symbols in ES6 as a unique and immutable primitive datatype. You can use symbols as unique keys for object properties, ensuring that property names do not accidentally clash with others. Even if two symbols have the same description, they are always distinct and unique.

Symbol is handy when integrating third-party code or creating libraries to avoid accidental overwriting of object properties. You can use symbols to create hidden properties in objects. These properties won't appear during regular property enumeration, which helps enhance encapsulation and avoid accidental interference with other code.

1// Creating a unique symbol with the description 'id'
2const uniqueId = Symbol("id");
3
4// Even if you create another symbol with the same description, it will be unique
5const anotherId = Symbol("id");
6
7console.log(uniqueId === anotherId); // false
8
9// Using symbols as object property keys
10const user = {
11  [uniqueId]: 1,
12};
13
14console.log(user[uniqueId]); // 1

BigInt

Number type can safely represent integers only up to 2^53 - 1, known as the safe integer limit. Beyond this, JavaScript cannot guarantee an accurate representation of numbers, which can lead to precision errors.

To solve this, ES11 introduced BigInt, a primitive datatype allowing developers to work with arbitrary-length integers without losing precision. BigInt is especially useful in scenarios involving large datasets, cryptography, or mathematical calculations where precision is crucial.

1// Attempting to store a large number with the Number type (leads to precision issues)
2const regularNumber = 1234567890123456789012345678901234567890;
3console.log(regularNumber); // May result in inaccurate value
4
5// Using BigInt to accurately represent large integers
6const bigNumber = 1234567890123456789012345678901234567890n;
7console.log(bigNumber); // Correct and precise value

Understanding object data type

In JavaScript, an object is a collection of properties where each property is defined by a key-value pair. Objects are mutable, meaning you can add, modify, or remove properties after their creation.

1const device = {
2  type: "Laptop",
3  brand: "Generic",
4  isOn: false,
5};
6
7// Modifying a property
8laptop.isOn = false;
9console.log(laptop.isOn); // Output: false
10
11// Adding a new property
12laptop.year = 2025;
13console.log(laptop.year); // Output: 2025

Objects in JavaScript are much more complex and versatile than primitives, requiring a more in-depth exploration. Therefore, we will dedicate a separate article to comprehensively explain objects, their types, and their practical uses.

Summary

Understanding JavaScript datatypes is crucial for writing robust and efficient code. This article explored the two major categories: primitive datatypes, which are immutable values, and object datatypes, which are mutable collections of key-value pairs. By grasping the nuances of each type, you'll be well-equipped to tackle more complex JavaScript challenges. Further exploration of object types and their methods will be covered in future articles.