Destructuring in JS

Firstly thanks for reading Ray's React Learning Notes, a React course I purchased from Udemy to document what I've learnt.
Link to the full course:
https://www.udemy.com/course/the-ultimate-react-course/learn/lecture/37350446#overview

Thanks again to Udemy for the high-quality instructional content.

In this project, I am learning how to use one basic tool in VScode: Quokka.js

This plugin can easily to found in the VScode extension store.

Quokka.js is used to quickly create JavaScript / TypeScript prototypes. It's easy to run JS files in VScode and helps to troubleshoot bugs.

to run it just sample type: >quokka start at VScode command palette. Then click the 'Start on current file'

It Very important is that he can return the results of the current code in a timely manner in the terminal on the left and below. This is very useful for me to start learning React.

Destructuring

Destructuring is getting data out of an object or Array.

A simple data structure about books is used here:

const data = [
  {
    id: 1,
    title: "The Lord of the Rings",
    publicationDate: "1954-07-29",
    author: "J. R. R. Tolkien",
    genres: [
      "fantasy",
      "high-fantasy",
      "adventure",
      "fiction",
      "novels",
      "literature",
    ],
    hasMovieAdaptation: true,
    pages: 1216,
    translations: {
      spanish: "El señor de los anillos",
      chinese: "魔戒",
      french: "Le Seigneur des anneaux",
    },
    reviews: {
      goodreads: {
        rating: 4.52,
        ratingsCount: 630994,
        reviewsCount: 13417,
      },
      librarything: {
        rating: 4.53,
        ratingsCount: 47166,
        reviewsCount: 452,
      },
    },
  },

Use getBooks() to get all books data

const books = getBooks();  
const title = book.title; 
const author = book.author;

Or use getBook(id) to get a specific data

const book = getBook(1);

There are many other elements in the book object such as author, name, etc. We can use Destructuring to create them all at once.

const { title, author, pages, publicationDate, genres, hasMovieAdaptation } = book;

this way you can get the object in the book. This puts the elements of the object together. Passed with console.log.

A similar approach can be used for elements in book, except for book:

const primaryGenre = genres[0];
const secondaryGenre = genres[1];

Or:

const [primaryGenre, secondaryGenre] = genres;

So we can use ourselves to create an array structure, in a specific location to go to the data we want, similar to the use of [1].

Comments

[Jon Randy 🎖️]

Destructuring is getting data out of an object or Array

Not really - it would be more correct to say an object or iterable - since you can destructure any iterable type - not just arrays... like strings for example:

let [a, b, ...c] = "Hello"
console.log(a, b, c)  // "H", "e", [ "l", "l", "o" ]

You can also do more interesting stuff with destructuring:

let {length, 2:thirdLetter} = "Surprise" 
console.log(length, thirdLetter)  // 8, "r"

[Ray]

Wow! Thank you so much for the explanation! Turns out Destructuring is useful for more than that!
I will continue to learn and update what I have learnt.