exec: explain-the-concept-of-the-spread-operator-and-its-uses

Author: tahachm

questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.mdx

@@ -6,22 +6,26 @@ title: Explain the concept of the spread operator and its uses
 
 The spread operator (`...`) in JavaScript allows you to expand elements of an iterable (like an array or object) into individual elements. It is commonly used for copying arrays or objects, merging arrays or objects, and passing elements of an array as arguments to a function.
 
-```js
+```js live
 // Copying an array
 const arr1 = [1, 2, 3];
 const arr2 = [...arr1];
+console.log(arr2); // Output: [1, 2, 3]
 
 // Merging arrays
 const arr3 = [4, 5, 6];
 const mergedArray = [...arr1, ...arr3];
+console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
 
 // Copying an object
 const obj1 = { a: 1, b: 2 };
 const obj2 = { ...obj1 };
+console.log(obj2); // Output: { a: 1, b: 2 }
 
 // Merging objects
 const obj3 = { c: 3, d: 4 };
 const mergedObject = { ...obj1, ...obj3 };
+console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
 
 // Passing array elements as function arguments
 const sum = (x, y, z) => x + y + z;
@@ -37,7 +41,7 @@ console.log(sum(...numbers)); // Output: 6
 
 The spread operator can be used to create a shallow copy of an array. This is useful when you want to duplicate an array without affecting the original array.
 
-```js
+```js live
 const arr1 = [1, 2, 3];
 const arr2 = [...arr1];
 console.log(arr2); // Output: [1, 2, 3]
@@ -47,7 +51,7 @@ console.log(arr2); // Output: [1, 2, 3]
 
 You can use the spread operator to merge multiple arrays into one. This is a concise and readable way to combine arrays.
 
-```js
+```js live
 const arr1 = [1, 2, 3];
 const arr3 = [4, 5, 6];
 const mergedArray = [...arr1, ...arr3];
@@ -58,7 +62,7 @@ console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
 
 Similar to arrays, the spread operator can be used to create a shallow copy of an object. This is useful for duplicating objects without affecting the original object.
 
-```js
+```js live
 const obj1 = { a: 1, b: 2 };
 const obj2 = { ...obj1 };
 console.log(obj2); // Output: { a: 1, b: 2 }
@@ -68,7 +72,7 @@ console.log(obj2); // Output: { a: 1, b: 2 }
 
 The spread operator can also be used to merge multiple objects into one. This is particularly useful for combining properties from different objects.
 
-```js
+```js live
 const obj1 = { a: 1, b: 2 };
 const obj3 = { c: 3, d: 4 };
 const mergedObject = { ...obj1, ...obj3 };
@@ -79,7 +83,7 @@ console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
 
 The spread operator allows you to pass elements of an array as individual arguments to a function. This is useful for functions that accept multiple arguments.
 
-```js
+```js live
 const sum = (x, y, z) => x + y + z;
 const numbers = [1, 2, 3];
 console.log(sum(...numbers)); // Output: 6