Hi coders! Got questions about objects in JS? If so, You’re in the right place! In Javascript, You can think of objects as digital organizers that store data and actions, making your code super flexible and easily manageable. Objects are used in a lot of scenarios. Whether you’re building user profiles, shopping carts, or your dream car’s specs, objects are your go-to tool to organize related data and functionality. This article answers the most common questions about JavaScript objects, packed with examples and challenges to help you learn hands-on. Let’s dive in! What Are JavaScript Objects in Simple Terms? Objects in JavaScript are variables that can hold related data (called properties) and actions (called methods) together. This definition may sound similar to Array’s as arrays are also a special kind of Objects. In case of Objects, think of a user profile on a website: it might store a name, age, and a method to provide profile summary. Objects are key to organizing data in real-world apps, like e-commerce products or game characters. properties methods Here’s a simple example or an object: const car = {
  brand: "Tesla",
  model: "Model S",
  showDetails: function() {
    console.log(`This car is a ${this.brand} ${this.model}.`);
  }
};

console.log(car.model);       // Output: Model S
car.showDetails();            // Output: This car is a Tesla Model S. const car = {
  brand: "Tesla",
  model: "Model S",
  showDetails: function() {
    console.log(`This car is a ${this.brand} ${this.model}.`);
  }
};

console.log(car.model);       // Output: Model S
car.showDetails();            // Output: This car is a Tesla Model S. Why care? Objects make your code intuitive and reusable. You can update a property or call a method without juggling loose variables. Why care? Try it yourself: Create an object for your favorite movie with title and year properties. Log them to the console. What do you see? Feel free to share in the comments. Try it yourself title year How Do You Create an Object in JavaScript? You can create objects in three main ways: object literal ({}), new Object(), and Object.create(). The object literal is the most popular because it’s concise and readable. object literal {} new Object() Object.create() Object Literal ({}) {} Use curly braces to define key-value pairs: const car = {
  make: "Toyota",
  model: "Camry",
  year: 2023
};

console.log(car.make); // Output: Toyota const car = {
  make: "Toyota",
  model: "Camry",
  year: 2023
};

console.log(car.make); // Output: Toyota new Object() new Object() It’s a bit slower however it’s more intuitive for developers coming from other object-oriented languages like Java, C#, or C++: const car = new Object();
car.make = "Honda";
car.model = "Civic";

console.log(car.model); // Output: Civic const car = new Object();
car.make = "Honda";
car.model = "Civic";

console.log(car.model); // Output: Civic Object.create() Object.create() Great for inheritance: const carPrototype = { honk: () => console.log("Honk!") };
const myCar = Object.create(carPrototype);
myCar.make = "Tesla";

myCar.honk(); // Output: Honk! const carPrototype = { honk: () => console.log("Honk!") };
const myCar = Object.create(carPrototype);
myCar.make = "Tesla";

myCar.honk(); // Output: Honk! Pro tip: Stick with {} for simplicity unless you need specific features of the other methods. Pro tip {} Try it yourself: Create a pet object using the literal syntax with name and species. Can you add a method to make it “speak”? Try it yourself pet name species What’s the Difference Between Dot and Bracket Notation in JavaScript Objects? You can access or modify object properties using dot notation (.) or bracket notation ([]). Here’s how they work: dot notation . bracket notation [] const user = {
  name: "Alex",
  "favorite color": "blue"
};

// Dot notation
console.log(user.name); // Output: Alex
user.age = 25; // Add a property

// Bracket notation
console.log(user["favorite color"]); // Output: blue
user["age"] = 25; // Add a property const user = {
  name: "Alex",
  "favorite color": "blue"
};

// Dot notation
console.log(user.name); // Output: Alex
user.age = 25; // Add a property

// Bracket notation
console.log(user["favorite color"]); // Output: blue
user["age"] = 25; // Add a property When to use each? When to use each? Dot notation: Clean and simple for known property names (e.g., user.name).
Bracket notation: Perfect for dynamic names or keys with spaces (e.g., user["favorite color"]). Dot notation: Clean and simple for known property names (e.g., user.name). Dot notation user.name Bracket notation: Perfect for dynamic names or keys with spaces (e.g., user["favorite color"]). Bracket notation user["favorite color"] Try it yourself: Create an object with a property name containing a space (like “job title”). Access it using bracket notation. What happens if you try dot notation? Try it yourself Can You Change Properties of a const Object in JavaScript? const This question is answered wrongly in many interviews. The answer is Yes, you can change an object’s properties even if it’s declared with const! The const keyword only prevents reassigning the variable itself, not modifying its contents. Yes const const const book = {
  title: "Dune"
};

book.title = "Dune: Part Two"; // Works
console.log(book.title); // Output: Dune: Part Two

book = { title: "New Book" }; // Error: Assignment to constant variable const book = {
  title: "Dune"
};

book.title = "Dune: Part Two"; // Works
console.log(book.title); // Output: Dune: Part Two

book = { title: "New Book" }; // Error: Assignment to constant variable Gotcha: To make an object truly immutable, use Object.freeze(): Gotcha Object.freeze() Object.freeze(book);
book.title = "Something Else"; // Fails silently
console.log(book.title); // Output: Dune: Part Two Object.freeze(book);
book.title = "Something Else"; // Fails silently
console.log(book.title); // Output: Dune: Part Two Try it yourself: Declare a const object, change a property, and try reassigning the object. What error do you get? Try it yourself const What Are Prototypes in JavaScript Objects? Prototypes let objects inherit properties and methods from other objects via the prototype chain. Every object has a prototype, acting like a fallback blueprint. Here’s an example: prototype chain const animal = {
  makeSound: function() {
    console.log("Some sound");
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log("Woof!");
};

dog.makeSound(); // Output: Some sound (from prototype)
dog.bark(); // Output: Woof! const animal = {
  makeSound: function() {
    console.log("Some sound");
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log("Woof!");
};

dog.makeSound(); // Output: Some sound (from prototype)
dog.bark(); // Output: Woof! Why use prototypes? They enable code reuse, like having all animals share a makeSound method. Why use prototypes? makeSound Try it yourself: Create a cat object that inherits from animal and add a meow method. Can you call makeSound? Try it yourself cat animal meow makeSound How Do You Use Object Destructuring in JavaScript? Destructuring lets you extract specific properties from an object into variables, making your code shorter and cleaner. Here’s how: Destructuring Destructuring const user = {
  name: "Sam",
  age: 30,
  city: "New York"
};

const { name, city } = user;
console.log(name); // Output: Sam
console.log(city); // Output: New York const user = {
  name: "Sam",
  age: 30,
  city: "New York"
};

const { name, city } = user;
console.log(name); // Output: Sam
console.log(city); // Output: New York What if a property doesn’t exist? You can set defaults: What if a property doesn’t exist? const { email = "user@yourdomain.com" } = user;
console.log(email); // Output: user@yourdomain.com const { email = "user@yourdomain.com" } = user;
console.log(email); // Output: user@yourdomain.com Try it yourself: Destructure two properties from an object. What happens if you “destructure” a non-existent property without a default? Try it yourself What Are the Spread and Rest Operators for JavaScript Objects? The spread operator (...) copies or merges objects, while the rest operator collects remaining properties. spread operator ... rest operator const user = {
  name: "Sam",
  age: 30,
  city: "New York"
};

// Spread: Copy or merge
const updatedUser = { ...user, email: "sam@example.com" };
console.log(updatedUser); // Output: { name: "Sam", age: 30, city: "New York", email: "sam@example.com" }

// Rest: Grab remaining properties
const { age, ...rest } = user;
console.log(rest); // Output: { name: "Sam", city: "New York" } const user = {
  name: "Sam",
  age: 30,
  city: "New York"
};

// Spread: Copy or merge
const updatedUser = { ...user, email: "sam@example.com" };
console.log(updatedUser); // Output: { name: "Sam", age: 30, city: "New York", email: "sam@example.com" }

// Rest: Grab remaining properties
const { age, ...rest } = user;
console.log(rest); // Output: { name: "Sam", city: "New York" } Why use them? Spread avoids mutating originals, and rest simplifies property collection. Why use them? Try it yourself: Use the spread operator to merge two objects. Then use rest to exclude one property. Log the results! Try it yourself What Are Common Built-in Methods for JavaScript Objects? JavaScript offers useful methods like Object.keys(), Object.values(), and Object.assign(): Object.keys() Object.values() Object.assign() const product = {
  name: "Laptop",
  price: 999,
  brand: "TechCo"
};

// Get keys
console.log(Object.keys(product)); // Output: ["name", "price", "brand"]

// Get values
console.log(Object.values(product)); // Output: ["Laptop", 999, "TechCo"]

// GET entries (Key, value)
console.log(Object.entries(product)); // Output: [["name", "Laptop"], ["price", 999], ["brand", "TechCo"]]

// Merge objects
const details = { stock: 10 };
const fullProduct = Object.assign({}, product, details);
console.log(fullProduct); // Output: { name: "Laptop", price: 999, brand: "TechCo", stock: 10 } const product = {
  name: "Laptop",
  price: 999,
  brand: "TechCo"
};

// Get keys
console.log(Object.keys(product)); // Output: ["name", "price", "brand"]

// Get values
console.log(Object.values(product)); // Output: ["Laptop", 999, "TechCo"]

