Loading...

JavaScript Object Properties

A literal and a dot read are already in your toolkit. On a real form the bag itself changes: a color shows up after the shopper picks one, a draft flag vanishes on save, and a city sits inside an address. This page is that everyday work on properties.

Past the first literal

The objects page built the bag and read a field. Here you change which keys exist: add one that was missing, drop one you no longer need, ask whether a name is present, step into an object stored inside another, and list the names you actually hold.

Five moves on a property

📊 Add, remove, test, nest, list

Move Syntax What you get
add item.color = "blue" a new property on the same object
remove delete item.draft that key is gone
exists "sku" in item true or false
nest user.address.city a field inside another object
list Object.keys(user) an array of the object's own keys

Name the move and the line follows. Adding does not mint a second object. Removing does not turn the value into an empty string. A list of names is not the same job as reading one value.

Add a property that was not in the literal

javascript 
let item = {
name: "Mug",
price: 8
};
item.color = "blue";
console.log(item.color);

Assignment grows a missing key

item began with name and price only. Because color was absent, item.color = "blue" creates it. You still have one object, now with three properties. The console prints blue.

Remove a property with delete

javascript 
let item = {
name: "Mug",
price: 8,
draft: true
};
delete item.draft;
console.log("draft" in item);

delete lifts the key off

delete item.draft removes that property, not the whole object. Afterwards "draft" in item is false. Name and price remain. Storing "" or null is a different act: the key stays, with a new value.

Ask whether a key exists

javascript 
let item = {
name: "Mug",
price: 8
};
console.log("name" in item);
console.log("sku" in item);

in answers yes or no about the key

"name" in item is true — that name is on the object. "sku" in item is false — you never added it. A missing property reads back as undefined, and a stored undefined reads the same way. in asks about the key, not the value sitting there.

Read a field inside a nested object

javascript 
let user = {
name: "Lina",
address: {
city: "Shiraz",
zip: "71345"
}
};
console.log(user.address.city);

A property may hold another object

address is not a string. It is an object with city and zip. user.address.city takes two steps: into address, then into city. The console prints Shiraz. Nesting keeps the address pieces together instead of flattening every one onto user.

List the object's own keys

javascript 
let user = {
name: "Lina",
role: "editor"
};
let names = Object.keys(user);
console.log(names);

Object.keys hands you names

Object.keys(user) returns an array of that object's own keys — here ["name", "role"]. You still read a value with a dot or with brackets. The list helps when you do not want every name hard-coded. It does not print the values by itself.

Choose the move, then type

A new field? Assign it. A key that should disappear? delete. A yes or no? in. A city inside an address? Nest, then walk the dots. Only the names? Object.keys. Functions stored on the object — methods — belong to the next lesson.

Put a nested city on the page after an add

Start with a user and an address, add plan in the script, and place the city in a paragraph.

Page demo — nested city

html 
<!DOCTYPE html>
<html>
<head>
<title>object-properties — page</title>
</head>
<body>
<p id="place">…</p>
<script>
let user = {
name: "Lina",
address: { city: "Shiraz" }
};
user.plan = "yearly";
let box = document.getElementById("place");
box.textContent = user.address.city + " — " + user.plan;
</script>
</body>
</html>

The paragraph shows Shiraz — yearly. The city was already nested; plan arrived after the literal. Change only city or plan, refresh, and read the new line. Next lesson: object methods — functions that live on the object.

Practice steps

  1. Build an object with two properties, add a third by assignment, and log it.
  2. Set a draft property, remove it with delete, and check "draft" in item.
  3. On an object that only has name, log "name" in item and "sku" in item.
  4. Nest an address with city, then log user.address.city.
  5. Log Object.keys for a two-key object and read the array.
  6. In the HTML demo, change only city or plan, refresh, and read the paragraph.

Frequent slip-ups

  • Thinking item.color = "blue" mints a brand-new object — it grows the same one
  • Writing item.draft = null when you meant delete item.draft — the key remains
  • Treating a missing key and a stored undefined as the same question — use in for the key
  • Writing user.city when city lives on user.address
  • Expecting Object.keys to return values
  • Hunting for methods and this on this page — that is the next lesson

Summary

  • Assigning to a missing key adds that property
  • delete removes the key; the rest of the object stays
  • "key" in obj tells you whether the key exists
  • A property can hold another object; extra dots walk inside
  • Object.keys returns the names, not the values
  • A nested field and a newly added field can share one line on the page
  • Next: object methods — functions stored on the object

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 34 of 35
Javascript Tutorial