DEV Community

Cover image for (Javascript) My learning journey: Spread Operator and REST Pattern
Eric The Coder
Eric The Coder

Posted on • Edited on

6 3

(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)
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs