Objects in JavaScript Explained for Beginners (With Examples & Methods Guide)”
Objects in JavaScript:
Easy Explanation
Learn everything about JavaScript objects — create, access properties, methods, nested objects, destructuring, this keyword, JSON, and object vs array — from A to Z with real examples.
What is an Object in JavaScript? — The Complete Explanation
An object in JavaScript is a collection of related data and functionality stored together as key-value pairs. It is one of the most fundamental and powerful data types in JavaScript — in fact, almost everything in JavaScript is an object at its core.
Think of an object like a real-world thing. A person has a name, an age, a job title, and can perform actions like speaking or walking. In JavaScript, you can represent that person as an object with properties (name, age, job) and methods (speak, walk). This is why objects are so useful — they let you model real-world things in your code.
While an array stores an ordered list of items accessed by index numbers (0, 1, 2...), an object stores data accessed by meaningful names called keys. This makes objects perfect for describing things with multiple characteristics. Mastering objects is essential — they appear in every JavaScript application, every API response, every database record, and every framework.
How to Create an Object in JavaScript
There are several ways to create objects in JavaScript. The most common and recommended way is the object literal syntax — simply wrap your key-value pairs in curly braces { }. Each key-value pair is called a property.
// Method 1 — Object Literal (most common, recommended) const student = { name: "Sara", age: 21, country: "Pakistan", isPass: true, score: 88 }; // Method 2 — new Object() constructor (less common) const car = new Object(); car.brand = "Toyota"; car.model = "Corolla"; car.year = 2024; // Method 3 — Object.create() for prototype-based objects const animal = Object.create(null); animal.type = "Dog"; animal.sound = "Woof"; console.log(student); console.log(car); console.log(typeof student); // "object"
{ name: "Sara", age: 21, country: "Pakistan", isPass: true, score: 88 }
{ brand: "Toyota", model: "Corolla", year: 2024 }
"object"Properties, Methods & Accessing Values
An object has two types of members: properties (data — like name, age, color) and methods (functions — like greet, calculate, save). There are two ways to access them: dot notation (obj.key) and bracket notation (obj["key"]).
Dot notation is cleaner and most commonly used. Bracket notation is useful when the key name is stored in a variable, contains spaces, or is computed dynamically.
const person = { firstName: "Ahmed", lastName: "Khan", age: 25, job: "Developer", // Method — a function inside an object getFullName: function() { return this.firstName + " " + this.lastName; }, introduce: function() { return `Hi! I'm ${this.firstName}, a ${this.job} aged ${this.age}. 👋`; } }; // DOT notation — clean and simple console.log(person.firstName); // Ahmed console.log(person.age); // 25 console.log(person.getFullName()); // Ahmed Khan console.log(person.introduce()); // Hi! I'm Ahmed, a Developer aged 25. 👋 // BRACKET notation — useful with dynamic keys console.log(person["lastName"]); // Khan let key = "job"; console.log(person[key]); // Developer — dynamic key! // Add new property dynamically person.email = "ahmed@example.com"; console.log(person.email); // ahmed@example.com // Update existing property person.age = 26; console.log(person.age); // 26 // Delete a property delete person.email; console.log(person.email); // undefined // Check if property exists console.log("age" in person); // true console.log("salary" in person); // false
Ahmed 25
Ahmed Khan
Hi! I'm Ahmed, a Developer aged 25. 👋
Khan Developer
ahmed@example.com 26 undefined
true falseNested Objects — Objects Inside Objects
A nested object is when an object contains another object as the value of one of its properties. This is extremely common in real-world data — for example, a user object that contains an address object, which itself contains city and country. You can nest objects as many levels deep as needed.
const user = { name: "Sara", age: 22, // Nested object — address inside user address: { street: "Main Bazaar", city: "Lahore", country: "Pakistan", zip: "54000" }, // Nested object — education inside user education: { degree: "BS Computer Science", university: "FAST NUCES", year: 2025, // Nested array inside nested object! subjects: ["JavaScript", "Python", "Data Structures"] } }; // Accessing nested properties — chain dot notation console.log(user.address.city); // Lahore console.log(user.education.degree); // BS Computer Science console.log(user.education.subjects[0]); // JavaScript // Update nested property user.address.city = "Karachi"; console.log(user.address.city); // Karachi // Optional chaining — safe access for possibly undefined console.log(user?.phone?.number); // undefined (no error) console.log(user?.address?.zip); // "54000"
Lahore
BS Computer Science
JavaScript
Karachi
undefined
"54000"?. operator lets you safely access nested properties that might not exist. Instead of getting a TypeError, it returns undefined. This prevents crashes when dealing with API data that might be missing fields.Object Destructuring — Extract Properties Cleanly
Object destructuring (ES6) lets you extract multiple properties from an object into separate variables in a single, clean line of code. Instead of writing const name = user.name and const age = user.age separately, you do it all at once. This is used constantly in modern JavaScript and React development.
const product = { id: 101, name: "Laptop", price: 75000, brand: "Dell", inStock: true, category: "Electronics" }; // Basic destructuring — extract multiple properties at once const { name, price, brand } = product; console.log(name); // Laptop console.log(price); // 75000 console.log(brand); // Dell // Rename while destructuring const { name: productName, price: productPrice } = product; console.log(productName); // Laptop console.log(productPrice); // 75000 // Default value if property doesn't exist const { discount = 0, inStock } = product; console.log(discount); // 0 (default — product has no discount) console.log(inStock); // true // Nested destructuring const employee = { name: "Ali", address: { city: "Islamabad", country: "Pakistan" } }; const { name: empName, address: { city } } = employee; console.log(empName); // Ali console.log(city); // Islamabad // Destructuring in function parameters function showProduct({ name, price, brand }) { console.log(`${brand} ${name} costs Rs.${price}`); } showProduct(product); // Dell Laptop costs Rs.75000
Laptop 75000 Dell
Laptop 75000
0 true
Ali Islamabad
Dell Laptop costs Rs.75000The this Keyword Inside Objects
Inside a JavaScript object method, the this keyword refers to the object that owns the method. It allows methods to access and use other properties of the same object without repeating the object name. Understanding this is critical — it is one of the most important and most misunderstood concepts in JavaScript.
const bankAccount = { owner: "Sara Ahmed", balance: 50000, currency: "PKR", deposit: function(amount) { this.balance += amount; // 'this' refers to bankAccount console.log(`Deposited ${amount}. New balance: ${this.balance}`); }, withdraw: function(amount) { if (amount > this.balance) { console.log("❌ Insufficient funds!"); return; } this.balance -= amount; console.log(`Withdrawn ${amount}. Remaining: ${this.balance}`); }, getInfo: function() { return `${this.owner}: ${this.currency} ${this.balance}`; } }; bankAccount.deposit(10000); // Deposited 10000. New balance: 60000 bankAccount.withdraw(5000); // Withdrawn 5000. Remaining: 55000 bankAccount.withdraw(100000); // ❌ Insufficient funds! console.log(bankAccount.getInfo()); // Sara Ahmed: PKR 55000
Deposited 10000. New balance: 60000
Withdrawn 5000. Remaining: 55000
❌ Insufficient funds!
Sara Ahmed: PKR 55000JSON Basics — JavaScript Object Notation
JSON (JavaScript Object Notation) is a lightweight text format for storing and transporting data. It looks almost identical to a JavaScript object but with a few key differences: all keys must be in double quotes, no functions allowed, and no undefined values. JSON is the universal data format used by virtually every web API, database, and server in the world.
// JavaScript Object → JSON string (stringify) const user = { name: "Sara", age: 22, skills: ["JavaScript", "React"], active: true }; const jsonString = JSON.stringify(user); console.log(jsonString); // {"name":"Sara","age":22,"skills":["JavaScript","React"],"active":true} console.log(typeof jsonString); // "string" // Pretty print JSON with indentation console.log(JSON.stringify(user, null, 2)); // JSON string → JavaScript Object (parse) const apiResponse = '{"id":1,"product":"Laptop","price":75000}'; const obj = JSON.parse(apiResponse); console.log(obj.product); // Laptop console.log(obj.price); // 75000 console.log(typeof obj); // "object"
{"name":"Sara","age":22,"skills":["JavaScript","React"],"active":true}
"string"
{ id: 1, product: "Laptop", price: 75000 }
Laptop 75000 "object"JSON.parse() to convert it into a JavaScript object you can work with. When saving data, you use JSON.stringify() to convert it back to a string for storage or transmission.Object vs Array — When to Use Which?
Both objects and arrays store multiple values, but they serve different purposes. Choosing the right one makes your code cleaner and more logical:
| Feature | Object { } | Array [ ] |
|---|---|---|
| Access by | Named key (person.name) | Index number (arr[0]) |
| Order | Not guaranteed | Ordered list |
| Best for | Describing one thing with properties | List of similar items |
| Real example | A single user profile | A list of users |
| Iteration | for...in, Object.keys() | for, forEach, map |
| typeof | "object" | "object" |
✅ Use shorthand properties —
{ name, age } instead of { name: name, age: age }✅ Use optional chaining (?.) — safely access nested properties
✅ Use Object.keys(obj) — get all keys as array for iteration
✅ Use Object.values(obj) — get all values as array
✅ Use Object.entries(obj) — get [key, value] pairs for easy looping
✅ Use spread to copy —
const copy = {...original} creates a shallow copy
✅ Complete Summary — Objects in JavaScript
🔵 Access: Dot notation (obj.key) or bracket notation (obj["key"]) — both work
🟢 Methods: Functions inside objects — use normal functions (not arrow) to use this
🟡 Nested: Objects inside objects — access with obj.address.city — use ?. for safety
🟣 Destructuring: const { name, age } = obj — extract multiple properties in one line
🟠 this keyword: Inside object methods, this refers to the object itself
🩷 JSON: stringify() → object to string · parse() → string to object
⭐ vs Array: Object = describe one thing. Array = list of similar things.
Objects are everywhere in JavaScript. Every API response you receive is an object. Every React component's props is an object. Every DOM element is an object. The better you understand objects — especially this, destructuring, and nested access — the faster you will advance in JavaScript. Practice creating objects that represent real things: a student, a product, a bank account. Then add methods and practice using this inside them!
Comments
Post a Comment