Understanding Objects in JavaScript

Imagine we are storing information about a student. Using separate variables for studentName, studentAge, and studentCourse is messy. Using an array ["John", 20, "CS"] is confusing because we have to remember that index 0 is always the name.

Objects solve this by allowing us to store data in key-value pairs. Instead of remembering an index, we just use a descriptive name (a key) to find the data.

What Are Objects in JavaScript?

An object in JavaScript is a collection of related data stored as key-value pairs.

Think of it like a real-world identity card where different pieces of information belong to one person.

Example:

Name: John 
Age: 25 
City: New York

In JavaScript, we can represent this information as an object.

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

Here:

Key	Value
name	John
age	25
city	New York

Creating Objects

Object Literal (Most Common)

This is the simplest and most readable way to create an object. We define the keys and values directly inside curly braces.

const user = {
  firstName: "Jane",
  lastName: "Doe",
  age: 22
};

Constructor Function

Before modern classes existed, constructor functions were the standard way to create multiple instances of an object type. We use the function keyword and the this keyword.

function Student(name, course) {
  this.name = name;
  this.course = course;
}

const student1 = new Student("Alex", "CS");
const student2 = new Student("Sam", "IT");

Here, When we use the new keyword, we aren't just calling a function, we are triggering a specific four-step process that transforms a regular function into a Constructor and in return we get an object.

ES6 Classes (Modern Standard)

Introduced in 2015, this is "syntactic sugar" over constructor functions. it provides a cleaner, more organized way to create object blueprints.

class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }
}

const myCar = new Car("Tesla", "Model 3");

Object.create()

This method allows us to create a new object using an existing object as a prototype. This is useful for complex inheritance patterns.

const job = {
  position: "Developer",
  isRemote: true
};

const employee = Object.create(job);
employee.name = "Jordan";

console.log(employee.position); // Output: Developer (inherited from job)

The new Object() Syntax

While technically valid, this is rarely used in professional code because the literal syntax ({}) is shorter and faster.

const laptop = new Object();
laptop.brand = "Apple";
laptop.chip = "M2";

Accessing Objects

There are two ways to access object properties.

Let's use both the notation on the person object below :

const person = { 
    name: "Alice",
    age: 28,
    city: "London" 
};

1. Dot Notation

This is the most common method.

console.log(person.name);
console.log(person.age);

Output:

Alice
28

Dot notation is simple and readable.

2. Bracket Notation

We can also access properties using square brackets.

console.log(person["name"]);
console.log(person["city"]);

Output:

Alice
London

Bracket notation is useful when the property name is stored in a variable.

Example:

let key = "age";
console.log(person[key]);

Output:

28

Modifying Objects

Objects are mutable. We can change, add, or delete properties at any time, even if the object is declared with const.

• Update: person.age = 20;

• Add: person.isGraduated = false;

• Delete: delete person.city;

Looping Through Objects

Since objects don't have indexes, we can't use a standard for loop. Instead, we use the for...in loop to iterate through the keys.

const laptop = { 
    brand: "Dell",
    ram: "16GB",
    cpu: "i7" 
};

for (let key in laptop) {
  console.log(key + ": " + laptop[key]);
}

Output:

brand: Dell
ram: 16GB
cpu: i7

Array vs Object

Many beginners confuse arrays and objects, but they serve different purposes.

Array Example

const colors = ["red", "blue", "green"];

Arrays store ordered values accessed by index numbers.

colors[0] → "red"
colors[1] → "blue"

Object Example

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

Objects store named values accessed by keys