Objects are the foundation of JavaScript. Everything in JS is an object. Every API response is an object. Every React component uses objects. Master objects and you master the language itself.
Day 15 / 180
Beginner Phase
🕐14 min read
💻7 code examples
🎯3 practice tasks
Every time you sign up for a website — your data is stored as an object:
That is an object. Every user in every app you build will look exactly like this. Every API response you receive will be an object. Objects are not just a JavaScript concept — they are the universal language of data on the web. JSON stands for JavaScript Object Notation — the entire web uses this format. Master objects today and everything else becomes easier.
1. What is an Object?
An object is a collection of key-value pairs. The key is always a string (or symbol) and the value can be anything — a number, string, array, function, or even another object. Think of it like a labeled storage box — each label is a key and the content inside is the value:
JavaScript — Object Structure
// Object literal — most common way to createconst developer = {
// key : value
name : "Waheed", // string
age : 22, // number
isHired : false, // boolean
skills : ["JS", "React"], // array
address : { // nested object
city : "Faisalabad",
country : "Pakistan"
},
greet : function() { // method (function)return`Hi I am ${this.name}`;
}
};
console.log(developer.name); // "Waheed"
console.log(developer.address.city); // "Faisalabad"
console.log(developer.greet()); // "Hi I am Waheed"
2. Access Object Properties
There are two ways to access object properties — dot notation and bracket notation. Each has its use case:
JavaScript — Accessing Properties
const user = {
name : "Waheed",
age : 22,
city : "Faisalabad",
"full-name": "Muhammad Waheed"// key with hyphen
};
// Dot notation — most common
console.log(user.name); // "Waheed"
console.log(user.age); // 22// Bracket notation — for dynamic keys
console.log(user["name"]); // "Waheed"
console.log(user["full-name"]); // "Muhammad Waheed"// Dynamic key — variable as keyconst key = "city";
console.log(user[key]); // "Faisalabad"// Access nested objectconst profile = {
user: {
address: {
city: "Faisalabad"
}
}
};
console.log(profile.user.address.city); // "Faisalabad"
console.log(profile?.user?.address?.city); // safe with ?.// Non-existent property — undefined not error
console.log(user.salary); // undefined
3. Add, Update & Delete Properties
Objects are mutable by default — you can add, update, and delete properties at any time. Understanding this is critical for working with real application data:
When a function lives inside an object it is called a method. Methods use this to refer to the object they belong to. This is how objects encapsulate both data and behavior:
Object destructuring lets you extract multiple properties into variables in one line. This is used everywhere in modern JavaScript — especially in React for props and API responses:
Copying and merging objects is a daily task in real applications. The spread operator is the modern, clean way to do it — and it is used constantly in React state management:
In React you should never directly mutate state objects. Always use spread to create a new object with the updated value — setState({ ...oldState, newProp: newValue }). This is one of the most used patterns in all of React development.
Pro Tip #2 — Later properties override earlier ones
When spreading two objects with the same key — the later one wins. { ...defaults, ...userPrefs } means userPrefs values override defaults. This is how settings systems and configuration merging works in every application.
Pro Tip #3 — Spread is shallow copy only
Spread only copies one level deep. If your object has nested objects — those nested references are still shared. For deep cloning use JSON.parse(JSON.stringify(obj)) or a library like lodash. This is a very common source of bugs in React applications.
7. Built-in Object Methods — Essential Tools
JavaScript provides powerful built-in methods on the Object class for working with object data. These are used constantly in real applications for iterating over data from APIs:
Edit the code and click Run Code. Try destructuring, spreading and using Object methods!
✏️ Try it Yourself — Objects
OUTPUT
// Click Run Code to see output
💡 Edit the code and click Run!
9. Practice Tasks
Task 1 — Easy: Your Developer Profile
Create a profile object with your name, age, city, skills array, and a introduce() method that returns a full introduction sentence. Use this inside the method. Call the method and log the result. Then use Object.keys() to list all your profile properties.
Task 2 — Medium: Settings Manager
Create a defaultSettings object with theme, language, fontSize, and notifications. Create a userSettings object that only overrides theme and language. Use spread to merge them into finalSettings. Then write a function updateSetting(settings, key, value) that returns a new object with the updated value — without mutating the original.
Task 3 — Hard: Mini User Database
Create an array of 5 user objects. Write these functions using Object methods and array methods together: getUserNames() — returns array of all names. findByCity(city) — returns all users from that city. getSalarySummary() — returns object with total, average, highest, lowest salary. Use Object.entries() to display the summary nicely.
.jpg.png)
