Skip to content

Commit b13e967

Browse files
SleeplessByteCool-Katt
SleeplessByte
and
Cool-Katt
authored
Concept: object destructuring (#2657)
* Add object-destructuring concept * Update exercise for object-destructuring * Fix boo boo * Update instructions.md --------- Co-authored-by: Cool-Katt <[email protected]>
1 parent 9ea07ed commit b13e967

File tree

13 files changed

+486
-191
lines changed

13 files changed

+486
-191
lines changed

‎concepts/array-destructuring/about.md‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# About
22

3-
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.
3+
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.
44

55
```javascript
66
const frenchNumbers = ['quatre-vingts', 'quatre-vingt-dix', 'cent'];
@@ -14,6 +14,8 @@ french100;
1414
// => 'cent'
1515
```
1616

17+
## Re-assignment
18+
1719
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.
1820

1921
```javascript
@@ -40,6 +42,8 @@ c;
4042
// => 'purple'
4143
```
4244

45+
## Skipping assignment
46+
4347
The syntax allows skipping values when mapping, for example to ignore specific positions in the array.
4448
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.
4549

@@ -53,6 +57,8 @@ streetAddress;
5357
// => "Sunny Lane 523"
5458
```
5559

60+
## Dropping values
61+
5662
The assignment is also not required to use all the values.
5763

5864
```javascript
@@ -65,6 +71,8 @@ lastName;
6571
// => "Noir"
6672
```
6773

74+
## Taking more values than available
75+
6876
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.
6977

7078
```javascript
@@ -84,6 +92,8 @@ fourth;
8492
// => undefined
8593
```
8694

95+
## Default values
96+
8797
The array destructuring assignment can provide _default values_ in case there is none in the source array.
8898

8999
```javascript
@@ -96,4 +106,10 @@ fourth;
96106
// => undefined
97107
```
98108

109+
## Related concepts
110+
111+
[concept:javascript/object-destructuring]()
99112
[concept:javascript/rest-and-spread]()
113+
114+
[mdn-array-destructuring]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
115+
[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‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"blurb": "Object destructuring is a concise way of extracting properties from an object.",
3+
"authors": ["SleeplessByte"],
4+
"contributors": []
5+
}

‎concepts/object-destructuring/about.md‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
# About
2+
3+
Object [destructuring][mdn-object-destructuring] is a concise way of extracting properties from an object.
4+
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.
5+
6+
```javascript
7+
const weather = {
8+
sun: '☀️',
9+
sun_behind_small_cloud: '🌤️',
10+
sun_behind_cloud: '⛅',
11+
sun_behind_large_cloud: '🌥️',
12+
sun_behind_rain_cloud: '🌦️',
13+
cloud: '☁️',
14+
cloud_with_rain: '🌧️',
15+
cloud_with_snow: '🌨️',
16+
cloud_with_lightning: '🌩️',
17+
cloud_with_lightning_and_rain: '⛈️',
18+
};
19+
20+
const { sun, cloud, cloud_with_lightning } = weather;
21+
22+
sun;
23+
// => '☀️'
24+
25+
cloud;
26+
// => '☁️'
27+
28+
cloud_with_lightning;
29+
// => '🌩️'
30+
```
31+
32+
## Renaming in assignment
33+
34+
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:
35+
36+
```javascript
37+
const { sun: sunny, cloud: cloudy, cloud_with_rain: rainy } = weather;
38+
39+
typeof cloud_with_rain;
40+
// => 'undefined'
41+
42+
typeof rainy;
43+
// => 'string'
44+
45+
rainy;
46+
// => 🌧️
47+
```
48+
49+
The assignment is also not required to use all the values.
50+
51+
## Default values
52+
53+
The object destructuring assignment can provide _default values_ in case there is none in the source object:
54+
55+
```javascript
56+
const { sun = '🌞', tornado = '🌪️', cloud_with_snow: snowy = '❄️' } = weather;
57+
58+
sun;
59+
// => '☀️'
60+
61+
tornado;
62+
// => '🌪️'
63+
64+
snowy;
65+
// => '🌨️'
66+
```
67+
68+
The following is observed:
69+
70+
- `sun` has extracted from the object `weather` without replacing it as it is present in the object `weather`,
71+
- `tornado` does not exist in the object `weather`, so the default value was used,
72+
- `cloud_with_snow` was extracted as the variable `snowy`, without replacing it, as `cloud_with_snow` is present in the object `weather`.
73+
74+
## Destructuring function parameters
75+
76+
The `weather` object has a lot of properties.
77+
It is possible to directly extract one or multiple properties from this object when it's passed to a function:
78+
79+
```javascript
80+
function weatherReport({ sun }) {
81+
console.log(sun);
82+
}
83+
84+
weatherReport(sun);
85+
// => '☀️'
86+
```
87+
88+
## Destructuring `for of` iteration
89+
90+
When iterating over an `array` (or other iterable), and the items are objects, it is possible to destructure inside the `for (...) of iterable` statement:
91+
92+
```javascript
93+
const { sun: sunny, cloud: cloudy, cloud_with_rain: rainy } = weather;
94+
95+
const prediction = [
96+
{
97+
chance: 0.8,
98+
weather: sunny,
99+
description: 'There is a 80% chance it will remain sunny.',
100+
},
101+
{
102+
chance: 0.15,
103+
weather: cloudy,
104+
description:
105+
'There is a 15% chance the clouds will keep the sun from poking through.',
106+
},
107+
{
108+
chance: 0.05,
109+
weather: rainy,
110+
description: 'There is a small chance of rain.',
111+
},
112+
];
113+
114+
for (const { weather: symbol, description } of prediction) {
115+
console.log(`${symbol}: ${description}`);
116+
}
117+
118+
// '☀️: There is a 80% chance it will remain sunny.'
119+
// '☁️: There is a 15% chance the clouds will keep the sun from poking through.'
120+
// '🌧️: There is a small chance of rain.'
121+
```
122+
123+
## Related concepts
124+
125+
[concept:javascript/array-destructuring]()
126+
[concept:javascript/rest-and-spread]()
127+
128+
[mdn-object-destructuring]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring#object_destructuring
129+
[mdn-object-literal]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

‎concepts/object-destructuring/introduction.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Introduction
2+
3+
JavaScript's object destructuring syntax is a concise way to extract properties from an object and assign them to distinct variables.
4+
5+
In this example, weather symbols are extracted from the object `weather`:
6+
7+
```javascript
8+
const weather = {
9+
sun: '☀️',
10+
sun_behind_small_cloud: '🌤️',
11+
sun_behind_cloud: '⛅',
12+
sun_behind_large_cloud: '🌥️',
13+
sun_behind_rain_cloud: '🌦️',
14+
cloud: '☁️',
15+
cloud_with_rain: '🌧️',
16+
cloud_with_snow: '🌨️',
17+
cloud_with_lightning: '🌩️',
18+
cloud_with_lightning_and_rain: '⛈️',
19+
};
20+
21+
const { sun, cloud, cloud_with_lightning } = weather;
22+
23+
sun;
24+
// => '☀️'
25+
26+
cloud;
27+
// => '☁️'
28+
29+
cloud_with_lightning;
30+
// => '🌩️'
31+
```

‎concepts/object-destructuring/links.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
[
2+
{
3+
"url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring#object_destructuring",
4+
"description": "MDN: Object destructuring"
5+
},
6+
{
7+
"url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer",
8+
"description": "MDN: Object initializer (and literals)"
9+
}
10+
]

0 commit comments

Comments
 (0)