feat(curriculum): add interactive examples to JavaScript Objects (#65320)

Co-authored-by: Jeevankumar-S <jeevenkumar2003@email.com>

curriculum/challenges/english/blocks/review-javascript-objects/6723c77d1a44b8a7599277dd.md

@@ -5,12 +5,14 @@ challengeType: 31
 dashedName: review-javascript-objects
 ---
 
-# --description--
+# --interactive--
 
 ## Object Basics
 
 - **Definition**: An object is a data structure that is made up of properties. A property consists of a key and a value. To access data from an object you can use either dot notation or bracket notation.
 
+:::interactive_editor
+
 ```js
 const person = {
   name: "Alice",
@@ -22,8 +24,12 @@ console.log(person.name);  // Alice
 console.log(person["name"]); // Alice
 ```
 
+:::
+
 To set a property of an existing object you can use either dot notation or bracket notation together with the assignment operator.
 
+:::interactive_editor
+
 ```js
 const person = {
   name: "Alice",
@@ -35,10 +41,14 @@ person["hobby"] = "Knitting"
 console.log(person);  // {name: 'Alice', age: 30, job: 'Engineer', hobby: 'Knitting'}
 ```
 
+:::
+
 ## Removing Properties From an Object
 
 - **`delete` Operator**: This operator is used to remove a property from an object.
 
+:::interactive_editor
+
 ```js
 const person = {
   name: "Alice",
@@ -51,10 +61,14 @@ delete person.job;
 console.log(person.job); // undefined
 ```
 
+:::
+
 ## Checking if an Object has a Property
 
 - **`hasOwnProperty()` Method**: This method returns a boolean indicating whether the object has the specified property as its own property. 
 
+:::interactive_editor
+
 ```js
 const person = {
   name: "Alice",
@@ -65,8 +79,12 @@ console.log(person.hasOwnProperty("name")); // true
 console.log(person.hasOwnProperty("job")); // false
 ```
 
+:::
+
 - **`in` Operator**: This operator will return `true` if the property exists in the object. 
 
+:::interactive_editor
+
 ```js
 const person = {
   name: "Bob",
@@ -76,10 +94,14 @@ const person = {
 console.log("name" in person);  // true
 ```
 
+:::
+
 ## Accessing Properties From Nested Objects
 
 - **Accessing Data**: Accessing properties from nested objects involves using the dot notation or bracket notation, much like accessing properties from simple objects. However, you'll need to chain these accessors to drill down into the nested structure. 
 
+:::interactive_editor
+
 ```js
 const person = {
   name: "Alice",
@@ -96,6 +118,8 @@ const person = {
 console.log(person.contact.phone.work); // "098-765-4321"
 ```
 
+:::
+
 ## Primitive and Non Primitive Data Types
 
 - **Primitive Data Types**: These data types include numbers, strings, booleans, `null`, `undefined`, and symbols. These types are called "primitive" because they represent single values and are not objects. Primitive values are immutable, which means once they are created, their value cannot be changed. 
@@ -105,6 +129,8 @@ console.log(person.contact.phone.work); // "098-765-4321"
 
 - **Definition**: Object methods are functions that are associated with an object. They are defined as properties of an object and can access and manipulate the object's data. The `this` keyword inside the method refers to the object itself, enabling access to its properties.
 
+:::interactive_editor
+
 ```js
 const person = {
   name: "Bob",
@@ -117,6 +143,8 @@ const person = {
 console.log(person.sayHello()); // "Hello, my name is Bob"
 ```
 
+:::
+
 ## Object Constructor 
 
 - **Definition**: In JavaScript, a constructor is a special type of function used to create and initialize objects. It is invoked with the `new` keyword and can initialize properties and methods on the newly created object. The `Object()` constructor creates a new empty object.
@@ -129,6 +157,8 @@ new Object()
 
 - **Definition**: This operator lets you safely access object properties or call methods without worrying whether they exist. 
 
+:::interactive_editor
+
 ```js
 const user = {
   name: "John",
@@ -145,10 +175,14 @@ console.log(user.profile?.address?.street); // "123 Main St"
 console.log(user.profile?.phone?.number);   // undefined
 ```
 
+:::
+
 ## Object Destructuring
 
 - **Definition**: Object destructuring allows you to extract values from objects and assign them to variables in a more concise and readable way. 
 
+:::interactive_editor
+
 ```js
 const person = { name: "Alice", age: 30, city: "New York" };
 
@@ -158,6 +192,8 @@ console.log(name); // Alice
 console.log(age);  // 30
 ```
 
+:::
+
 ## Working with JSON
 
 - **Definition**: JSON stands for JavaScript Object Notation. It is a lightweight, text-based data format that is commonly used to exchange data between a server and a web application. 
@@ -173,6 +209,8 @@ console.log(age);  // 30
 
 - **`JSON.stringify()`**: This method is used to convert a JavaScript object into a JSON string. This is useful when you want to store or transmit data in a format that can be easily shared or transferred between systems. 
 
+:::interactive_editor
+
 ```js
 const user = {
   name: "John",
@@ -184,8 +222,12 @@ const jsonString = JSON.stringify(user);
 console.log(jsonString); // '{"name":"John","age":30,"isAdmin":true}'
 ```
 
+:::
+
 - **`JSON.parse()`**: This method converts a JSON string back into a JavaScript object. This is useful when you retrieve JSON data from a web server or localStorage and you need to manipulate the data in your application. 
 
+:::interactive_editor
+
 ```js
 const jsonString = '{"name":"John","age":30,"isAdmin":true}';
 const userObject = JSON.parse(jsonString);
@@ -194,6 +236,8 @@ const userObject = JSON.parse(jsonString);
 console.log(userObject);
 ```
 
+:::
+
 # --assignment--
 
 Review the JavaScript Objects topics and concepts.