Faster prototyping with javascript’s “Destructuring Assignment” syntax

While chatting with my trusty programming partner GPT4, I learned about a newer, faster way to pass data between functions called “destructuring syntax”.

Here’s how I used to declare variables from objects passed into functions:

function fetchHoroscope(horoscopeUrlObj) {
  const url = horoscopeUrlObj.url;
  const selector = horoscopeUrlObj.selector;
  // ...
}

Notice how at the top of the function I have to declare which variables I want to use from the object?

Now compare that with how to do it with destructuring assignment:

function fetchHoroscope({ url, selector }) {
  // ...
}

Pretty slick, right? In the above example, I’m both selecting and declaring the variables I want to use, all in one line. Think of the minutes of time-savings!