Chapter 16: Enchanted Artifacts
Objects — Organizing Magical Data
You've used variables to store single values and arrays to store lists. But what if you need to describe something with multiple properties – like a wizard's profile, a magical creature, or an enchanted artifact? That's where objects come in.
🏺 What is an Object?
An object is a collection of key-value pairs, wrapped in curly braces {}. Think of it like a wizard's profile card – each field has a label (the key) and a value.
let wand = {
wood: "Holly",
core: "Phoenix feather",
length: 11,
owner: "Harry Potter"
};
Here we created an object called wand with four properties:
wood→ "Holly"core→ "Phoenix feather"length→ 11owner→ "Harry Potter"
Each property has a key (like wood) and a value (like "Holly"), separated by a colon. Properties are separated by commas.
🔍 Accessing Properties
There are two ways to read a property from an object.
Dot notation (the most common way):
console.log(wand.wood);
// Output: Holly
console.log(wand.owner);
// Output: Harry Potter
Bracket notation (useful when the key is stored in a variable):
let field = "core";
console.log(wand[field]);
// Output: Phoenix feather
Bracket notation also works with the key as a string directly: wand["length"] gives 11.
✏️ Modifying and Adding Properties
You can change an existing property or add a brand new one at any time:
// Change the owner
wand.owner = "Draco Malfoy";
console.log(wand.owner);
// Output: Draco Malfoy
// Add a new property
wand.isUnbreakable = false;
console.log(wand.isUnbreakable);
// Output: false
Objects are flexible – you can grow and change them as your program runs, just like how a wizard's inventory changes throughout the school year.
📦 Objects vs Arrays – When to Use Which
Both objects and arrays hold collections of data, but they serve different purposes:
| Arrays | Objects | |
|---|---|---|
| Best for | Ordered lists of similar items | Describing a single thing with named properties |
| Access by | Index (number): spells[0] | Key (name): wand.wood |
| Example | A list of spells | A single wand's details |
Use an array when you have a list: spells, students, scores. Use an object when you have a thing with properties: a wand, a student profile, a potion recipe.
You can even combine them! An array of objects is very common:
let students = [
{ name: "Harry", house: "Gryffindor" },
{ name: "Draco", house: "Slytherin" },
{ name: "Luna", house: "Ravenclaw" }
];
console.log(students[1].name);
// Output: Draco
💡 Try It: Create a Hogwarts Student Card
- Create an object representing a Hogwarts student with at least these properties:
name,house,year,pet, andfavoriteSpell. - Use
console.logwith dot notation to print each property on its own line, like a profile card. - Add a new property called
patronusto your student object after creating it. - Create a second student object and put both students into an array. Print the name of the second student using bracket and dot notation combined (e.g.,
students[1].name).
Objects are one of the most powerful tools in JavaScript. Nearly everything in the language is built on them. Now that you can create and work with objects, you have all the fundamental building blocks of a true coding wizard!