Understand destructuring, rest parameters, and spread syntax in JavaScript

Introduction

Many new features for working with arrays and objects have been introduced to the JavaScript language since the 2015 edition of the ECMAScript specification. Some of the notable features you will learn about in this article are destructuring, rest parameters, and spread syntax.

These features provide more direct ways to access members of an array or object, and can make working with these data structures faster and more concise.

In this article, you will learn how to destructure objects and arrays, how to use the spread operator to unpack objects and arrays, and how to use rest parameters in function calls.

Destructuring

Destructuring assignment is a syntax that allows you to assign object properties or array elements to variables.

Object Destructuring

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

Traditional approach:

const id = note.id
const title = note.title
const date = note.date

Using destructuring:

const { id, title, date } = note

Renaming Variables

const { id: noteId, title, date } = note

Nested Object Destructuring

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
}

const {
  id,
  title,
  date,
  author: { firstName, lastName },
} = note

Destructuring Primitive Values

const { length } = 'A string'
console.log(length)

Array Destructuring

const date = ['1970', '12', '01']

const [year, month, day] = date

Skipping Values

const [year, , day] = date

Nested Arrays

const nestedArray = [1, 2, [3, 4], 5]
const [one, two, [three, four], five] = nestedArray

Spread Syntax (...)

Spread syntax allows you to unpack iterables such as arrays and objects.

Spread with Arrays

const tools = ['hammer', 'screwdriver']
const otherTools = ['wrench', 'saw']

const allTools = [...tools, ...otherTools]

Immutability Example

const users = [
  { id: 1, name: 'Ben' },
  { id: 2, name: 'Leslie' },
]

const newUser = { id: 3, name: 'Ron' }
const updatedUsers = [...users, newUser]

Spread with Objects

const originalObject = { enabled: true, darkMode: false }
const secondObject = { ...originalObject }

Nested Object Update

const updatedUser = {
  ...user,
  organization: {
    ...user.organization,
    position: 'Director',
  },
}

Rest Parameters

Rest parameters collect multiple arguments into an array.

function restTest(...args) {
  console.log(args)
}

Rest with Other Parameters

function restTest(one, two, ...args) {
  console.log(one)
  console.log(two)
  console.log(args)
}

Rest in Destructuring

const [firstTool, ...rest] = ['hammer', 'screwdriver', 'wrench']

const { isLoggedIn, ...rest } = { id: 1, name: 'Ben', isLoggedIn: true }

Conclusion

• Destructuring creates variables from arrays and objects
• Spread syntax unpacks iterables and objects
• Rest parameters collect remaining values into arrays

These JavaScript features help keep your code clean, concise, and easy to maintain.