// GET entries (Key, value)
console.log(Object.entries(product)); // Output: [["name", "Laptop"], ["price", 999], ["brand", "TechCo"]]

// Merge objects
const details = { stock: 10 };
const fullProduct = Object.assign({}, product, details);
console.log(fullProduct); // Output: { name: "Laptop", price: 999, brand: "TechCo", stock: 10 } Try it yourself: Use Object.keys() to loop through an object’s properties. Can you merge two objects with Object.assign()? Try it yourself Object.keys() Object.assign() How Can You Loop Through an Object’s Properties in JavaScript? You can loop through properties using Object.keys(), Object.values(), or Object.entries(): Object.keys() Object.values() Object.entries() const obj = { a: 1, b: 2, c: 3 };

for (const key of Object.keys(obj)) {
  console.log(`Key: ${key}, Value: ${obj[key]}`);
}
// Output:
// Key: a, Value: 1
// Key: b, Value: 2
// Key: c, Value: 3

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// Output:
// a: 1
// b: 2
// c: 3 const obj = { a: 1, b: 2, c: 3 };

for (const key of Object.keys(obj)) {
  console.log(`Key: ${key}, Value: ${obj[key]}`);
}
// Output:
// Key: a, Value: 1
// Key: b, Value: 2
// Key: c, Value: 3

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// Output:
// a: 1
// b: 2
// c: 3 Try it yourself: Loop through an object using Object.entries(). Can you print only the values? Try it yourself Object.entries() What Are Common Mistakes When Working with JavaScript Objects? Here are pitfalls to avoid: Misunderstanding const:


Mistake: Thinking const locks an object’s properties.


Fix: Use Object.freeze() for immutability.


Example:
const obj = { key: "value" };
obj.key = "new"; // Works
Object.freeze(obj);
obj.key = "another"; // Fails silently




Mutating Objects Unintentionally:


Mistake: Changing an object when you meant to copy it.


Fix: Use spread or Object.assign():
const original = { name: "Book" };
const badCopy = original;
badCopy.name = "Pen"; // Mutates original!
console.log(original.name); // Output: Pen

const goodCopy = { ...original };
goodCopy.name = "Tablet"; // Original safe




Misusing this in Methods:


Mistake: Losing this context in callbacks.


Fix: Use regular functions or bind:
const user = {
  name: "Chris",
  greet: function() {
    console.log(`Hi, I’m ${this.name}`);
  }
};
const greet = user.greet;
greet(); // Output: Hi, I’m undefined
user.greet.bind(user)(); // Output: Hi, I’m Chris Misunderstanding const:


Mistake: Thinking const locks an object’s properties.


Fix: Use Object.freeze() for immutability.


Example:
const obj = { key: "value" };
obj.key = "new"; // Works
Object.freeze(obj);
obj.key = "another"; // Fails silently Misunderstanding const Mistake: Thinking const locks an object’s properties.


Fix: Use Object.freeze() for immutability.


Example:
const obj = { key: "value" };
obj.key = "new"; // Works
Object.freeze(obj);
obj.key = "another"; // Fails silently Mistake: Thinking const locks an object’s properties. Mistake: Thinking const locks an object’s properties. Mistake const Fix: Use Object.freeze() for immutability. Fix: Use Object.freeze() for immutability. Fix Object.freeze() immutability Example:
const obj = { key: "value" };
obj.key = "new"; // Works
Object.freeze(obj);
obj.key = "another"; // Fails silently Example: Example const obj = { key: "value" };
obj.key = "new"; // Works
Object.freeze(obj);
obj.key = "another"; // Fails silently const obj = { key: "value" };
obj.key = "new"; // Works
Object.freeze(obj);
obj.key = "another"; // Fails silently Mutating Objects Unintentionally:


Mistake: Changing an object when you meant to copy it.


Fix: Use spread or Object.assign():
const original = { name: "Book" };
const badCopy = original;
badCopy.name = "Pen"; // Mutates original!
console.log(original.name); // Output: Pen

const goodCopy = { ...original };
goodCopy.name = "Tablet"; // Original safe Mutating Objects Unintentionally Mistake: Changing an object when you meant to copy it.


Fix: Use spread or Object.assign():
const original = { name: "Book" };
const badCopy = original;
badCopy.name = "Pen"; // Mutates original!
console.log(original.name); // Output: Pen

const goodCopy = { ...original };
goodCopy.name = "Tablet"; // Original safe Mistake: Changing an object when you meant to copy it. Mistake: Changing an object when you meant to copy it. Mistake Fix: Use spread or Object.assign():
const original = { name: "Book" };
const badCopy = original;
badCopy.name = "Pen"; // Mutates original!
console.log(original.name); // Output: Pen

