Objects, arrays, destructuring and spread
How to group data into objects and arrays, unpack it with destructuring, and copy it with the spread syntax.
Real apps deal with real data: a book has a title, an author and a status, and a reading list has many books. JavaScript stores this kind of data in objects and arrays.
React code also uses two pieces of syntax on almost every line: destructuring, to unpack data, and spread, to copy it. They look strange at first, so this lesson takes them slowly.
Objects
An object groups related values under names. Each name-value pair is a property. You write objects with curly braces and read properties with a dot.
This book object has the exact shape the Reading List project will use from Day 2: an id, a title, an author and a status that is 'want', 'reading' or 'done'.
Arrays
An array is an ordered list of values, written with square brackets. Each value has a position called an index, which starts at 0, not 1.
An array of objects, like books above, is the most common shape of data in a React app. Tomorrow you will turn an array like this into a list on the screen.
Destructuring
Destructuring is a short way to pull values out of an object or array into their own variables.
Object destructuring matches by name: const { title } = book looks for a property called title. Array destructuring matches by position: the first variable gets the first item.
Destructuring in function parameters
You can also destructure right inside a function's parameter list. This is how React components receive their inputs, so it is worth getting comfortable with now.
When you see function BookCard({ title, author }) on Day 2, that is exactly this: a function that receives one object and unpacks two properties from it.
Spread
The spread syntax is three dots, .... It "spreads out" the contents of an array or object into a new one. Its main job in React is making copies.
In { ...book, status: 'reading' }, JavaScript first copies every property of book, then sets status. When the same property appears twice, the later one wins, so the order matters.
Deep diveOptional chaining with ?.
Sometimes a value might be missing. Reading a property of undefined throws an error, so book.rating.stars crashes when rating is missing. Optional chaining with ?. stops early and returns undefined instead: book.rating?.stars. You will not need it often this week, but you will see it in other people's code.
Finish a book
You have a book object and a shelf array. Without changing either of them:
- Create
finished, a copy ofbookwithstatusset to'done'and a newratingof5. - Create
newShelf, a copy ofshelfwith'Beloved'added at the start. - Destructure
titleandratingfromfinishedand log them.
Show solution
const finished = { ...book, status: 'done', rating: 5 };
const newShelf = ['Beloved', ...shelf];
const { title, rating } = finished;
console.log(title, rating); // 'Dune' 5To add an item at the start, put it before the spread: ['Beloved', ...shelf]. The original book and shelf are untouched, so the last line still logs 'reading' 2.
What does this log? const a = { x: 1, y: 2 }; const b = { ...a, x: 9 }; console.log(a.x, b.x);
Which line pulls the author out of a book object into its own variable?
Day 1 progress