Javascript Objects

Objects are one of the most powerful features of JavaScript. They allow you to store and organize data in an organized manner, making your code more efficient and readable.

In this lesson, we will learn how to create objects in JavaScript, access and modify object properties, methods in objects, and common use cases.

What Is an Object?

In real life, objects are things. A book, a car, a person—each of these can be described by properties (like color, size, age) and actions (like read, drive, speak).

In JavaScript, an object is a way to group related data and functionality together. It’s like a container that holds key-value pairs, where each key is a property name and each value is the data or behavior associated with that property.

Example of a Simple Object

          const person = {
  name: "Alice",
  age: 25,
  isStudent: true,
};
        

in this example, person is an object with three properties: name, age, and isStudent.

Why Use Objects?

Objects let you structure data in a way that makes sense. Instead of having separate variables for each piece of data, you bundle them together.

Without an object:

          const name = "Alice";
const age = 25;
const isStudent = true;
        

With an object:

          const person = {
  name: "Alice",
  age: 25,
  isStudent: true
};
        

The object version is more organized and scalable, especially when dealing with lots of related data.

Creating Objects in JavaScript

There are multiple ways to create objects in JavaScript:

1. Using Object Literals (most common way):

          const person = {
  name: 'Alice',
  age: 30,
  greet() {
	console.log(`Hi, I'm ${this.name}`);
  }
};
        

How it works:

• The object is created using {}.
• You define key-value pairs inside the curly braces.
• Methods (like greet) can also be included directly.
• this refers to the current object (person).

When to use:

When you need a single object or a small number of objects without needing to reuse a structure.

2. new Object() Constructor

This is an older way to create objects. It creates a blank object and then adds properties to it.

          const person = new Object();
person.name = 'Bob';
person.age = 25;
person.greet = function () {
  console.log(`Hi, I'm ${this.name}`);
};
        

How it works:

new Object() creates an empty object (same as {}).

Properties and methods are added manually after creation.

3. Function Constructors

Before ES6 classes, constructor functions were used to create multiple objects of the same type.

          function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function () {
	console.log(`Hi, I'm ${this.name}`);
  };
}

const person1 = new Person('Charlie', 28);
        

How it works:

Person is a function that initializes properties using this.

When used with new, it creates a new object and binds this to that object.

Each object has its own copy of methods unless defined on the prototype.

When to use:

• For creating multiple objects with the same structure before ES6.
• Can be memory-inefficient if methods are defined inside the constructor (each instance gets its own copy).

Accessing Object Properties

There are two common ways to access an object's properties:

Dot notation (Most Common):

          const person = {
  name: "Alice",
  age: 25,
  isStudent: true
};

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

This is the most common method.

Bracket notation:

          const person = {
  name: "Alice",
  age: 25,
  isStudent: true
};

console.log(person["age"]); // Output: 25
        

Adding and Updating Properties

You can add properties dynamically:

          const person = {
  name: "Alice",
  age: 25,
  isStudent: true
};

person.job = "Developer";
console.log(person.job); // Output: "Developer"
        

You can also update existing properties:

          const person = {
  name: "Alice",
  age: 25,
  isStudent: true
};

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

Deleting Properties

To delete a property, use the delete keyword:

          const person = {
  name: "Alice",
  age: 25,
  isStudent: true
};

delete person.isStudent;
console.log(person.isStudent);
        

Nesting Objects

Objects can contain other objects:

          const user = {
  name: "Bob",
  contact: {
	email: "bob@example.com",
	phone: "123-456-7890"
  }
};

console.log(user.contact.email); // bob@example.com
        

This is useful for structuring more complex data, like user profiles or settings.