Introduction

Many new features for working with arrays and objects have been made available to the JavaScript language since the 2015 Edition of the ECMAScript specification. A few of the notable ones that you will learn in this article are destructuring, rest parameters, and spread syntax. These features provide more direct ways of accessing the members of an array or an object, and can make working with these data structures quicker and more succinct.

Many other languages do not have corresponding syntax for destructuring, rest parameters, and spread, so these features may have a learning curve both for new JavaScript developers and those coming from another language. 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 items as variables. This can greatly reduce the lines of code necessary to manipulate data in these structures. There are two types of destructuring: Object destructuring and Array destructuring.

Object Destructuring

Object destructuring allows you to create new variables using an object property as the value.

Consider this example, an object that represents a note with an id, title, and date:

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

Traditionally, if you wanted to create a new variable for each property, you would have to assign each variable individually, with a lot of repetition:

// Create variables from the Object properties
const id = note.id
const title = note.title
const date = note.date

With object destructuring, this can all be done in one line. By surrounding each variable in curly brackets {}, JavaScript will create new variables from each property with the same name:

// Destructure properties into variables
const { id, title, date } = note

Now, [**console.log()**](https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console#working-in-the-console) the new variables:

console.log(id)
console.log(title)
console.log(date)

#javascript #fundamentals