Learn the difference between primitive types (like numbers, strings, booleans) and non-primitive types (objects, arrays, functions). Understand how JavaScript handles different kinds of data, which is crucial for writing effective and error-free code.
In JavaScript, every piece of information you work with, whether it's text, numbers, or more complex structures, has a specific data type. Understanding data types is fundamental because they dictate what kind of values a variable can hold and what operations can be performed on those values. JavaScript is a dynamically typed language, meaning you don't have to explicitly declare the data type of a variable; the engine determines it automatically at runtime.
JavaScript categorizes data types into two main groups: Primitive Data Types and Non-Primitive (or Reference) Data Types.
Primitive data types represent single, immutable values. When you assign a primitive value to a variable, you are essentially storing the actual value in that variable. There are seven primitive data types in JavaScript:
NumberUsed for both integer and floating-point numbers. JavaScript uses a single Number type, which is a double-precision 64-bit binary format IEEE 754 value.
let age = 30; // Integer
let price = 99.99; // Floating-point
let temperature = -5; // Negative number
console.log(typeof age); // Output: "number"
StringAverage 5.0 by 2 learners
Represents sequences of characters, used for text. Strings can be enclosed in single quotes (''), double quotes (""), or backticks ( ) for template literals.
let name = "Alice";
let greeting = 'Hello, world!';
let message = `You are ${age} years old.`; // Template literal
console.log(typeof name); // Output: "string"
BooleanRepresents a logical entity and can have only two values: true or false. Booleans are often used in conditional statements.
let isActive = true;
let hasPermission = false;
console.log(typeof isActive); // Output: "boolean"
UndefinedRepresents a variable that has been declared but has not yet been assigned a value. It's also the default return value for functions that don't explicitly return anything.
let quantity; // Declared but not assigned
console.log(quantity); // Output: undefined
console.log(typeof quantity); // Output: "undefined"
function doNothing() {
// No return statement
}
console.log(doNothing()); // Output: undefined
NullRepresents the intentional absence of any object value. It's a primitive value, but typeof null returns 'object', which is a long-standing bug in JavaScript.
let selectedItem = null; // Intentionally set to no value
console.log(selectedItem); // Output: null
console.log(typeof selectedItem); // Output: "object" (This is a known quirk!)
Symbol (Introduced in ES6)Represents a unique and immutable value. Symbols are often used to create unique property keys that won't clash with other property keys.
const id1 = Symbol('id');
const id2 = Symbol('id');
console.log(id1 === id2); // Output: false (Each Symbol is unique)
console.log(typeof id1); // Output: "symbol"
BigInt (Introduced in ES2020)Represents whole numbers larger than 2^53 - 1 (the maximum safe integer for Number). A BigInt is created by appending n to the end of an integer or by calling the BigInt() constructor.
const largeNumber = 9007199254740991n; // Appending 'n' makes it a BigInt
const anotherLargeNumber = BigInt("12345678901234567890");
console.log(typeof largeNumber); // Output: "bigint"
Non-primitive data types are mutable and are stored by reference, not by value. This means when you assign a non-primitive value to a variable, you are storing a reference (memory address) to the actual object in memory. The main non-primitive data types are Object, Array, and Function.
ObjectThe most fundamental non-primitive type. Objects are collections of key-value pairs. They are used to store more complex and structured data.
let person = {
firstName: "John",
lastName: "Doe",
age: 30
};
console.log(typeof person); // Output: "object"
console.log(person.firstName); // Output: John
// When copied, it's a reference
let anotherPerson = person;
anotherPerson.age = 31; // Modifying anotherPerson also changes person
console.log(person.age); // Output: 31
ArrayArrays are special types of objects used to store ordered collections of values. They are zero-indexed.
let fruits = ["apple", "banana", "cherry"];
let numbers = [1, 2, 3, 4, 5];
console.log(typeof fruits); // Output: "object" (Arrays are objects in JS)
console.log(fruits[0]); // Output: apple
FunctionFunctions are also objects in JavaScript. They are blocks of code designed to perform a particular task. Functions can be assigned to variables, passed as arguments, and returned from other functions.
function greet(name) {
return `Hello, ${name}!`;
}
let sayHello = greet;
console.log(typeof greet); // Output: "function" (but technically an object)
console.log(sayHello("World")); // Output: Hello, World!
The most crucial distinction lies in how they are stored and manipulated:
This difference is a common source of confusion for beginners and leads to concepts like deep vs. shallow copy, which we discussed in a previous byte.
Understanding JavaScript's data types is foundational to writing effective and bug-free code. Knowing whether you're dealing with a primitive value or a reference type helps you predict how your data will behave, especially when passing variables around or modifying them. By grasping these building blocks, you gain better control over your programs and can avoid common pitfalls.