Stop Using 100 Variables: How JavaScript Objects Save Your Sanity

Consider you are building a social media platform for your college. You can store data in individual variables:

const username = "anon.codes";
const followers = 1240;
const bio = "building stuff on the internet";
const isPrivate = false;

This works for one person. But, what if you have 100 users? That would make 400 variables only for these four field. It would become a nightmare if you want to add profilePicture for the user, that add 100 variables. You could then try array:

const user = ["anon.codes", 1240, "building stuff on the internet", false];

But array are ordered list. To get the follower count, you have to remember it was stored at index 1. If you are building this with a teammate and they rearrange the order, every single read breaks silently. user[1] suddenly returns the bio instead of followers, and the app just shows the wrong thing with no error. That is the kind of bug that takes hours to find.

The real problem with both approaches is the same: the data has no labels. You know what the values mean, but the code does not. This is exactly the problem JavaScript objects were built to solve.

The JavaScript Objects

An object is a collection of key-value pairs. It allows us to bundle related data and behavior into a single, labeled entity. It is like a library, where every book is labeled with its genre, author, and title. You find them by their name.

Every piece of information has a label or key and the actual data or value. Here is the same user profile from before, written as an object:

const userProfile = {
  username: "anon.codes",   // key: username, value: "anon.codes"
  followers: 1240,          // key: followers, value: 1240
  bio: "building stuff on the internet",
  isPrivate: false,

  // Objects can even hold functions, called methods
  follow: function() {
    this.followers++;
    console.log("New follower added");
  }
};

This improves readability because we now access data like userProfile.username instead of indexing like user[1]. The relationship between the data is also maintained.
That last part, the follow function inside the object, is called a method. It is a function that belongs to the object. We will not go deep on methods in this post, but it is good to know they exist: objects can hold both data and behavior in the same place.

Everything is an Object or behaves like one.

Arrays vs Objects

Since we started with arrays as a comparison, it helps to see them side by side properly. They are not interchangeable. Each has a job.

Arrays are used to store data of same kind, like a list of usernames, notifications, etc. Objects are used to store different, multiple data for single entity, like a user's username, email, followers and following count, bio, profile picture, etc. In real apps: these two are combined in the form of array of user object, where each item is object of one user.

Creating an Object

An object is created using curly braces with key-value pair inside it known as object literal.

// Syntax
// Constructor
const o1 = new Object();

// Declaring it directly, commonly used
// example
const userProfile = {
  username: "anon.codes",
  followers: 1240,
  bio: "building stuff on the internet",
  isPrivate: false
};

The key comes first, then a colon, followed by the value. Each pair is separated by a comma. The keys do not need quotes around them as long as they follow standard variable naming rules (no spaces, no hyphens). The values can be any data type: strings, numbers, booleans, arrays, or even other objects.

Accessing Properties

There are two ways to read data from an object.

1. Dot Notation

const userProfile = {
  username: "anon.codes",
  followers: 1240,
  isPrivate: false
};

console.log(userProfile.username);   // "anon.codes"
console.log(userProfile.followers);  // 1240
console.log(userProfile.isPrivate);  // false

1. Bracket Notation: Bracket notation lets you pass the key as a string. It looks more like an array, but you are using a name instead of a number. The main reason to use it over dot notation is when your key is stored in a variable rather than written directly.

const userProfile = {
  username: "anon.codes",
  followers: 1240
};

// Works exactly like dot notation
console.log(userProfile["username"]);   // "anon.codes"

// The real use case: the key is in a variable
const field = "followers";
console.log(userProfile[field]);         // 1240

To gain a better understanding, let's consider an example where you are building a settings page where a user can edit his information. The field being editing gets stored in another variable like selectedVariable. To access the value, userProfile[selectedField] is needed. The dot notation will not work as userProfile.selectedField would look for selectedField as key, and would not find anything.

const userProfile = { username: "anon.codes", bio: "building stuff on the internet" };
const selectedField = "bio";