const goodCopy = { ...original };
goodCopy.name = "Tablet"; // Original safe Fix: Use spread or Object.assign(): Fix Object.assign() const original = { name: "Book" };
const badCopy = original;
badCopy.name = "Pen"; // Mutates original!
console.log(original.name); // Output: Pen

const goodCopy = { ...original };
goodCopy.name = "Tablet"; // Original safe const original = { name: "Book" };
const badCopy = original;
badCopy.name = "Pen"; // Mutates original!
console.log(original.name); // Output: Pen

const goodCopy = { ...original };
goodCopy.name = "Tablet"; // Original safe Misusing this in Methods:


Mistake: Losing this context in callbacks.


Fix: Use regular functions or bind:
const user = {
  name: "Chris",
  greet: function() {
    console.log(`Hi, I’m ${this.name}`);
  }
};
const greet = user.greet;
greet(); // Output: Hi, I’m undefined
user.greet.bind(user)(); // Output: Hi, I’m Chris Misusing this Mistake: Losing this context in callbacks.


Fix: Use regular functions or bind:
const user = {
  name: "Chris",
  greet: function() {
    console.log(`Hi, I’m ${this.name}`);
  }
};
const greet = user.greet;
greet(); // Output: Hi, I’m undefined
user.greet.bind(user)(); // Output: Hi, I’m Chris Mistake: Losing this context in callbacks. Mistake: Losing this context in callbacks. Mistake this Fix: Use regular functions or bind:
const user = {
  name: "Chris",
  greet: function() {
    console.log(`Hi, I’m ${this.name}`);
  }
};
const greet = user.greet;
greet(); // Output: Hi, I’m undefined
user.greet.bind(user)(); // Output: Hi, I’m Chris Fix: Use regular functions or bind: Fix bind const user = {
  name: "Chris",
  greet: function() {
    console.log(`Hi, I’m ${this.name}`);
  }
};
const greet = user.greet;
greet(); // Output: Hi, I’m undefined
user.greet.bind(user)(); // Output: Hi, I’m Chris const user = {
  name: "Chris",
  greet: function() {
    console.log(`Hi, I’m ${this.name}`);
  }
};
const greet = user.greet;
greet(); // Output: Hi, I’m undefined
user.greet.bind(user)(); // Output: Hi, I’m Chris Try it yourself: Create an object, freeze it, and try changing a property. What happens? Try it yourself Real-World Example: Building a Shopping Cart with Objects Let’s tie it all together with a shopping cart example: const cart = {
  items: [],
  total: 0,
  addItem: function(name, price) {
    this.items.push({ name, price });
    this.total += price;
  },
  displayCart: function() {
    const { items, total } = this; // Destructuring
    console.log(`Items: ${items.map(item => item.name).join(", ")}`);
    console.log(`Total: $${total}`);
  }
};

cart.addItem("Headphones", 50);
cart.addItem("Mouse", 20);
cart.displayCart(); // Output: Items: Headphones, Mouse
// Total: $70 const cart = {
  items: [],
  total: 0,
  addItem: function(name, price) {
    this.items.push({ name, price });
    this.total += price;
  },
  displayCart: function() {
    const { items, total } = this; // Destructuring
    console.log(`Items: ${items.map(item => item.name).join(", ")}`);
    console.log(`Total: $${total}`);
  }
};

cart.addItem("Headphones", 50);
cart.addItem("Mouse", 20);
cart.displayCart(); // Output: Items: Headphones, Mouse
// Total: $70 Try it yourself: Add a removeItem method to subtract the price and remove an item by name. Test it out! Try it yourself removeItem Conclusion: Master JavaScript Objects with Confidence You’ve just tackled the most common questions about JavaScript objects! From creating objects with {} to looping with Object.entries(), you’re ready to use objects in real projects like user profiles or e-commerce apps. Key takeaways: {} Object.entries() Use {} for quick object creation.
const protects the variable, not the object’s properties.
Prototypes enable inheritance.
Destructuring and spread/rest operators simplify code.
Avoid pitfalls like unintended mutations or this issues. Use {} for quick object creation. {} const protects the variable, not the object’s properties. const Prototypes enable inheritance. Destructuring and spread/rest operators simplify code. Avoid pitfalls like unintended mutations or this issues. this Now, go build something awesome! Create a to-do list, a game character, or a product catalog using objects. Play with the code, break it, and fix it. What will you create today? Please share your views/questions in the comments section below.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

10 Must-Know JavaScript Object Secrets Every developer Needs!

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Achieving Excellence With Less Stress: A Simple Guide to Success

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Achieving Excellence With Less Stress: A Simple Guide to Success

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps