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: manuscript/02-Destructuring.md
+79Lines changed: 79 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -174,6 +174,85 @@ This modified example retrieves `options.colors` and stores it in the `colors` v
174
174
175
175
Mixed destructuring is very useful for pulling values out of JSON configuration structures without navigating the entire structure.
176
176
177
+
## Destructured Parameters
178
+
179
+
In Chapter 1, you learned about destructuring assignment. Destructuring can also be used outside of the context of an assignment expression and perhaps the most interesting such case is with destructured parameters.
180
+
181
+
It's common for functions that take a large number of optional parameters to use an options object as one or more parameters. For example:
182
+
183
+
```js
184
+
functionsetCookie(name, value, options) {
185
+
186
+
options = options || {};
187
+
188
+
var secure =options.secure,
189
+
path =options.path,
190
+
domain =options.domain,
191
+
expires =options.expires;
192
+
193
+
// ...
194
+
}
195
+
196
+
setCookie("type", "js", {
197
+
secure:true,
198
+
expires:60000
199
+
});
200
+
```
201
+
202
+
There are many `setCookie()` functions in JavaScript libraries that look similar to this. The `name` and `value` are required but everything else is not. And since there is no priority order for the other data, it makes sense to have an options object with named properties rather than extra named parameters. This approach is okay, although it makes the expected input for the function a bit opaque.
203
+
204
+
Using destructured parameters, the previous function can be rewritten as follows:
The behavior of this function is similar to the previous example, the biggest difference is the third argument uses destructuring to pull out the necessary data. Doing so makes it clear which parameters are really expected, and the destructured parameters also act like regular parameters in that they are set to `undefined` if they are not passed.
219
+
220
+
One quirk of this pattern is that the destructured parameters throw an error when the argument isn't provided. If `setCookie()` is called with just two arguments, it results in a runtime error:
221
+
222
+
```js
223
+
// Error!
224
+
setCookie("type", "js");
225
+
```
226
+
227
+
This code throws an error because the third argument is missing (`undefined`). To understand why this is an error, it helps to understand that destructured parameters are really just a shorthand for destructured assignment. The JavaScript engine is actually doing this:
228
+
229
+
```js
230
+
functionsetCookie(name, value, options) {
231
+
232
+
var { secure, path, domain, expires } = options;
233
+
234
+
// ...
235
+
}
236
+
```
237
+
238
+
Since destructuring assignment throws an error when the right side expression evaluates to `null` or `undefined`, the same is true when the third argument isn't passed.
239
+
240
+
You can work around this behavior by providing a default value for the destructured parameter:
This example now works exactly the same as the first example in this section. Providing the default value for the destructured parameter means that `secure`, `path`, `domain`, and `expires` will all be `undefined` if the third argument to `setCookie()` isn't provided.
250
+
251
+
I> It's recommended to always provide the default value for destructured parameters to avoid these types of errors.
252
+
253
+
177
254
## Summary
178
255
179
256
Destructuring makes it easier to work with objects and arrays in JavaScript. Using syntax that's already familiar to many developers, object literals and array literals, you can now pick data structures apart to get at just the information you're interested in.
257
+
258
+
Destructured parameters use the destructuring syntax to make options objects more transparent when used as function parameters. The actual data you're interested in can be listed out along with other named parameters.
Copy file name to clipboardExpand all lines: manuscript/04-Functions.md
-78Lines changed: 0 additions & 78 deletions
Original file line number
Diff line number
Diff line change
@@ -161,82 +161,6 @@ Here, the parameter `last` follows the rest parameter `keys` and causes a syntax
161
161
162
162
Rest parameters were designed to replace `arguments` in ECMAScript. Originally ECMAScript 4 did away with `arguments` and added rest parameters to allow for an unlimited number of arguments to be passed to functions. Even though ECMAScript 4 never came into being, the idea was kept around and reintroduced in ECMAScript 6 despite `arguments` not being removed from the language.
163
163
164
-
## Destructured Parameters
165
-
166
-
In Chapter 1, you learned about destructuring assignment. Destructuring can also be used outside of the context of an assignment expression and perhaps the most interesting such case is with destructured parameters.
167
-
168
-
It's common for functions that take a large number of optional parameters to use an options object as one or more parameters. For example:
169
-
170
-
```js
171
-
functionsetCookie(name, value, options) {
172
-
173
-
options = options || {};
174
-
175
-
var secure =options.secure,
176
-
path =options.path,
177
-
domain =options.domain,
178
-
expires =options.expires;
179
-
180
-
// ...
181
-
}
182
-
183
-
setCookie("type", "js", {
184
-
secure:true,
185
-
expires:60000
186
-
});
187
-
```
188
-
189
-
There are many `setCookie()` functions in JavaScript libraries that look similar to this. The `name` and `value` are required but everything else is not. And since there is no priority order for the other data, it makes sense to have an options object with named properties rather than extra named parameters. This approach is okay, although it makes the expected input for the function a bit opaque.
190
-
191
-
Using destructured parameters, the previous function can be rewritten as follows:
The behavior of this function is similar to the previous example, the biggest difference is the third argument uses destructuring to pull out the necessary data. Doing so makes it clear which parameters are really expected, and the destructured parameters also act like regular parameters in that they are set to `undefined` if they are not passed.
206
-
207
-
One quirk of this pattern is that the destructured parameters throw an error when the argument isn't provided. If `setCookie()` is called with just two arguments, it results in a runtime error:
208
-
209
-
```js
210
-
// Error!
211
-
setCookie("type", "js");
212
-
```
213
-
214
-
This code throws an error because the third argument is missing (`undefined`). To understand why this is an error, it helps to understand that destructured parameters are really just a shorthand for destructured assignment. The JavaScript engine is actually doing this:
215
-
216
-
```js
217
-
functionsetCookie(name, value, options) {
218
-
219
-
var { secure, path, domain, expires } = options;
220
-
221
-
// ...
222
-
}
223
-
```
224
-
225
-
Since destructuring assignment throws an error when the right side expression evaluates to `null` or `undefined`, the same is true when the third argument isn't passed.
226
-
227
-
You can work around this behavior by providing a default value for the destructured parameter:
This example now works exactly the same as the first example in this section. Providing the default value for the destructured parameter means that `secure`, `path`, `domain`, and `expires` will all be `undefined` if the third argument to `setCookie()` isn't provided.
237
-
238
-
I> It's recommended to always provide the default value for destructured parameters to avoid these types of errors.
239
-
240
164
## The Spread Operator
241
165
242
166
Closely related to rest parameters is the spread operator. Whereas rest parameters allow you to specify that multiple independent arguments should be combined into an array, the spread operator allows you to specify an array that should be split and have its items passed in as separate arguments to a function. Consider the `Math.max()` method, which accepts any number of arguments and returns the one with the highest value. It's basic usage is as follows:
@@ -798,8 +722,6 @@ Default function parameters allow you to easily specify what value to use when a
798
722
799
723
Rest parameters allow you to specify an array into which all remaining parameters should be placed. Using a real array and letting you indicate which parameters to include makes rest parameters a much more flexible solution than `arguments`.
800
724
801
-
Destructured parameters use the destructuring syntax to make options objects more transparent when used as function parameters. The actual data you're interested in can be listed out along with other named parameters.
802
-
803
725
The spread operator is a companion to rest parameters, allowing you to destructure an array into separate parameters when calling a function. Prior to ECMAScript 6, the only ways to pass individual parameters that were contained in an array were either manually specifying each parameter or using `apply()`. With the spread operator, you can easily pass an array to any function without worrying about the `this` binding of the function.
804
726
805
727
The addition of the `name` property helps to more easily identify functions for debugging and evaluation purposes. Additionally, ECMAScript 6 formally defines the behavior of block-level functions so they are no longer a syntax error in strict mode.
0 commit comments