Objects, Destructuring and Spread

Introduction

Modern JavaScript has a handful of shortcuts that make working with objects and arrays much shorter and safer. You will see them in almost every codebase.

Destructuring objects

Instead of pulling out properties one by one, unpack them in one line.

The variable names must match the property names. Use city: town to give a different name.

Defaults and function parameters

You can set defaults, and destructure right in a function's parameters.

Destructuring arrays

For arrays, unpack by position.

...rest collects the remaining items. The last example swaps two variables.

Spread: copy and merge

The three dots ... also spread an array or object into another.

Spread makes a shallow copy. The original object is left untouched, which is a good habit: create new data instead of changing old data. Properties that come later win, as age shows.

Optional chaining and nullish coalescing

Reading a property of undefined causes an error. ?. stops safely and returns undefined instead. ?? gives a fallback only when the value is null or undefined.

Note the difference: || replaces any falsy value (including 0), while ?? only replaces null and undefined.

JSON

JSON is a text format for data, used by almost every web service. Two functions convert between objects and JSON text.

Try it yourself

Write a function fullName({ first, last, title }) that returns the title (if there is one), the first name and the last name. Use a default for title of an empty string, and test it.

Summary

• Destructuring unpacks objects and arrays into variables.
• Spread ... copies and merges without changing the original.
• ?. reads safely, and ?? supplies a fallback for null or undefined.
• JSON.stringify and JSON.parse convert between data and text.