Learned about Spread and Rest Operators

03 - Chai aur Javascript/18 - Spread and Rest Operators/01_spread.js

@@ -0,0 +1,91 @@
+// Spread Operator
+
+//  Using Spread with Array
+
+// Copy Array
+console.log("------------Copy Array--------------");
+const originalArr = [1,2,3,4]
+console.log(`Original Array : ${originalArr}`)
+const copiedArr = [...originalArr]
+
+console.log(`Copied Array: ${copiedArr}`)
+
+
+// Concatenating Arrays:
+console.log('------------Concatenating Array--------------')
+const arr1 = [12,34,45]
+const arr2 = [423,123,34543]
+console.log(`Array 1: ${arr1} and Array 2: ${arr2}`)
+
+const concatenatedArr = [...arr1, ...arr2]
+console.log(`Conatenated Arr: ${concatenatedArr}`)
+
+
+// Adding Elements to Array
+console.log('-------------Adding Elements to Array-----------')
+const naturalNumber = [1,2,3,4,5,6,7,8,9]
+console.log(`Natural Number is ${naturalNumber}`)
+const wholeNumber = [0, ...naturalNumber, 10]
+console.log(`Whole Number is ${wholeNumber}`)
+
+
+// Spread with Objects
+
+// Copying Object
+console.log('----------Copying Object-------------')
+const originalObj = {
+    a: 1,
+    b: 2,
+    c: 3
+}
+console.log(originalObj); // { a: 1, b: 2, c: 3 }
+const copiedObj = {...originalObj}
+console.log(copiedObj); // { a: 1, b: 2, c: 3 }
+
+// Merging Object
+console.log('--------------Merging Object---------------')
+const obj1 = {
+    a:1,
+    b:2
+}
+const obj2 = {
+    b:3, c: 4
+}
+const mergedObj = {...obj1, ...obj2}
+console.log(mergedObj); // { a: 1, b: 3, c: 4 }
+// Note: If there are properties with the same name, the last one will overwrite the previous ones.
+
+
+// Using Spread with Function Calls
+console.log('----------Spread with Function calls----------')
+
+function sum(x,y,z){
+    return x + y + z
+}
+
+const numbers = [12,34,45]
+console.log(sum(...numbers)) //91
+
+// Spread in Function Argument
+console.log("-------------Spread in Function Argument-------------");
+function multiply(multiplier, ...numbers){
+    return numbers.map( (number) => number * multiplier)
+}
+
+const result = multiply(2,3,4,5)
+console.log(result) // [6,8,10]
+
+// Convert String into Array
+console.log('-------------Convert String to Array-------------')
+const str = "Sohail"
+const chars = [...str]
+console.log(chars);
+
+// Shallow Copies Issue
+console.log('-----------Shallow Copies Issue---------------')
+const original = [{a:1, b:12}, {c:21, d:43 }]
+
+const copy = [...original]
+console.log(original)
+copy[0].a = 67
+console.log(original)

03 - Chai aur Javascript/18 - Spread and Rest Operators/02_rest.js

@@ -0,0 +1,103 @@
+// Rest Operator
+
+
+// Handling Variable Number of Arguments
+function sum(...numbers){
+    return numbers.reduce((acc, num) => acc + num, 0)
+}
+
+console.log(sum(12,34,45,65)) // 156
+console.log(sum(1,2,3,4,5,6,7,8,9,10)) // 55
+// Here, ...numbers collects all the arguments into an array called numbers.
+
+
+// Using Rest with other parameters
+
+function multiply(factor, ...nums){
+    return nums.map((num) => num * factor)
+}
+
+console.log(multiply(2,1,2,3,4,5)) // [2,4,6,8,10]
+
+
+// Using Rest with Destructing
+
+// Destructing Arrays
+
+const [first, second, ...restArray] = [10,20,30,40,50,60]
+console.log(first) // 10
+console.log(second) // 20
+console.log(restArray) // [30,40,50,60]
+
+// Destructing Objects
+const person = {
+    name: 'Sohail',
+    age: 21,
+    dob: "28/09/2002",
+    gender: 'Male'
+}
+
+const {name, ...restObj} = person;
+console.log(name) // Sohail
+console.log(restObj) // { age: 21, dob: '28/09/2002', gender: 'Male' }
+
+
+// Combining Rest with Spread
+function mergeArrays(arr1, ...arr2){ // rest
+    return [...arr1, ...arr2] // spread
+}
+
+const merged = mergeArrays([1,2], 3,4,5)
+console.log(merged) //[ 1, 2, 3, 4, 5 ]
+
+
+// Rest Operator with default parameters:
+function greet(message = "Hello", ...names){
+    return names.map((name) => `${message}, ${name}`)
+}
+
+console.log(greet("Hii", "Sohail", "Salman")) // [ 'Hii, Sohail', 'Hii, Salman' ]
+
+console.log(greet(undefined, "Sharukh", "Salman")) // [ 'Hello, Sharukh', 'Hello, Salman' ]
+
+
+// Dynamic Functions Arguments
+
+function logALl(...args) {
+    args.forEach((arg, index) => {
+        console.log(`Argument ${index}:`, arg);
+    })
+}
+
+logALl(`first`, 42, true, {key: 'value'}, [12,23])
+// Argument 0: first
+// Argument 1: 42
+// Argument 2: true
+// Argument 3: { key: 'value' }
+// Argument 4: [ 12, 23 ]
+
+// -----------------------------------
+// Common Mistakes
+
+// 1. Position of Rest Parameters
+
+// Incorrect: function example(...nums, last){}
+
+// Correct:
+function example(first, ...rest){
+    console.log(rest)
+}
+
+// 2. Shallow Copy in Destructuring
+
+const obj = {
+    a: 1,
+    b: {
+        c: 2
+    }
+}
+
+const {a, ...rest1} = obj
+console.log(obj.b) // 2
+rest1.b.c = 20
+console.log(obj.b) // 20