Up until now, we've been dealing with single values—strings, numbers, booleans. But in the real world, data is rarely that simple. You don't just have a "username"; you have a user who has a username, an email, a join date, and a set of preferences. That's where object literals come in.

How do I actually create an object without using a class or constructor?

The easiest way is using an object literal. You essentially just wrap a list of key-value pairs in curly braces. I like to think of it as a dictionary for your data. Instead of having five different variables for a game character, you bundle them into one entity.

const player = {
  name: 'Kaelen the Bold',
  level: 12,
  health: 85,
  isAlive: true,
  weapon: 'Silver Longsword'
};

Notice that we use colons to separate the keys from the values, and commas to separate the pairs. It's a very clean syntax, and it's by far the most common way you'll see objects created in modern JavaScript projects.

When should I use dot notation versus square brackets?

You'll see two ways to get data out of an object: `player.name` (dot notation) and `player['name']` (bracket notation). In 90% of your code, you'll use the dot. It's shorter, easier to read, and most IDEs will give you great autocomplete suggestions with it.

console.log(player.name); // 'Kaelen the Bold'
console.log(player['health']); // 85

However, bracket notation is your superpower when the property name is stored in a variable or contains characters that aren't allowed in dot notation (like spaces or hyphens). If you try to do `player.first-name`, JavaScript will think you're trying to subtract a variable called `name` from `player.first`, and your code will crash. Brackets solve that.

Can I use a variable to decide which property to access?

Yes, and this is actually why bracket notation exists. Imagine you're building a character sheet where the user clicks a button to "Boost" a specific stat. You don't want to write a giant if/else block for every possible stat. Instead, you can pass the stat name as a string.

function boostStat(statName, amount) {
  // statName might be 'health', 'strength', or 'agility'
  player[statName] += amount;
  console.log(`Boosted ${statName}! New value: ${player[statName]}`);
}

boostStat('health', 20); // Updates player.health to 105

I use this pattern all the time when handling API responses or configuration objects where the keys are dynamic.

How do I add or change properties after the object is already created?

JavaScript objects are mutable. You don't have to know every single property at the moment you define the object. You can add new properties or update existing ones simply by assigning a value to them using either dot or bracket notation.

// The player finds a magic ring!
player.equipment = 'Ring of Invisibility'; 

// The player takes damage
player.health -= 10;

console.log(player); 
// Now includes the equipment property and updated health

Just be careful: if you try to access a property that doesn't exist yet, JavaScript won't throw an error; it'll just return undefined. It's a quirk that has caused many bugs in my own career, so always double-check your keys.

📋 Practical Task

Exercise: The RPG Character Sheet Modifier

You are building a character management system for a tabletop RPG. Your task is to create and manipulate a character object based on the following requirements:

• Create an object named hero with the properties: name (string), class (string), and experience (number).
• Add a new property to the hero object called inventory, and set it as an empty array [].
• Create a variable called statToUpdate and assign it the string 'experience'.
• Use bracket notation and the statToUpdate variable to increase the hero's experience by 50.
• Finally, use dot notation to change the hero's class to 'Paladin'.
• Log the final hero object to the console to verify the changes.