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)
}
Top comments (0)