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

Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>

curriculum/challenges/english/blocks/lecture-working-with-arrays/6732aedd2d92e30923b9bc24.md

@@ -5,12 +5,14 @@ challengeType: 19
 dashedName: what-is-array-destructuring-and-how-does-it-work
 ---
 
-# --description--
+# --interactive--
 
 Array destructuring is a feature in JavaScript that allows you to extract values from arrays and assign them to variables in a more concise and readable way. It provides a convenient syntax for unpacking array elements into distinct variables. 
 
 This technique is particularly useful when working with arrays and functions that return multiple values. Here is an example of using array destructuring: 
 
+:::interactive_editor
+
 ```js
 let fruits = ["apple", "banana", "orange"];
 
@@ -21,10 +23,14 @@ console.log(second); // "banana"
 console.log(third);  // "orange"
 ```
 
+:::
+
 In this example, we have an array called `fruits` with three elements. Using array destructuring, we assign the first element to the variable `first`, the second element to `second`, and the third element to `third`. This allows us to easily access individual elements of the array without using index notation. 
 
 Here is what it would look like if you accessed each of those elements by their index instead of using array destructuring:
 
+:::interactive_editor
+
 ```js
 const fruits = ["apple", "banana", "orange"];
 
@@ -37,20 +43,28 @@ console.log(second); // "banana"
 console.log(third); // "orange"
 ```
 
+:::
+
 Array destructuring also allows you to skip elements you're not interested in by using commas. For instance:
 
+:::interactive_editor
+
 ```js
 let colors = ["red", "green", "blue", "yellow"];
 let [firstColor, , thirdColor] = colors;
 
-console.log(firstColor); // Output: "red"
-console.log(thirdColor); // Output: "blue"
+console.log(firstColor); // "red"
+console.log(thirdColor); // "blue"
 ```
 
+:::
+
 In this example, we skip the second element of the `colors` array by using an extra comma. This assigns `red` to `firstColor` and `blue` to `thirdColor`, effectively ignoring `green`.
 
 Another powerful feature of array destructuring is the ability to use default values. If the array has fewer elements than the variables you're trying to assign, you can provide default values:
 
+:::interactive_editor
+
 ```js
 let numbers = [1, 2];
 let [a, b, c = 3] = numbers;
@@ -60,10 +74,14 @@ console.log(b); // 2
 console.log(c); // 3
 ```
 
+:::
+
 Here, we assign default value `3` to `c` because the `numbers` array doesn't have a third element.
 
 Now, let's discuss the rest syntax, denoted by three dots (`...`). It allows you to capture the remaining elements of an array that haven’t been destructured into a new array. Here's how it works:
 
+:::interactive_editor
+
 ```js
 let fruits = ["apple", "banana", "orange", "mango", "kiwi"];
 let [first, second, ...rest] = fruits;
@@ -73,6 +91,8 @@ console.log(second); // "banana"
 console.log(rest);   // ["orange", "mango", "kiwi"]
 ```
 
+:::
+
 In this example, `first` and `second` capture the first two elements of the `fruits` array, and `rest` captures all remaining elements as a new array. The rest syntax must be the last element in the destructuring pattern.
 
 Array destructuring is a powerful feature that can make your code more concise and easier to read. It's especially useful when working with arrays, and when you need to extract specific elements from an array.