You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/05-data-types/09-destructuring-assignment/article.md
+17-17Lines changed: 17 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,9 +2,9 @@
2
2
3
3
The two most used data structures in JavaScript are `Object` and `Array`.
4
4
5
-
Objects allow to pack many pieces of information into a single entity and arrays allow to store ordered collections. So we can make an object or an array and handle it as a single thing, maybe pass to a function call.
5
+
Objects allow us to pack many pieces of information into a single entity and arrays allow us to store ordered collections. So we can make an object or an array and handle it as a single entity, or maybe pass it to a function call.
6
6
7
-
*Destructuring assignment* is a special syntax that allows to "unpack" arrays or objects into a bunch of variables, as sometimes they are more convenient. Destructuring also works great with complex functions that have a lot of parameters, default values, and soon we'll see how these are handled too.
7
+
*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes they are more convenient. Destructuring also works great with complex functions that have a lot of parameters, default values, and soon we'll see how these are handled too.
````smart header="\"Destructuring\" does not mean \"destructive\""
37
-
That's called "destructuring assignment", because it "destructurizes" by copying items into variables. But the array itself is not modified.
37
+
It's called "destructuring assignment", because it "destructurizes" by copying items into variables. But the array itself is not modified.
38
38
39
-
That's just a shorter way to write:
39
+
It's just a shorter way to write:
40
40
```js
41
41
// let [firstName, surname] = arr;
42
42
let firstName = arr[0];
@@ -56,12 +56,12 @@ let [, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
56
56
alert( title ); // Consul
57
57
```
58
58
59
-
In the code above, the first and second elements of the array are skipped, the third one is assigned to `title`, and the rest is also skipped.
59
+
In the code above, although the first and second elements of the array are skipped, the third one is assigned to `title`, and the rest are also skipped.
60
60
````
61
61
62
62
````smart header="Works with any iterable on the right-side"
63
63
64
-
...Actually, we can use it with any iterable, not only an array:
64
+
...Actually, we can use it with any iterable, not only arrays:
65
65
66
66
```js
67
67
let [a, b, c] = "abc"; // ["a", "b", "c"]
@@ -87,7 +87,7 @@ alert(user.name); // Ilya
87
87
88
88
````smart header="Looping with .entries()"
89
89
90
-
In the previous chapter we saw [Object.entries(obj)](mdn:js/Object/entries) method.
90
+
In the previous chapter we saw the [Object.entries(obj)](mdn:js/Object/entries) method.
91
91
92
92
We can use it with destructuring to loop over keys-and-values of an object:
93
93
@@ -121,7 +121,7 @@ for(let [key, value] of user.entries()) {
121
121
````
122
122
### The rest '...'
123
123
124
-
If we want not just to get first values, but also to gather all that follows -- we can add one more parameter that gets "the rest" using the three dots `"..."`:
124
+
If we want not just to get first values, but also to gather all that follows -- we can add one more parameter that gets "the rest" using three dots `"..."`:
125
125
126
126
```js run
127
127
let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*];
@@ -136,11 +136,11 @@ alert(rest.length); // 2
136
136
*/!*
137
137
```
138
138
139
-
The value of `rest` is the array of the remaining array elements. We can use any other variable name in place of `rest`, just make sure it has three dots before it and goes the last.
139
+
The value of `rest` is the array of the remaining array elements. We can use any other variable name in place of `rest`, just make sure it has three dots before it and goes last in the destructuring assignmemnt.
140
140
141
141
### Default values
142
142
143
-
If there are fewer values in the array than variables in the assignment -- there will be no error, absent values are considered undefined:
143
+
If there are fewer values in the array than variables in the assignment, there will be no error. Absent values are considered undefined:
Default values can be more complex expressions or even function calls. They are evaluated only if the value is not provided.
166
166
167
-
For instance, here we use `prompt` function for two defaults. But it will only run only for the missing one:
167
+
For instance, here we use the `prompt` function for two defaults. But it will run only for the missing one:
168
168
169
169
```js run
170
170
// runs only prompt for surname
@@ -186,7 +186,7 @@ The basic syntax is:
186
186
let {var1, var2} = {var1:…, var2…}
187
187
```
188
188
189
-
We have an existing object at the right side, that we want to split into variables. To the left side contains a "pattern" for corresponding properties. In the simple case that's a list of variable names in `{...}`.
189
+
We have an existing object at the right side, that we want to split into variables. The left side contains a "pattern" for corresponding properties. In the simple case, that's a list of variable names in `{...}`.
190
190
191
191
For instance:
192
192
@@ -206,7 +206,7 @@ alert(width); // 100
206
206
alert(height); // 200
207
207
```
208
208
209
-
Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables. The order does not matter, that works too:
209
+
Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables. The order does not matter. This works too:
210
210
211
211
```js
212
212
// changed the order of properties in let {...}
@@ -258,7 +258,7 @@ alert(height); // 200
258
258
259
259
Just like with arrays or function parameters, default values can be any expressions or even function calls. They will be evaluated if the value is not provided.
260
260
261
-
The code below asks for width, but not about the title.
261
+
The code below asks for width, but not the title.
262
262
263
263
```js run
264
264
let options = {
@@ -391,7 +391,7 @@ Finally, we have `width`, `height`, `item1`, `item2` and `title` from the defaul
391
391
392
392
That often happens with destructuring assignments. We have a complex object with many properties and want to extract only what we need.
393
393
394
-
Even like this:
394
+
Even here it happens:
395
395
```js
396
396
// take size as a whole into a variable, ignore the rest
The real-life problem is how to remember the order of arguments. Usually IDEs try to help us, especially if the code is well-documented, but still... Another problem is how to call a function when most parameters are ok by default.
412
+
In real-life the problem is how to remember the order of arguments. Usually IDEs try to help us, especially if the code is well-documented, but still... Another problem is how to call a function when most parameters are ok by default.
413
413
414
414
Like this?
415
415
@@ -498,7 +498,7 @@ In the code above, the whole arguments object is `{}` by default, so there's alw
498
498
499
499
## Summary
500
500
501
-
- Destructuring assignment allows to instantly map an object or array into many variables.
501
+
- Destructuring assignment allows for instantly mapping an object or array onto many variables.
0 commit comments