Objects in JavaScript.

JavaScript objects are one of the most important concepts in the language. Almost everything in JavaScript revolves around objects, making them essential for building dynamic and scalable applications. Whether you’re a beginner or an experienced developer, understanding objects is crucial for mastering JavaScript.

In this article, we’ll explore what objects are, how to create them, access and modify their properties, work with methods, and use modern object features introduced in ES6 and beyond.

What is an Object?

An object is a collection of related data and functionality stored as key-value pairs.

Example:

const person = {
  name: "John",
  age: 25,
  city: "New York"
};

console.log(person);

Output:

{
  name: "John",
  age: 25,
  city: "New York"
}

Here:

• name, age, and city are keys (properties).
• "John", 25, and "New York" are values.

Why Use Objects?

Objects help organize data in a structured way.

Get Kausar Mahmud’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Without objects:

const name = "John";
const age = 25;
const city = "New York";

With objects:

const person = {
  name: "John",
  age: 25,
  city: "New York"
};

This makes the code cleaner and easier to maintain.

Creating Objects

1. Object Literal (Most Common)

const car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2024
};

2. Using the Object Constructor

const car = new Object();

car.brand = "Toyota";
car.model = "Corolla";
car.year = 2024;

Accessing Object Properties

Dot Notation

console.log(person.name);

Output:

John

Bracket Notation

console.log(person["age"]);

Output:

25

Bracket notation is useful when property names are dynamic.

const key = "city";

console.log(person[key]);

Output:

New York

Modifying Object Properties

const person = {
  name: "John",
  age: 25
};

person.age = 30;
console.log(person);

Output:

{
  name: "John",
  age: 30
}

Adding New Properties

person.country = "USA";

console.log(person);

Output:

{
  name: "John",
  age: 30,
  country: "USA"
}

Deleting Properties

delete person.age;

console.log(person);

Output:

{
  name: "John",
  country: "USA"
}

Objects with Methods

Objects can contain functions, called methods.

const person = {
  name: "John",

  greet: function() {
    console.log("Hello!");
  }
};
person.greet();

Output:

Hello!

The this Keyword

The this keyword refers to the current object.

const person = {
  name: "John",

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
person.greet();

Output:

Hello, my name is John

Nested Objects

Objects can contain other objects.

const student = {
  name: "Alice",

  address: {
    city: "Dhaka",
    country: "Bangladesh"
  }
};
console.log(student.address.city);

Output:

Dhaka

Object.keys()

Returns all property names.

const person = {
  name: "John",
  age: 25
};

console.log(Object.keys(person));

Output:

["name", "age"]

Object.values()

Returns all property values.

console.log(Object.values(person));

Output:

["John", 25]

Object.entries()

Returns key-value pairs as arrays.

console.log(Object.entries(person));

Output:

[
  ["name", "John"],
  ["age", 25]
]

Looping Through Objects

Using for...in

const person = {
  name: "John",
  age: 25
};

for (let key in person) {
  console.log(key, person[key]);
}

Output:

name John
age 25

Object Destructuring

ES6 introduced destructuring for easier access.

const person = {
  name: "John",
  age: 25
};

const { name, age } = person;
console.log(name);
console.log(age);

Output:

John

Spread Operator with Objects

Copy objects easily.

const person = {
  name: "John",
  age: 25
};

const newPerson = {
  ...person,
  city: "New York"
};
console.log(newPerson);

Output:

{
  name: "John",
  age: 25,
  city: "New York"
}

Object.freeze()

Prevents modifications.

const person = {
  name: "John"
};

Object.freeze(person);
person.name = "Mike";
console.log(person.name);

Output:

John

Object.seal()

Allows updating existing properties but prevents adding or deleting properties.

const person = {
  name: "John"
};

Object.seal(person);
person.name = "Mike";
console.log(person.name);

Output:

Mike

Optional Chaining (?.)

Safely access nested properties.

const user = {
  profile: {
    name: "John"
  }
};

console.log(user?.profile?.name);

Output:

John

Real-World Example

const user = {
  id: 1,
  name: "John Doe",
  email: "john@example.com",
  isAdmin: false,

  login() {
    console.log(`${this.name} logged in`);
  }
};
user.login();

Output:

John Doe logged in

Conclusion

Objects are the foundation of JavaScript. They allow developers to store, organize, and manipulate data efficiently. By understanding object creation, property access, methods, destructuring, spread operators, and modern ES6+ features, you’ll be able to write cleaner and more maintainable JavaScript code.