JavaScript: Objects

Objects in JavaScript are key-value pairs that allow you to store and manage complex data structures. They provide an efficient way to group related data and define custom behavior for that data using methods. Objects can contain properties (data) and methods (functions) that act upon the data.

1. Creating Objects:

• Object literal: The most common way to create an object is by using an object literal, which consists of curly braces {} and a comma-separated list of key-value pairs.

javascriptCopy code
let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  city: "New York",
};

• Object constructor: Alternatively, you can create an object using the Object constructor.

javascriptCopy code
let person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 30;
person.city = "New York";

• Constructor function: You can also create objects using a constructor function, which allows you to define a template for creating multiple objects with similar properties and methods.

javascriptCopy code
function Person(firstName, lastName, age, city) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.city = city;
}

let person1 = new Person("John", "Doe", 30, "New York");
let person2 = new Person("Jane", "Smith", 28, "Los Angeles");

2. Accessing Properties:

• Dot notation: You can access an object's properties using the dot notation.

javascriptCopy code
console.log(person.firstName); // "John"
console.log(person.age); // 30

• Bracket notation: Alternatively, you can use the bracket notation, which is particularly useful when the property name is stored in a variable or contains special characters.

javascriptCopy code
console.log(person["lastName"]); // "Doe"
console.log(person["city"]); // "New York"

3. Modifying Properties:

• You can modify the value of an object property using the dot or bracket notation.

javascriptCopy code
person.age = 31;
console.log(person.age); // 31

person["city"] = "San Francisco";
console.log(person["city"]); // "San Francisco"

4. Adding and Deleting Properties:

• To add a new property to an object, simply assign a value to it using the dot or bracket notation.

javascriptCopy code
person.job = "Software Developer";
console.log(person.job); // "Software Developer"

• To delete a property from an object, use the delete keyword.

javascriptCopy code
delete person.job;
console.log(person.job); // undefined

5. Methods:

• You can define functions within an object, which are called methods. Methods can act upon the object's data and perform specific tasks.

javascriptCopy code
let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  city: "New York",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  },
};

console.log(person.fullName()); // "John Doe"

6. Object Property Descriptors:

• Each property in an object has a property descriptor that contains metadata about the property, such as whether it is writable, enumerable, and configurable.

javascriptCopy code
let descriptor = Object.getOwnPropertyDescriptor(person, "firstName");
console.log(descriptor);
/*
{
  value: "John",
  writable: true,
  enumerable: true,
  configurable: true
}
*/

• You can change the property descriptor using Object.defineProperty().

javascriptCopy code
Object.defineProperty(person, "firstName", {
  enumerable: false,
  configurable: false,
});

7. Looping through Object Properties:

• You can loop through the properties of an object using the for...in loop, which iterates over the enumerable properties of an object.

javascriptCopy code
for (let key in person) {
  console.log(key + ": " + person[key]);
}
/*
firstName: John
lastName: Doe
age: 30
city: New York
fullName: function() {...}
*/

8. Object Methods and Properties:

• Object.keys(): This method returns an array containing the enumerable property names (keys) of an object.

javascriptCopy code
let keys = Object.keys(person);
console.log(keys); // ["firstName", "lastName", "age", "city", "fullName"]

• Object.values(): This method returns an array containing the enumerable property values of an object.

javascriptCopy code
let values = Object.values(person);
console.log(values); // ["John", "Doe", 30, "New York", function() {...}]

• Object.entries(): This method returns an array of key-value pairs (as arrays) for the enumerable properties of an object.

javascriptCopy code
let entries = Object.entries(person);
console.log(entries);
/*
[
  ["firstName", "John"],
  ["lastName", "Doe"],
  ["age", 30],
  ["city", "New York"],
  ["fullName", function() {...}]
]

• Object.assign(): This method is used to copy the values of all enumerable properties from one or more source objects to a target object.

javascriptCopy code
let personCopy = Object.assign({}, person);
console.log(personCopy); // {firstName: "John", lastName: "Doe", age: 30, city: "New York", fullName: function() {...}}

• Object.freeze() and Object.isFrozen(): The Object.freeze() method is used to prevent any modification to an object (i.e., making it immutable). The Object.isFrozen() method returns a boolean indicating whether an object is frozen.

javascriptCopy code
Object.freeze(person);
console.log(Object.isFrozen(person)); // true

Objects are a fundamental aspect of JavaScript and provide a powerful way to manage and manipulate complex data structures. By understanding how to create, access, modify, and manage objects, you can build more efficient and flexible applications.