The thing to remember here is this: The less code you have to write, the fewer places you can make misteaks mistakes.

Ex1: Obj.properties to Individual Variables

SETUP: Let’s say I have the following object - boxObj = { width:1, height:2, length:3 }

GOAL: To have three new variables named width/height/length, each with the values from boxObj{}.

Instead of writing out each variable and property like this:

const width = boxObj.width;
const height = boxObj.height;
const length = boxObj.length;

With destructuring, I can do the exact same thing in only one line:

const { width, height, length } = boxObj;

I know, it looks like a weird messed up object, but it actually is a way to pull the values out. Now, you MUST REMEMBER: THE big caveat in destructuring this way is that the resulting variables *must* be named exactly the same as the object’s property or else you’ll end up with a variable that is undedfined! (I’ll get to changing it…)

Ex2: Add multiple variables into a new Object’s properties

(aka - the reverse of #1)

SETUP: OK! have some variables declared in my scope…

const width = 1;
const length = 3;
const someFunc = (var) => { /*..code...*/ }
const area = someFunc(width,length);
// etc...

GOAL: I want to store these variables as properties in a new object called newObj{}.

The two ‘old’ approaches to defining this object and storing these values:

// 1. Use a bunch of redundant 'key:value' pairs:
let newObj = { width: width, length: length, someFunc: someFunc, area: area };

// 2. Even **_more_** painfully
let newObj = {};
newObj['width'] = width;
newObj['length'] = length; // etc....

But with our new pal Destructuring…you guessed it, we can do the same with less:

const newObj = { width, length, someFunc, area };`

Again, the same caveat applies as Ex1. - The resulting names of the object’s keys/properties are exactly the same as the original variable names.

Renaming Variables & Default Values

There is a way to rename variables as you are destructuring them out of an object{}. By adding a new name after a :, you can change the name of the variable you are importing. Using const {someVal:foo} = someObj; will pull the value of someVal from someObj{}, but add it to scope as a new variable called foo. In fact, the scope won’t even know that someVal ever existed and it will be undefined.

Default-values are a good idea because, [without TypeScript!!!] you are never going to be 100% sure that the {property} you are extracting is named exactly like (or actually being provided by) your source object. To add a default value, as in a function definition, you use an = after the variable declaration.

Code Examples:

/** GIVEN: **/
const sourceObj = { a: '1st', b: '2nd', byTheWay: 'order does not matter', foo: 'bar' };
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

/* Combining new variable names destructured WITH default values */
const { a: alpha = 1, b: beta = 2, doesNotExist: third = 'xyz', foo } = sourceObj;

console.log(alpha); // ⮕ '1st'
console.log(a); // ⮕ undefined - we didn't destructure it as 'a', we pulled it as `alpha`!
console.log(beta); // ⮕ '2nd'
console.log(b); // ⮕ undefined - as above
console.log(third); //  ⮕ 'xyz' - default value because "doesNotExist", um, does not exist
console.log(foo); //  ⮕ 'bar' - Got lucky since we didn't set a default...

Cheers!

❯ ★ ✎ ✦ ✮ ✯ ❂ ⦿ ❯ ★ ✎ ✦ ✮ ✯ ❂ ⦿ ❯ ★ ✎ ✦ ✮ ✯ ❂ ⦿ ❯ ★ ✎ ✦