console.log(userProfile[selectedField]);   // "building stuff on the internet"
console.log(userProfile.selectedField);    // undefined 

Updating Object Properties

Updating a property is the same syntax as reading it, but with an assignment on the right.

const userProfile = {
  username: "anon.codes",
  followers: 1240,
  bio: "building stuff on the internet"
};

// User gained a new follower
userProfile.followers = 1241;

// User updated their bio
userProfile.bio = "Learn in public. building things.";

console.log(userProfile.followers);  // 1241
console.log(userProfile.bio);        // "Learn in public. building things."

Objects are mutable. When you update a property, you are changing the original object in memory. This is different from how strings behave, where every change gives you a new string and the original is untouched. With objects, the change happens in place.

Adding Properties

It is not necessary to define all the properties while creating the object. Objects let you add new fields after creation. If you assign value to a key that does not exist yet, then JavaScript adds it for you.

const userProfile = {
  username: "anon.codes",
  followers: 1240
};

// User added a profile picture and a location
userProfile.profilePicture = "avatar.jpg";
userProfile.location = "Lolpur";

console.log(userProfile);
// { username: "anon.codes", followers: 1240, profilePicture: "avatar.jpg", location: "Lolpur" }

Deleting Properties

Objects allows deletion of properties that are not needed. Use delete keyword to delete a property.

const userProfile = {
  username: "anon.codes",
  followers: 1240,
  tempToken: "abc123xyz"  // session token, not for display
};

// Remove the token before sending the profile to the frontend
delete userProfile.tempToken;

console.log(userProfile);
// { username: "anon.codes", followers: 1240 }

console.log(userProfile.tempToken);  // undefined

Checking If a Property Exist

If there is a need to check is a property exist or not, in operator is used. It returns boolean.

const userProfile = {
  username: "anon.codes",
  followers: 1240,
  bio: "building stuff on the internet"
};

console.log("bio" in userProfile);          // true
console.log("profilePicture" in userProfile); // false

// hasOwnProperty() is an older but equivalent approach
console.log(userProfile.hasOwnProperty("followers"));  // true
console.log(userProfile.hasOwnProperty("location"));   // false

Nested Object

When the value of a property is another object, then it is known as Nested Object.

const userProfile = {
  username: "anon.codes",
  followers: 1240,
  settings: {
    darkMode: true,
    language: "en",
    notifications: false
  }
};

// Access the top-level property
console.log(userProfile.username);                  // "anon.codes"

// Access the nested object's properties by chaining dots
console.log(userProfile.settings.darkMode);         // true
console.log(userProfile.settings.language);         // "en"

// Update a nested property the same way
userProfile.settings.notifications = true;
console.log(userProfile.settings.notifications);    // true

Looping Through Object Keys

To look throught the object, use for...in loop:

const userProfile = {
  username: "anon.codes",
  followers: 1240,
  isPrivate: false
};

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

//output
// username: anon.codes
// followers: 1240
// isPrivate: false

Inside the loop, key is a string holding the current property name. To get the value, you use bracket notation: userProfile[key]. You cannot use dot notation here because key is a variable, not the literal name of a property.

Methods to access object keys and values

There are three methods that can be used to access key, and values, and they return an array.

const userProfile = {
  username: "anon.codes",
  followers: 1240,
  isPrivate: false
};

// Get all the keys
console.log(Object.keys(userProfile));
// ["username", "followers", "isPrivate"]

// Get all the values
console.log(Object.values(userProfile));
// ["anon.codes", 1240, false]

// Get both, as [key, value] pairs
console.log(Object.entries(userProfile));
// [["username", "anon.codes"], ["followers", 1240], ["isPrivate", false]]

We started with four loose variables for a single user, saw why that falls apart at scale, and saw why an array is not the right tool for the job either. Objects solve both problems where data stays together, every field has a name, and you can read or update anything without knowing positions.

Objects become reality when you see API response, or someone else's code, and realize you can read it.

References:

• MDN: Working with Objects

• JavaScript.info: Objects

• MDN: for...in statement

• MDN: Object.keys()