feat(curriculum): Add interactive examples to What Is Object Destructuring, and How Does It Work (#63346)

curriculum/challenges/english/blocks/lecture-working-with-optional-chaining-and-object-destructuring/6732b77adf9de12617a2dbb3.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-object-destructuring-and-how-does-it-work
 ---
 
-# --description--
+# --interactive--
 
 Object destructuring is a powerful feature in JavaScript that allows you to extract values from objects and assign them to variables in a more concise and readable way. 
 
@@ -17,6 +17,8 @@ At its core, object destructuring is about unpacking values from objects into di
 
 Let's start with an example to illustrate how object destructuring works:
 
+:::interactive_editor
+
 ```js
 const person = { name: "Alice", age: 30, city: "New York" };
 
@@ -26,10 +28,14 @@ console.log(name); // Alice
 console.log(age);  // 30
 ```
 
+:::
+
 In this example, we're extracting the `name` and `age` properties from the `person` object and assigning them to variables with the same names. 
 
 One of the powerful aspects of object destructuring is that you can assign the extracted values to variables with different names. This is particularly useful when you're working with objects that have property names that might conflict with existing variables or when you want to use a different name:
 
+:::interactive_editor
+
 ```js
 let person = { name: "Alice", age: 30, city: "New York" };
 
@@ -39,10 +45,14 @@ console.log(personName); // Alice
 console.log(personAge); //  30
 ```
 
+:::
+
 In this case, we're extracting the `name` property and assigning it to a variable called `personName`, and doing the same with `age` and `personAge`.
 
 Object destructuring also allows you to set default values. If a property doesn't exist in the object you're destructuring, you can specify a fallback value:
 
+:::interactive_editor
+
 ```js
 let person = { name: "Alice", age: 30, city: "New York" };
 let { name, age, country = "Unknown" } = person;
@@ -50,10 +60,14 @@ let { name, age, country = "Unknown" } = person;
 console.log(country); // Unknown
 ```
 
+:::
+
 Here, since `country` doesn't exist in our `person` object, it gets the default value `Unknown`.
 
 Now, let's talk about the shorthand notation in object destructuring. When you're creating objects, especially when the property names match variable names, you can use a shorthand syntax:
 
+:::interactive_editor
+
 ```js
 let name = "Bob";
 let age = 25;
@@ -63,10 +77,14 @@ let person = { name, age };
 console.log(person); // { name: "Bob", age: 25 }
 ```
 
+:::
+
 The code above takes the properties with the same name as our variables and assigns them the values of those variables.
 
 This shorthand notation is particularly useful when you're returning objects from functions or creating objects with multiple properties:
 
+:::interactive_editor
+
 ```js
 function createPerson(name, age) {
   return { name, age };
@@ -76,6 +94,8 @@ let person = createPerson("Charlie", 35);
 console.log(person); // { name: "Charlie", age: 35 }
 ```
 
+:::
+
 Object destructuring and the shorthand object notation are powerful features that can make your code more concise and easier to read. 
 
 They're especially useful when working with complex data structures, or when you need to pass multiple parameters to functions.