You will be able to explain JavaScript object data types as reference values, create objects and arrays, and predict how assignment and mutation behave.
What it is
In JavaScript, values are either primitives or reference values. Object data types are reference values: they store data in an object and the variable holds a reference to that object. The most common object types are plain objects, arrays, functions, Date, RegExp, Map, and Set. A plain object is a collection of key-value pairs; an array is an ordered object with numeric indexes and array methods. Related terms: primitive, reference, identity, mutation, shallow copy.
Why it matters
- Objects group related data, such as a user profile with name, email, and roles.
- Arrays let you store ordered collections and use methods like map, filter, and reduce.
- Functions are callable objects, enabling callbacks, closures, and reusable behavior.
- Reference behavior explains why two variables can affect the same object.
- Understanding identity helps avoid bugs when comparing or copying data.
Syntax or steps
Create a plain object with curly braces and properties. Create an array with square brackets. Access properties with dot notation or bracket notation. Assigning an object or array to another variable copies the reference, not the object itself.
const obj = {};
const arr = [];
obj.name = "Ada";
arr.push(1, 2);
Example
const user = {
name: "Ada",
roles: ["admin", "editor"]
};
const sameUser = user;
const copyUser = { ...user };
sameUser.name = "Grace";
copyUser.roles.push("viewer");
console.log(user.name); // "Grace"
console.log(sameUser.name); // "Grace"
console.log(copyUser.name); // "Ada"
console.log(user.roles); // ["admin", "editor", "viewer"]
console.log(user === sameUser); // true
console.log(user === copyUser); // false
Explanation: user references an object. sameUser = user copies the reference, so both names point to the same object. { ...user } creates a new object with copied top-level properties, so changing copyUser.name would not affect user.name. However, the spread is shallow: copyUser.roles still references the same array, so pushing to it changes user.roles too.
Common mistakes
- Assuming assignment copies an object. Fix: use spread,
Object.assign, or a deep clone when needed. - Expecting two similar objects to be equal. Fix: compare properties or use a deep equality helper;
===checks reference identity. - Forgetting that arrays are objects. Fix: remember
typeof []is"object"and useArray.isArray()to test arrays. - Mutating shared references unexpectedly. Fix: pass copies or freeze data when immutability is required.
When to use it
Use object data types when you need structured, mutable, or shared data. Use primitives when you need simple values that are compared by value.
| Need | Use | Why |
|---|---|---|
| Single value like age or flag | primitive | Compared by value and copied directly. |
| Grouped fields | object | Stores named properties and methods. |
| Ordered list | array | Provides indexes and collection methods. |
| Reusable behavior | function | Functions are callable reference values. |
Practice
Guided exercise: create an object named book with title and tags. Assign it to sameBook. Change sameBook.title and log book.title. Expected output: the changed title, because both variables reference the same object.
Challenge: create a shallow copy of book using { ...book }, then push a new tag to the copy. What happens to the original book.tags? Hint: the copy shares the same array reference.
Quick check
Question: If const a = { x: 1 }; and const b = a;, what does a === b return and why?
Answer: true, because b receives a copy of the reference to the same object, not a new object.
Summary
JavaScript object data types are reference values, including objects, arrays, and functions. Variables hold references, so assignment shares the same underlying object unless you explicitly copy it. Recognizing reference behavior is essential for predicting mutation, equality, and copying.