Objects
## Learning Objectives
- Create and manipulate objects
- Understand property access and descriptors
- Master object methods and prototypes
## Creating Objects
### Object Literal
```javascript
const person = {
name: "Alice",
age: 30,
isAdmin: false,
greet: function() {
return "Hello, I'm " + this.name;
}
};
// Shorthand method syntax
const person2 = {
name: "Bob",
greet() {
return "Hello, I'm " + this.name;
}
};
```
### Object Constructor
```javascript
const person = new Object();
person.name = "Alice";
person.age = 30;
```
### Factory Functions
```javascript
function createPerson(name, age) {
return {
name,
age,
greet() {
return "Hello, I'm " + this.name;
}
};
}
const person = createPerson("Alice", 30);
```
## Accessing Properties
### Dot Notation
```javascript
const person = { name: "Alice", age: 30 };
person.name; // "Alice"
person.age; // 30
person.gender; // undefined
```
### Bracket Notation
```javascript
const person = { name: "Alice", age: 30 };
person["name"]; // "Alice"
person["age"]; // 30
// Dynamic property access
const key = "name";
person[key]; // "Alice"
// Property names with spaces
const obj = { "first name": "Alice" };
obj["first name"]; // "Alice"
```
## Modifying Objects
```javascript
const person = { name: "Alice", age: 30 };
// Add property
person.email = "alice@example.com";
// Modify property
person.age = 31;
// Delete property
delete person.age;
// Check if property exists
"name" in person; // true
person.hasOwnProperty("name"); // true
```
## Object Methods
### Object.keys()
```javascript
const person = { name: "Alice", age: 30 };
Object.keys(person); // ["name", "age"]
```
### Object.values()
```javascript
const person = { name: "Alice", age: 30 };
Object.values(person); // ["Alice", 30]
```
### Object.entries()
```javascript
const person = { name: "Alice", age: 30 };
Object.entries(person); // [["name", "Alice"], ["age", 30]]
// Converting to Map
const map = new Map(Object.entries(person));
```
### Object.assign()
```javascript
const target = { a: 1 };
const source = { b: 2, c: 3 };
Object.assign(target, source); // { a: 1, b: 2, c: 3 }
target; // { a: 1, b: 2, c: 3 }
// Cloning
const clone = Object.assign({}, person);
```
### Object.freeze()
```javascript
const person = { name: "Alice", age: 30 };
Object.freeze(person);
person.age = 31; // Silently ignored in non-strict mode
person.newProp = "x"; // Silently ignored
Object.isFrozen(person); // true
```
### Object.seal()
```javascript
const person = { name: "Alice", age: 30 };
Object.seal(person);
person.age = 31; // Allowed
person.name = "Bob"; // Allowed
person.newProp = "x"; // Silently ignored
Object.isSealed(person); // true
```
## Computed Property Names
```javascript
const field = "email";
const user = {
name: "Alice",
[field]: "alice@example.com",
[`${field}2`]: "alice2@example.com"
};
```
## Destructuring
```javascript
const person = { name: "Alice", age: 30, city: "NYC" };
// Basic
const { name, age } = person;
// Renamed
const { name: userName } = person;
// With defaults
const { name, country = "USA" } = person;
// In function parameters
function greet({ name, age }) {
return `Hello, I'm ${name}, ${age} years old`;
}
greet(person); // "Hello, I'm Alice, 30 years old"
```
## Spread Operator
```javascript
const person = { name: "Alice", age: 30 };
// Copy
const clone = { ...person };
// Merge
const extended = { ...person, email: "alice@example.com" };
// Override
const modified = { ...person, age: 31 };
```
## Object Property Descriptors
```javascript
const person = { name: "Alice" };
// Get descriptor
Object.getOwnPropertyDescriptor(person, "name");
// {
// value: "Alice",
// writable: true,
// enumerable: true,
// configurable: true
// }
// Make property read-only
Object.defineProperty(person, "name", {
writable: false
});
// Make property non-enumerable
Object.defineProperty(person, "age", {
enumerable: false
});
// Make property non-configurable
Object.defineProperty(person, "id", {
value: "123",
configurable: false
});
```
## Getters and Setters
```javascript
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
[this.firstName, this.lastName] = name.split(" ");
}
};
console.log(person.fullName); // "John Doe"
person.fullName = "Jane Smith";
console.log(person.firstName); // "Jane"
```
## Prototype Chain
```javascript
const animal = {
speak() {
return "Sound!";
}
};
const dog = Object.create(animal);
dog.bark = function() {
return "Woof!";
};
dog.speak(); // "Sound!" (from prototype)
dog.bark(); // "Woof!"
"toString" in dog; // true (inherited)
dog.hasOwnProperty("speak"); // false
dog.hasOwnProperty("bark"); // true
```
## Constructor Functions
```javascript
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
return "Hello, I'm " + this.name;
};
const person = new Person("Alice", 30);
person.greet(); // "Hello, I'm Alice"
```
## this Keyword
```javascript
const person = {
name: "Alice",
greet() {
return this.name;
}
};
// In methods, this refers to the object
// In regular functions, this depends on call context
function showThis() {
return this;
}
showThis(); // window (or global in Node)
```
## Summary
- Objects are collections of key-value pairs
- Properties can be accessed via dot or bracket notation
- Use `Object.freeze()` for immutable objects
- Destructuring and spread operator simplify object manipulation
- Prototype chain enables inheritance in JavaScript
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →