Beginners' Guide to Understanding JavaScript Objects

Hey friends! 👋

It’s a new week and I’m back with another quick, easy tutorial. This time we’re talking about JavaScript objects.

Objects used to confuse me a little. Now I just think of them as mini folders storing related info. Let's break it down.

What’s an Object?

An object in JavaScript is like a shopping cart 🛒.
You add items to the cart using labels (called keys) and each item has details (called values).

const cart = {
  'item-name': 'Laptop',
  price: 2000,
  quantity: 1
};

Here:

• 'item-name' is the key and 'Laptop' is its value: this tells us what’s in the cart.
• price is the key and 2000 is the value: how much the item costs.
• quantity is the key and 1 is the value: how many you're buying.

So instead of remembering each piece of info separately, you group it all inside one neat object: your cart 🛒. It makes data easy to organise, update and use

How to Access Properties (Keys)

You can use dot notation:

console.log(cart.quantity); // 1
console.log(cart.price); // 2000

Or bracket notation (useful if the key has a space or hyphen):

console.log(person['item-name']); // Laptop

You might’ve noticed that I wrapped the item-name key in a single quote like this:

  'item-name'

Smart of you to be so observant! :)
Here’s the thing, in JavaScript, object keys that contain special characters like hyphens (-) must be wrapped in quotes, single or double quotes.
If I wrote:

const cart = {
  item-name: 'Laptop'
};

It'll throw a syntax error!
JavaScript will think you’re subtracting name from item, which obviously makes no sense in this context.

So, whenever your key:

• Has a space ('item name')
• Has a dash ('item-name')
• Starts with a number ('1stItem')

👉 Always wrap it in quotes to avoid syntax errors.

Add or Change Values

cart['item-name'] = 'Keyboard'; // Add new property
cart.price = 1000; // Change price

Remove a Property

delete cart.price;

Now price is gone.

Loop Through an Object

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

This logs each key and its value.

Try It Yourself

const favBook = {
  'book-title': 'Atomic Habits',
  author: 'James Clear',
  published: 2018
};

// 1. Add a new property called rating
// 2. Change the title
// 3. Print each key and value

Try it out in your browser console or live on CodePen.

If you're up for a challenge, do this challenge:
Def know that you can take on the challenge :)

Can You Delete a Property?

Okay, you’ve practiced how to add or update a property in a JavaScript object. But what if you want to delete one?

Here’s your challenge:

Fork the CodePen and add a new button called “Delete Property”.
It should:

• Read the property name from the same input field
• Use delete obj[key] to remove that key
• Update the display to reflect the changes

You can fork the CodePen and try it out there. Let me know in the 💬 if you pull it off or if you get stuck and need help!

Over to You

Still with me? Good :)

Objects are everywhere in JavaScript—from console.log() to document.body—so getting familiar with them now will help a lot later.

Was this helpful? Got questions? Or any insight to help me write better tutorials? Let me know in the 💬!

That’s it for today’s midweek mini tutorial!

I’m keeping things light, fun and useful; one small project at a time.

*If you enjoyed this, leave a 💬 or 🧡 to let me know. *

And if you’ve got an idea for something you'd like me to try out next Wednesday, drop it in the comments. 👇

Follow me to see more straight-forward and short tutorials like this :)

If you are curious about what I do, check out my Portfolio

:-)

Web trails
You can also find me here on LinkedIn
or here X (Twitter)

Let’s keep learning together!