Skip to content

Commit 60609fb

Browse files
authored
Update article.md
1 parent 43c1978 commit 60609fb

File tree

1 file changed

+17
-17
lines changed
  • 1-js/05-data-types/09-destructuring-assignment

1 file changed

+17
-17
lines changed

1-js/05-data-types/09-destructuring-assignment/article.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

33
The two most used data structures in JavaScript are `Object` and `Array`.
44

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.
66

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.
88

99
[cut]
1010

@@ -34,9 +34,9 @@ let [firstName, surname] = "Ilya Kantor".split(' ');
3434
```
3535

3636
````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.
3838
39-
That's just a shorter way to write:
39+
It's just a shorter way to write:
4040
```js
4141
// let [firstName, surname] = arr;
4242
let firstName = arr[0];
@@ -56,12 +56,12 @@ let [, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
5656
alert( title ); // Consul
5757
```
5858
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.
6060
````
6161

6262
````smart header="Works with any iterable on the right-side"
6363
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:
6565
6666
```js
6767
let [a, b, c] = "abc"; // ["a", "b", "c"]
@@ -87,7 +87,7 @@ alert(user.name); // Ilya
8787

8888
````smart header="Looping with .entries()"
8989
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.
9191
9292
We can use it with destructuring to loop over keys-and-values of an object:
9393
@@ -121,7 +121,7 @@ for(let [key, value] of user.entries()) {
121121
````
122122
### The rest '...'
123123

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 `"..."`:
125125

126126
```js run
127127
let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*];
@@ -136,11 +136,11 @@ alert(rest.length); // 2
136136
*/!*
137137
```
138138

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.
140140

141141
### Default values
142142

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:
144144

145145
```js run
146146
*!*
@@ -164,7 +164,7 @@ alert(surname); // Anonymous (default used)
164164

165165
Default values can be more complex expressions or even function calls. They are evaluated only if the value is not provided.
166166

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:
168168

169169
```js run
170170
// runs only prompt for surname
@@ -186,7 +186,7 @@ The basic syntax is:
186186
let {var1, var2} = {var1:…, var2…}
187187
```
188188

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 `{...}`.
190190

191191
For instance:
192192

@@ -206,7 +206,7 @@ alert(width); // 100
206206
alert(height); // 200
207207
```
208208

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:
210210

211211
```js
212212
// changed the order of properties in let {...}
@@ -258,7 +258,7 @@ alert(height); // 200
258258

259259
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.
260260

261-
The code below asks for width, but not about the title.
261+
The code below asks for width, but not the title.
262262

263263
```js run
264264
let options = {
@@ -391,7 +391,7 @@ Finally, we have `width`, `height`, `item1`, `item2` and `title` from the defaul
391391
392392
That often happens with destructuring assignments. We have a complex object with many properties and want to extract only what we need.
393393
394-
Even like this:
394+
Even here it happens:
395395
```js
396396
// take size as a whole into a variable, ignore the rest
397397
let { size } = options;
@@ -409,7 +409,7 @@ function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
409409
}
410410
```
411411
412-
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.
413413
414414
Like this?
415415
@@ -498,7 +498,7 @@ In the code above, the whole arguments object is `{}` by default, so there's alw
498498

499499
## Summary
500500

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.
502502
- The object syntax:
503503
```js
504504
let {prop : varName = default, ...} = object

0 commit comments

Comments
 (0)