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

An essential point to remember a training course is to take notes and discuss the subject with others. That's why every day I will post on dev.to the concepts and notes that I learned the day before.

If you want to miss nothing click follow and you are welcome to comments and discuss with me.

Without further ado here is a summary of my notes for today.

Spread Operator

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 pattern

// 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)
}