Techie BabajiLearn to Code. Build Real Skills.
JavaScript · Data Structures

Objects

An object groups related information about one thing — a user, a product, an order — using named properties.

Beginner 5 min Lesson 13 of 49 Runnable examples
Before you start:Arrays
0/49 in JavaScript
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 27, 2026

Related tutorials

Interview questions

Learning objectives#

  • Create objects with properties
  • Read and change properties with dot and bracket notation
  • List keys with Object.keys
  • Understand that objects are copied by reference

Explanation#

An object is a set of key: value pairs inside curly braces. Values can be anything, including arrays and other objects.

Read with dot notation (user.name) or brackets (user['name']). Brackets are needed when the key is in a variable or has spaces.

You can add properties at any time (user.city = 'Pune') and remove them with delete.

Assigning an object to another variable does NOT copy it — both names point to the same object. Use the spread syntax { ...obj } for a shallow copy.

Code example: A user profile#

JavaScriptA user profile Runnable
const user = { name: 'Asha', age: 22, skills: ['JS', 'CSS'] };
console.log(user.name, user['age']);


user.city = 'Pune';
delete user.age;
console.log(Object.keys(user));


const sameUser = user;      // NOT a copy — same object
sameUser.name = 'Meera';
console.log(user.name);


const clone = { ...user, name: 'Ravi' };   // a real (shallow) copy
console.log(user.name, clone.name);
Expected output
Asha 22
[ 'name', 'skills', 'city' ]
Meera
Meera Ravi
Opens this example in the full playground

Step-by-step explanation#

  1. Dot and bracket notation read the same kind of property.
  2. city is added and age is deleted, so the keys are now name, skills, city.
  3. sameUser points at the same object, so changing it changes user too.
  4. The spread copy is independent: changing clone.name does not affect user.

Real-world use case#

API responses arrive as objects: { id, title, price, category }. Your UI reads their properties to display a product card.

Common mistakes#

Thinking = copies objects

const b = a creates a second name for the same object. Mutating b mutates a.

Reading a missing nested property

user.address.city throws if address is undefined. Use optional chaining: user.address?.city.

Best practices#

  • Use dot notation by default, brackets for dynamic keys
  • Copy with { ...obj } before changing shared data
  • Use structuredClone(obj) for deep copies
  • Keep object shapes consistent

Remember this#

Objects are labelled boxes: key → value.

= shares the same box. { ...obj } makes a new box.

Key in a variable? Use brackets: obj[key].

Practice exercise#

Your task: Create a product object with name, price and inStock. Increase the price by 10%, then print all keys and the new price.

Show solution
JavaScript Runnable
const product = { name: 'Pen', price: 20, inStock: true };
product.price = product.price * 1.1;
console.log(Object.keys(product), product.price.toFixed(2)); // [ 'name', 'price', 'inStock' ] 22.00
Opens this example in the full playground

Mini quiz#

Objects quizPredict the output Question 1 of 1

What is printed?

const a = { n: 1 };
const b = a;
b.n = 2;
console.log(a.n);
Score so far: 0/0

Want more? Practise all JavaScript MCQs · JavaScript interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.