Understanding JavaScript Data Types

In JavaScript, data types define the nature of the data that is used in the program, and they determine how it should be interpreted and manipulated. JavaScript categorizes its data types into primitive types and non-primitive types (Objects). In total, JavaScript has eight basic data types, with seven being primitive types and the eighth being the Object type.

Let's dive deeper into each data type:

Primitive Data Types

Primitive data types are immutable (they cannot be changed), and they are compared by value. JavaScript has seven primitive types:

Number
BigInt
String
Boolean
undefined
null
Symbol

Number

The Number data type is used for all types of numbers, whether they are integers or floating-point (decimal) numbers. JavaScript also handles some special numeric values:

Infinity: Represents a value greater than any other number.
-Infinity: Represents a value smaller than any other number.
NaN (Not-a-Number): Represents an invalid or undefined number, typically the result of an incorrect or undefined mathematical operation (e.g., 0 / 0 or parseInt('abc')).

let age = 25; // integer
let score = 99.6; // floating-point number
let result = NaN; // Not-a-Number

BigInt

The BigInt data type is used for integers larger than Number.MAX_SAFE_INTEGER (2^53 - 1). If you need to work with really large numbers, such as in cryptography or high-precision scientific calculations, BigInt is the answer. You create a BigInt by appending an n to the end of an integer.

let largeNumber = 9007199254740991n; // BigInt
let anotherBigInt = BigInt(12345678901234567890); // BigInt via constructor

String

A String in JavaScript is used to represent textual data. Strings are enclosed in quotes—single ('), double ("), or backticks (`). Double and single quotes are functionally equivalent. Backticks (template literals) allow for embedded expressions using $ and can span multiple lines.

let name = "Alice"; // using double quotes
let greeting = 'Hello'; // using single quotes
let message = `Welcome, ${name}!`; // using template literal

Boolean

The Boolean data type can only have two values: true or false. Booleans are often used to control program flow using conditional statements and logical operators.

let isLoggedIn = true;
let hasAccess = false;

undefined

The undefined value is assigned to a variable that has been declared but not yet assigned a value. It represents the absence of any value.

let user;
console.log(user); // undefined

Note: You should avoid assigning undefined explicitly, as it is the default value for uninitialized variables. Instead, use null for representing an intentional absence of value.

null

The null value explicitly represents "nothing" or "empty." It is often used to indicate the intentional absence of an object or value.

let currentUser = null;

Symbol

The Symbol type is a unique and immutable primitive introduced in ECMAScript 6 (ES6). Every Symbol() is guaranteed to be unique, even if they have the same description. Symbols are often used as keys for object properties to ensure that they do not clash with other property keys.

let id = Symbol('id');
let anotherId = Symbol('id');
console.log(id === anotherId); // false (each Symbol is unique)

Non-Primitive Data Type: Object

An Object is a complex data type that allows storing collections of data in the form of key-value pairs. Objects are mutable, meaning their properties can be changed after they are created.

In addition to standard objects, JavaScript provides several other object types such as arrays, functions, and dates, which are special cases of objects.

let user = {
  name: "John",
  age: 30,
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};
 
user.greet(); // Output: Hello, I'm John

Arrays

Arrays are objects used to store multiple values in a single variable. Array elements can be of any type, and they are ordered by index.

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // apple

Functions

Functions are objects that allow you to encapsulate reusable blocks of code.

function sayHello() {
  return "Hello, world!";
}
console.log(sayHello()); // Output: Hello, world!

Additional Concepts

Type Coercion JavaScript automatically converts data types when necessary, a process known as type coercion. This can happen when using operators like + or in conditional checks.

console.log(1 + '2'); // Output: '12' (number 1 is coerced into a string)
console.log(true + 1); // Output: 2 (true is coerced into 1)

Dynamic Typing

JavaScript is dynamically typed, meaning you do not need to specify data types when declaring variables. The type of a variable is determined by the value it holds, and it can change during the program's execution.

let value = 42; // number
value = "forty-two"; // string
console.log(typeof value); // Output: string

Type Checking

To check the type of a variable in JavaScript, you can use the typeof operator.

console.log(typeof 123); // Output: number
console.log(typeof 'hello'); // Output: string
console.log(typeof true); // Output: boolean
console.log(typeof undefined); // Output: undefined
console.log(typeof null); // Output: object (this is an historical quirk in JavaScript)
console.log(typeof Symbol()); // Output: symbol
console.log(typeof {}); // Output: object (plain object)
console.log(typeof []); // Output: object (arrays are technically objects in JavaScript)
console.log(typeof function() {}); // Output: function (special callable object)
console.log(typeof new Date()); // Output: object (Date object)
console.log(typeof /regex/); // Output: object (RegExp object)
console.log(typeof NaN); // Output: number (NaN is considered a numeric type despite being "Not-a-Number")
console.log(typeof BigInt(12345678901234567890n)); // Output: bigint
console.log(typeof new Map()); // Output: object (Map is a special object type)
console.log(typeof new Set()); // Output: object (Set is a special object type)

Var Let Const Operators in JavaScript