Differences

This shows you the differences between two versions of the page.

--- java-script:rest-vs-spread-operator [2023/08/10 01:51] – created odefta
+++ java-script:rest-vs-spread-operator [2023/08/10 16:08] (current) – odefta
@@ Line 1: / Line 1: @@
 ====== Rest vs Spread operator ======
-The **rest operator (...)** and the **spread operator (...)** in JavaScript are written the same way but are used for two different purposes.
+The **rest operator (...)** and the **spread operator (...)** in JavaScript are written the same way but are used for two different purposes. \\
+Their usage depends on the context, and they perform opposite operations.
 <note important>
-**Rest Operator**: Collects multiple elements into an array.
+**Rest Operator**: Collects multiple elements into an array. \\
 **Spread Operator**: Spreads the elements of an iterable out into individual elements.
 </note>
@@ Line 10: / Line 11: @@
 ===== Rest operator (...) =====
-The rest operator is used to **collect all remaining iterable elements into an array**. This can be particularly useful in function signatures. \\
+The rest operator is used to **collect all remaining iterable elements into an array or object**.
+==== Usage in function arguments ====
+This can be particularly useful in function signatures. \\
 Example:
@@ Line 21: / Line 26: @@
 </code>
 Here, the **...numbers** argument takes all passed numbers and puts them into an **array** called **numbers**.
+<note important>
+Rest function parameter should be the last one in the list:
+<code javascript>
+function validFunction(param1, param2, ...rest) {
+  console.log(param1, param2, rest);
+}
+</code>
+</note>
+<note important>
+A function cannot have multiple rest parameters.
+</note>
+==== Destructuring Arrays ====
+You can use the rest operator to collect the rest of the elements into an array when destructuring:
+<code javascript>
+const [first, second, ...rest] = [1, 2, 3, 4, 5];
+console.log(rest); // Output: [3, 4, 5]
+</code>
+==== Destructuring Objects ====
+Similarly, when destructuring objects, the rest operator can collect the remaining own enumerable property keys into a new object:
+<code javascript>
+const {a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4};
+console.log(rest); // Output: {c: 3, d: 4}
+</code>
+==== Clone Objects and Arrays ====
+It's a handy way to create a shallow copy of an object or an array.
+<code javascript>
+const obj = {a: 1, b: 2};
+const clonedObj = {...obj}; // Output: {a: 1, b: 2}
+</code>
 ===== Spread operator (...) =====