Mastering Objects in JavaScript

Objects in JavaScript

In JavaScript, objects are collections of key-value pairs where values can be data (properties) or functions (methods). Objects are fundamental to JavaScript, as nearly everything in JavaScript is an object, including arrays, functions, and even other objects.

---

1. Creating Objects

A. Object Literal

The simplest way to create an object is using curly braces {}.

Example:

const person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello!");
  },
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!

B. Object Constructor

Using the Object constructor creates an empty object.

Example:

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!

C. Using Object.create()

This method creates a new object with the specified prototype.

Example:

const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!

---

2. Accessing Object Properties

A. Dot Notation

Access properties using a dot (.).

Example:

console.log(person.name); // Output: Alice

B. Bracket Notation

Access properties using square brackets ([]). Useful for dynamic property names.

Example:

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25

---

3. Adding, Modifying, and Deleting Properties

• Adding:

person.country = "USA";
console.log(person.country); // Output: USA

• Modifying:

person.age = 26;
console.log(person.age); // Output: 26

• Deleting:

delete person.age;
console.log(person.age); // Output: undefined

---

4. Methods in Objects

When a function is a property of an object, it is called a method.

Example:

const car = {
  brand: "Tesla",
  start: function () {
    console.log("Car started!");
  },
};

car.start(); // Output: Car started!

---

5. Iterating Over Object Properties

A. Using for...in

Iterate over all enumerable properties of an object.

Example:

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

B. Using Object.keys()

Returns an array of an object's keys.

Example:

Object.keys(person).forEach((key) => {
  console.log(`${key}: ${person[key]}`);
});

C. Using Object.entries()

Returns an array of [key, value] pairs.

Example:

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

---

6. Object Methods

JavaScript provides several built-in methods to work with objects.

• Object.assign(): Copies properties from one object to another.

const person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello!");
  },
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!

• Object.freeze(): Prevents modification of an object.

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!

• Object.seal(): Prevents adding or removing properties but allows modification of existing properties.

const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!

---

7. Prototypes and Inheritance

Objects in JavaScript have a prototype, which is another object from which they inherit properties and methods.

Example:

console.log(person.name); // Output: Alice

---

8. Object Destructuring

Destructuring allows extracting properties from an object into variables.

Example:

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25

---

9. Summary

• Objects are key-value pairs that can store properties and methods.
• Use object literals for simple object creation.
• Access object properties using dot or bracket notation.
• Use built-in methods like Object.keys(), Object.assign(), and Object.freeze() for effective object manipulation.
• Mastering objects is crucial for understanding advanced JavaScript concepts like prototypes and inheritance.

Hi, I'm Abhay Singh Kathayat!
I am a full-stack developer with expertise in both front-end and back-end technologies. I work with a variety of programming languages and frameworks to build efficient, scalable, and user-friendly applications.
Feel free to reach out to me at my business email: kaashshorts28@gmail.com.

The above is the detailed content of Mastering Objects in JavaScript. For more information, please follow other related articles on the PHP Chinese website!