DEV Community

Ray
Ray

Posted on

5

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.

Image description

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,
      },
    },
  },
Enter fullscreen mode Exit fullscreen mode

Use getBooks() to get all books data

const books = getBooks();  
const title = book.title; 
const author = book.author;
Enter fullscreen mode Exit fullscreen mode

Or use getBook(id) to get a specific data

const book = getBook(1);
Enter fullscreen mode Exit fullscreen mode

Image description

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;
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

Or:

const [primaryGenre, secondaryGenre] = genres;
Enter fullscreen mode Exit fullscreen mode

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].

AWS Q Developer image

Your AI Code Assistant

Implement features, document your code, or refactor your projects.
Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ β€’ β€’ Edited

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" ]
Enter fullscreen mode Exit fullscreen mode

You can also do more interesting stuff with destructuring:

let {length, 2:thirdLetter} = "Surprise" 
console.log(length, thirdLetter)  // 8, "r"
Enter fullscreen mode Exit fullscreen mode
Collapse
 
kyrierui profile image
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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay