Skip to content

Commit a5ea214

Browse files
committed
Move destructured params to destructuring chapter
1 parent 748b01f commit a5ea214

File tree

2 files changed

+79
-78
lines changed

2 files changed

+79
-78
lines changed

manuscript/02-Destructuring.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,85 @@ This modified example retrieves `options.colors` and stores it in the `colors` v
174174

175175
Mixed destructuring is very useful for pulling values out of JSON configuration structures without navigating the entire structure.
176176

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+
function setCookie(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:
205+
206+
```js
207+
function setCookie(name, value, { secure, path, domain, expires }) {
208+
209+
// ...
210+
}
211+
212+
setCookie("type", "js", {
213+
secure: true,
214+
expires: 60000
215+
});
216+
```
217+
218+
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+
function setCookie(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:
241+
242+
```js
243+
function setCookie(name, value, { secure, path, domain, expires } = {}) {
244+
245+
// ...
246+
}
247+
```
248+
249+
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+
177254
## Summary
178255

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

manuscript/04-Functions.md

Lines changed: 0 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -161,82 +161,6 @@ Here, the parameter `last` follows the rest parameter `keys` and causes a syntax
161161

162162
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.
163163

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-
function setCookie(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:
192-
193-
```js
194-
function setCookie(name, value, { secure, path, domain, expires }) {
195-
196-
// ...
197-
}
198-
199-
setCookie("type", "js", {
200-
secure: true,
201-
expires: 60000
202-
});
203-
```
204-
205-
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-
function setCookie(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:
228-
229-
```js
230-
function setCookie(name, value, { secure, path, domain, expires } = {}) {
231-
232-
// ...
233-
}
234-
```
235-
236-
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-
240164
## The Spread Operator
241165

242166
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
798722

799723
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`.
800724

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-
803725
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.
804726

805727
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

Comments
 (0)