(Javascript) My learning journey: Spread Operator and REST Pattern

const names = ['Mike', 'Paul', 'John'] // use spread operator to unpack array const newNames = ['Jack', ...names, 'David'] // ['Jack', 'Mike', 'Paul', 'John', 'David'] // use spread operator to destructing // Spread operator can be use everywhere we will use value separated by comma console.log(names) // ['Mike', 'Paul', 'John'] console.log(...names) // Mike Paul John // Spread operator to copy array const copyNames = [...names] // Join 2 arrays const numbers1 = [1, 2, 3] const numbers2 = [4, 5, 6] const allNumbers = [...numbers1, ...numbers2] // Spread operator can be use on all iterables // Iterables: array, strings maps and sets. const name = 'Mike' const letters = [...name] // ['M', 'i', 'k', 'e'] // Spread operator for function parameters numbers = [1, 2, 3] const sumNumbers = function(num1, num2, num3) { return num1 + num2 + num3 + num4 } // regular way sumNumbers(numbers[0], numbers[1], numbers[2]) // Spread operator sumNumbers(...numbers) // spread operator on object const person = { firstName: 'Mike', lastName: 'Taylor' } // Copy object by value (instead of by reference) const newPerson = {...person} // Extend by value const customer = {...person, creditLimit: 1000) 

// REST = same as spread but on the left side of = operator const [num1, num2, ...others] = [1, 2, 3, 4, 5] console.log(num1, num2, others) // 1, 2, [3, 4, 5] // work the same with object const person = { firstName: 'Mike', lastName: 'Taylor', age = 25 } const { age, ...personName } = person // personName will collect the "rest" of the not use properties console.log(age, personName) // 25, { firstName: 'Mike', lastName: 'Taylor' } // Use REST pattern to catch all functions parameters const sumNumbers(...numbers) { console.log(numbers); } // REST pack all number into an array sumNumbers(1, 2) // [1, 2] sumNumbers(1, 2, 3) // [1, 2, 3] sumNumbers(1, 2, 3, 4) // [1, 2, 3, 4] // Spread destructing before REST function will restructing const numbers = [1, 2, 3, 4] sumNumbers(...numbers) // Another REST use case. Take this example: const displayText(mainText, option1, option2, option3) { console.log(mainText, option1, option2, option3) } // REST can be use to get all other parameters const displayText(mainText, ...options) { console.log(mainText, options) }