Concept: object destructuring

concepts/array-destructuring/about.md

@@ -1,6 +1,6 @@
 # About
 
-Array [destructuring assignment][array_destructuring_docs] is a concise way of extracting values from an array. Its syntax is similar to an [array literal][array_literal_resource] expression, but on the left-hand side of the assignment instead of the right.
+Array [destructuring assignment][mdn-array-destructuring] is a concise way of extracting values from an array. Its syntax is similar to an [array literal][mdn-array-literal] expression, but on the left-hand side of the assignment instead of the right.
 
 ```javascript
 const frenchNumbers = ['quatre-vingts', 'quatre-vingt-dix', 'cent'];
@@ -14,6 +14,8 @@ french100;
 // => 'cent'
 ```
 
+## Re-assignment
+
 Because variables are mapped to values in the array by position, destructuring syntax can be used to assign or re-assign multiple variables in a single expression.
 
 ```javascript
@@ -40,6 +42,8 @@ c;
 // => 'purple'
 ```
 
+## Skipping assignment
+
 The syntax allows skipping values when mapping, for example to ignore specific positions in the array.
 In the example below, imagine we have a `getUserInfo` function that returns an array containing a user's first name, last name, and street address.
 
@@ -53,6 +57,8 @@ streetAddress;
 // => "Sunny Lane 523"
 ```
 
+## Dropping values
+
 The assignment is also not required to use all the values.
 
 ```javascript
@@ -65,6 +71,8 @@ lastName;
 // => "Noir"
 ```
 
+## Taking more values than available
+
 It's even possible to extract _more_ values than the array contains; the leftover variables will be assigned `undefined`. This may be useful when the amount of values isn't known ahead of time.
 
 ```javascript
@@ -84,6 +92,8 @@ fourth;
 // => undefined
 ```
 
+## Default values
+
 The array destructuring assignment can provide _default values_ in case there is none in the source array.
 
 ```javascript
@@ -96,4 +106,10 @@ fourth;
 // => undefined
 ```
 
+## Related concepts
+
+[concept:javascript/object-destructuring]()
 [concept:javascript/rest-and-spread]()
+
+[mdn-array-destructuring]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+[mdn-array-literal]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Creating_an_array

concepts/object-destructuring/.meta/config.json

@@ -0,0 +1,5 @@
+{
+  "blurb": "Object destructuring is a concise way of extracting properties from an object.",
+  "authors": ["SleeplessByte"],
+  "contributors": []
+}

concepts/object-destructuring/about.md

@@ -0,0 +1,129 @@
+# About
+
+Object [destructuring][mdn-object-destructuring] is a concise way of extracting properties from an object.
+Its syntax is similar to an [object literal][mdn-object-literal] expression, but on the left-hand side of the assignment instead of the right.
+
+```javascript
+const weather = {
+  sun: '☀️',
+  sun_behind_small_cloud: '🌤️',
+  sun_behind_cloud: '⛅',
+  sun_behind_large_cloud: '🌥️',
+  sun_behind_rain_cloud: '🌦️',
+  cloud: '☁️',
+  cloud_with_rain: '🌧️',
+  cloud_with_snow: '🌨️',
+  cloud_with_lightning: '🌩️',
+  cloud_with_lightning_and_rain: '⛈️',
+};
+
+const { sun, cloud, cloud_with_lightning } = weather;
+
+sun;
+// => '☀️'
+
+cloud;
+// => '☁️'
+
+cloud_with_lightning;
+// => '🌩️'
+```
+
+## Renaming in assignment
+
+The syntax can extract the properties by their key like `sun`, `cloud`, and `cloud_with_lightning`, but can also pick a different name for the variable:
+
+```javascript
+const { sun: sunny, cloud: cloudy, cloud_with_rain: rainy } = weather;
+
+typeof cloud_with_rain;
+// => 'undefined'
+
+typeof rainy;
+// => 'string'
+
+rainy;
+// => 🌧️
+```
+
+The assignment is also not required to use all the values.
+
+## Default values
+
+The object destructuring assignment can provide _default values_ in case there is none in the source object:
+
+```javascript
+const { sun = '🌞', tornado = '🌪️', cloud_with_snow: snowy = '❄️' } = weather;
+
+sun;
+// => '☀️'
+
+tornado;
+// => '🌪️'
+
+snowy;
+// => '🌨️'
+```
+
+The following is observed:
+
+- `sun` has extracted from the object `weather` without replacing it as it is present in the object `weather`,
+- `tornado` does not exist in the object `weather`, so the default value was used,
+- `cloud_with_snow` was extracted as the variable `snowy`, without replacing it, as `cloud_with_snow` is present in the object `weather`.
+
+## Destructuring function parameters
+
+The `weather` object has a lot of properties.
+It is possible to directly extract one or multiple properties from this object when it's passed to a function:
+
+```javascript
+function weatherReport({ sun }) {
+  console.log(sun);
+}
+
+weatherReport(sun);
+// => '☀️'
+```
+
+## Destructuring `for of` iteration
+
+When iterating over an `array` (or other iterable), and the items are objects, it is possible to destructure inside the `for (...) of iterable` statement:
+
+```javascript
+const { sun: sunny, cloud: cloudy, cloud_with_rain: rainy } = weather;
+
+const prediction = [
+  {
+    chance: 0.8,
+    weather: sunny,
+    description: 'There is a 80% chance it will remain sunny.',
+  },
+  {
+    chance: 0.15,
+    weather: cloudy,
+    description:
+      'There is a 15% chance the clouds will keep the sun from poking through.',
+  },
+  {
+    chance: 0.05,
+    weather: rainy,
+    description: 'There is a small chance of rain.',
+  },
+];
+
+for (const { weather: symbol, description } of prediction) {
+  console.log(`${symbol}: ${description}`);
+}
+
+//  '☀️: There is a 80% chance it will remain sunny.'
+// '☁️: There is a 15% chance the clouds will keep the sun from poking through.'
+// '🌧️: There is a small chance of rain.'
+```
+
+## Related concepts
+
+[concept:javascript/array-destructuring]()
+[concept:javascript/rest-and-spread]()
+
+[mdn-object-destructuring]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring#object_destructuring
+[mdn-object-literal]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

concepts/object-destructuring/introduction.md

@@ -0,0 +1,31 @@
+# Introduction
+
+JavaScript's object destructuring syntax is a concise way to extract properties from an object and assign them to distinct variables.
+
+In this example, weather symbols are extracted from the object `weather`:
+
+```javascript
+const weather = {
+  sun: '☀️',
+  sun_behind_small_cloud: '🌤️',
+  sun_behind_cloud: '⛅',
+  sun_behind_large_cloud: '🌥️',
+  sun_behind_rain_cloud: '🌦️',
+  cloud: '☁️',
+  cloud_with_rain: '🌧️',
+  cloud_with_snow: '🌨️',
+  cloud_with_lightning: '🌩️',
+  cloud_with_lightning_and_rain: '⛈️',
+};
+
+const { sun, cloud, cloud_with_lightning } = weather;
+
+sun;
+// => '☀️'
+
+cloud;
+// => '☁️'
+
+cloud_with_lightning;
+// => '🌩️'
+```

concepts/object-destructuring/links.json

@@ -0,0 +1,10 @@
+[
+  {
+    "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring#object_destructuring",
+    "description": "MDN: Object destructuring"
+  },
+  {
+    "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer",
+    "description": "MDN: Object initializer (and literals)"
+  }
+]