When I first started playing around with React, I came across ES6’s destructuring format for declaring and assigning variables. By destructuring format, I mean when you see something like one of these:

It took me a long time to understand what this format did exactly. I think the reason is that when I started googling for answers, I found that most articles would say something to the effect of “the ES6 destructuring updates for JavaScript are awesome, here’s what it looks like,” without explaining what was actually going on.

But one random day, something suddenly clicked for me, and the destruturing format began to make sense. Before this revelation could escape me like a puff of smoke, I grabbed some paper and a pencil and began “doodling” notes furiously. So far, these notes haven’t failed me for a basic explanation of how object destructuring works, so I figured I’d share them in case they are helpful to anyone seeing this formatting for the first time and wrestling with it. Hope they help.