Using emojis to understand JS Spread and Destructuring

This is in a quest to explain things to a five-year-old(myself). And what better way than to have some pictures than text.

Spread (…)

Prefixing an array, string, or an object with spread(...) when calling a function or as part of an assignment will expand the array elements, in case of object into key-value pairs.

Array example

Object example

Destructuring

Destructuring isn’t really related or similar to spread but just an easy way of extracting values from arrays and objects into variables.

Array example

Object example

There are so many different ways you can use destructuring, but the information is better retained if it is gathered in steps. I hope this is a simpler start for getting your head around these concepts.

Now, go fix some bugs!