1: Object Literals (01-object-literals.js)
Concept:
- Objects are collections of key-value pairs.
- Keys = property names, Values = data.
Example:
const person = { name: "Usama", age: 25, job: "Developer" }; console.log(person.name); // Usama Takeaway:
Objects group related data into one structure.
2: Accessing Properties (02-Accessing-properties.js)
Concept: Dot vs Bracket notation.
Example:
const car = { brand: "Toyota", model: "Corolla" }; console.log(car.brand); // Dot notation console.log(car["model"]); // Bracket notation Takeaway:
Use dot when you know the property name. Use bracket when it’s dynamic.
3: Adding, Updating, Removing (03-Adding-updating-removing.js)
Concept: Objects are mutable, properties can be changed.
Example:
const user = { name: "Ali" }; user.age = 20; // Add user.name = "Ahmed"; // Update delete user.age; // Remove Takeaway:
Objects are flexible, but uncontrolled mutation can cause bugs.
4: Nested Objects (04-Nested-objects.js)
Concept: Objects inside objects.
Example:
const student = { name: "Sara", address: { city: "Lahore", zip: 54000 } }; console.log(student.address.city); // Lahore Takeaway:
Access deeply nested properties carefully.
5: this Keyword (05-This-keyword.js)
Concept: Inside object methods, this refers to the object.
Example:
const person = { name: "Ali", greet() { console.log(`Hello, I am ${this.name}`); } }; person.greet(); // Hello, I am Ali Takeaway:
this depends on how a function is called.
6: Object Methods (06-Object-mathods.js)
Concept: Functions inside objects = methods.
Example:
const calculator = { add(a, b) { return a + b; }, sub(a, b) { return a - b; } }; console.log(calculator.add(2, 3)); // 5 Takeaway:
Methods are actions objects can perform.
7: Shorthand Property (07-Shorthand-property.js)
Concept: If key and variable name are the same.
Example:
let name = "Ali"; let age = 22; const user = { name, age }; console.log(user); // { name: "Ali", age: 22 } Takeaway:
Shorthand keeps objects clean.
8: Computed Property (08-Computed-property.js)
Concept: Use [] for dynamic property names.
Example:
let key = "role"; const user = { name: "Ali", [key]: "Admin" }; console.log(user.role); // Admin Takeaway:
Great for dynamic keys.
9: Object Destructuring (09-Object-destructuring.js)
Concept: Extract values easily.
Example:
const person = { name: "Sara", age: 20 }; const { name, age } = person; console.log(name, age); // Sara 20 Takeaway:
Destructuring = shorter & cleaner code.
10: Spread & Rest (10-Object-SpreadAnsRest.js)
Concept: Copy/merge objects, rest collects remaining.
Example:
const obj1 = { a: 1, b: 2 }; const obj2 = { ...obj1, c: 3 }; console.log(obj2); // { a:1, b:2, c:3 } const { a, ...rest } = obj2; console.log(rest); // { b:2, c:3 } 11: Object.keys, Object.values, Object.entries
Concept: Useful object utilities.
Example:
const user = { name: "Ali", age: 21 }; console.log(Object.keys(user)); // ["name", "age"] console.log(Object.values(user)); // ["Ali", 21] console.log(Object.entries(user));// [["name","Ali"],["age",21]] 12: Object.assign
Concept: Merge objects or clone.
Example:
const target = { a: 1 }; const source = { b: 2 }; Object.assign(target, source); console.log(target); // { a:1, b:2 } 13: Object Freezing & Sealing
Concept: Control object mutability.
Example:
const obj = { name: "Ali" }; Object.freeze(obj); // No add/remove/update 14: Prototypes
Concept: Shared properties & methods.
Example:
function Animal(name) { this.name = name; } Animal.prototype.speak = function() { console.log(`${this.name} makes a sound`); }; const dog = new Animal("Dog"); dog.speak(); // Dog makes a sound 15: Inheritance
Concept: One object inherits another.
Example:
function Vehicle(brand) { this.brand = brand; } Vehicle.prototype.info = function() { console.log(`Brand: ${this.brand}`); }; function Car(brand, model) { Vehicle.call(this, brand); this.model = model; } Car.prototype = Object.create(Vehicle.prototype); Car.prototype.constructor = Car; const car = new Car("Toyota", "Corolla"); car.info(); // Brand: Toyota 💡 You can find the complete code examples for this post in my GitHub repo:
👉 javaScript-a-to-z-concept
Top comments (0)