Skip to main content

Command Palette

Search for a command to run...

Understanding Objects in JavaScript

Published
5 min read
Understanding Objects in JavaScript

As programs grow, they need a better way to organize information. Storing individual values in separate variables works for small examples, but real applications often deal with related pieces of data.

For example, imagine you want to store information about a person:

  • Name

  • Age

  • City

You could create three separate variables, but those values clearly belong together. This is where objects become useful.

Objects allow us to group related information into a single structure.


What Objects Are and Why They Are Needed

In JavaScript, an object is a collection of key–value pairs.

Think of it like a labeled record:

  • Each key describes a property.

  • Each value stores the actual information.

For example:

name → "Alex"
age → 25
city → "London"

An object allows us to store all of these pieces of information together.

Objects are extremely common in JavaScript. They are used to represent things like:

  • Users

  • Products

  • Orders

  • Settings

  • Configuration data


Creating Objects

Objects are created using curly braces {}.

Here is a simple example:

const person = {
  name: "Alex",
  age: 25,
  city: "London"
};

This object has three properties:

Key Value
name "Alex"
age 25
city "London"

You can think of it as a structured container for related data.


Objects vs Arrays

Beginners sometimes confuse arrays and objects, but they serve different purposes.

Array

Arrays store ordered lists of values.

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

Values are accessed using index numbers.

colors[0] → "red"

Object

Objects store labeled values.

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

Values are accessed using property names.

person.name → "Alex"

In short:

Structure Best For
Array Ordered lists
Object Structured data

Accessing Object Properties

There are two main ways to access properties inside an object.


Dot Notation

This is the most common method.

const person = {
  name: "Alex",
  age: 25,
  city: "London"
};

console.log(person.name);

Output:

Alex

Bracket Notation

Another way to access properties is using square brackets.

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

Output:

25

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

Example:

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

Updating Object Properties

Object values can be modified easily.

Example:

const person = {
  name: "Alex",
  age: 25,
  city: "London"
};

person.age = 26;

Now the object becomes:

{
  name: "Alex",
  age: 26,
  city: "London"
}

Updating a property simply means assigning a new value.


Adding New Properties

You can add properties to an object at any time.

Example:

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

person.country = "UK";

The object now contains:

{
  name: "Alex",
  age: 25,
  country: "UK"
}

Deleting Properties

If you want to remove a property, you can use the delete keyword.

Example:

delete person.age;

Now the object becomes:

{
  name: "Alex",
  country: "UK"
}

Looping Through Object Keys

Sometimes you want to see all properties inside an object.

JavaScript provides a loop called for...in for this purpose.

Example:

const person = {
  name: "Alex",
  age: 25,
  city: "London"
};

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

Output:

name Alex
age 25
city London

How this works:

  • key represents each property name

  • person[key] accesses its value

This allows us to print all properties dynamically.


Assignment

Let’s apply everything you learned.


Step 1: Create a Student Object

const student = {
  name: "John",
  age: 20,
  course: "Computer Science"
};

Step 2: Update One Property

student.age = 21;

Step 3: Print All Keys and Values

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

Output:

name John
age 21
course Computer Science

Complete Assignment Solution

Here is the complete working program:

const student = {
  name: "John",
  age: 20,
  course: "Computer Science"
};

// Update property
student.age = 21;

// Loop through object
for (let key in student) {
  console.log(key + ": " + student[key]);
}

Output:

name: John
age: 21
course: Computer Science

Final Thoughts

Objects are one of the most powerful and widely used features in JavaScript. They allow developers to organize related information into structured data.

Instead of managing multiple disconnected variables, objects let you group everything into a single entity. This makes programs easier to read, maintain, and expand.

As you continue learning JavaScript, you will see objects used everywhere—from storing user data to building entire application structures. Understanding how to create and manipulate them is an essential step toward writing more practical and scalable code.