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)