JavaScript - Object Properties

Hello, future JavaScript wizards! Today, we're diving into the magical world of JavaScript object properties. As your friendly neighborhood computer science teacher, I'm here to guide you through this exciting journey. So, grab your virtual wands (keyboards), and let's cast some code spells!

JavaScript Object Properties

Objects in JavaScript are like treasure chests - they hold valuable information in the form of properties. Each property is a key-value pair, where the key is like a label, and the value is the treasure itself. Let's create our first object:

let wizard = {
  name: "Harry",
  age: 17,
  house: "Gryffindor"
};

Here, we've created a wizard object with three properties: name, age, and house. Each property has a key (like "name") and a value (like "Harry").

Accessing Object Properties

Now that we have our wizard object, how do we access its properties? There are two ways to do this:

1. Dot Notation
2. Bracket Notation

Let's try both:

// Dot Notation
console.log(wizard.name);  // Output: Harry

// Bracket Notation
console.log(wizard["house"]);  // Output: Gryffindor

The dot notation is simpler and more commonly used. However, bracket notation comes in handy when your property names have spaces or special characters, or when you're using a variable to access the property.

let property = "age";
console.log(wizard[property]);  // Output: 17

Accessing the Nested Object Properties

Sometimes, objects can contain other objects. It's like a magical nesting doll! Let's expand our wizard object:

let wizard = {
  name: "Harry",
  age: 17,
  house: "Gryffindor",
  wand: {
    wood: "Holly",
    core: "Phoenix feather",
    length: 11
  }
};

To access nested properties, we simply chain our dot or bracket notations:

console.log(wizard.wand.wood);  // Output: Holly
console.log(wizard["wand"]["core"]);  // Output: Phoenix feather

Adding or Updating the Object Properties

Objects in JavaScript are mutable, which means we can change them after creation. Let's give our wizard some new skills:

// Adding a new property
wizard.skill = "Quidditch";

// Updating an existing property
wizard.age = 18;

console.log(wizard.skill);  // Output: Quidditch
console.log(wizard.age);  // Output: 18

Deleting the Object Properties

Sometimes, we need to make properties disappear. For this, we use the delete operator:

delete wizard.house;
console.log(wizard.house);  // Output: undefined

Poof! The "house" property is gone. Remember, using delete only removes the property from the object, it doesn't affect any variables that might have held that property's value.

Enumerating the Object Properties

What if we want to see all the properties of an object? We can use a for...in loop:

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

This will list all enumerable properties of the wizard object. But wait, there's more! We can also use Object.keys(), Object.values(), or Object.entries() to get arrays of an object's keys, values, or both:

console.log(Object.keys(wizard));    // Output: ["name", "age", "wand", "skill"]
console.log(Object.values(wizard));  // Output: ["Harry", 18, {wood: "Holly", core: "Phoenix feather", length: 11}, "Quidditch"]
console.log(Object.entries(wizard)); // Output: [["name", "Harry"], ["age", 18], ["wand", {...}], ["skill", "Quidditch"]]

Property Attributes

Every property in JavaScript has certain attributes that define its behavior. These attributes are like the property's personality traits. Let's meet them:

1. value: The property's value (obviously!)
2. writable: Can we change the property's value?
3. enumerable: Should this property show up when we enumerate the object's properties?
4. configurable: Can we delete this property or modify its attributes?

By default, all of these are set to true for properties we create normally. But we can change them using Object.defineProperty():

Object.defineProperty(wizard, "name", {
  writable: false,
  enumerable: false
});

wizard.name = "Ron";  // This won't work
console.log(wizard.name);  // Output: Harry

for (let key in wizard) {
  console.log(key);  // "name" won't appear here
}

Here's a table summarizing the property methods we've learned:

Method	Description
object.property	Access a property using dot notation
object["property"]	Access a property using bracket notation
object.property = value	Add or update a property
delete object.property	Delete a property
for...in	Enumerate object properties
Object.keys(object)	Get an array of object's keys
Object.values(object)	Get an array of object's values
Object.entries(object)	Get an array of object's [key, value] pairs
Object.defineProperty()	Define a new property or modify an existing one

And there you have it, young coders! You've just completed your crash course in JavaScript object properties. Remember, practice makes perfect, so keep experimenting with these concepts. Before you know it, you'll be conjuring complex objects like a true JavaScript sorcerer!

Credits: Image by storyset