Skip to content

Commit ebe1f17

Browse files
Merge pull request #19 from samzeng/patch-1
Update 03_default_function_arguments.md
2 parents a8f97f3 + d6845ef commit ebe1f17

File tree

1 file changed

+16
-14
lines changed

1 file changed

+16
-14
lines changed

ebook/03_default_function_arguments.md

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Prior to ES6, setting default values to function arguments was not so easy. Let's look at an example:
44

5-
```js
5+
``` js
66
function getLocation(city,country,continent){
77
if(typeof country === 'undefined'){
88
country = 'Italy'
@@ -26,7 +26,7 @@ When calling `getLocation('Milan')` the second and third parameter (country and
2626

2727
But what if we want our default value to be at the beginning and not at the end of our list of arguments?
2828

29-
```js
29+
``` js
3030
function getLocation(continent,country,city){
3131
if(typeof country === 'undefined'){
3232
country = 'Italy'
@@ -39,6 +39,7 @@ function getLocation(continent,country,city){
3939

4040
getLocation(undefined, undefined,'Milan')
4141
// Europe Italy Milan
42+
4243
getLocation(undefined,'Paris','France')
4344
// Europe Paris France
4445
```
@@ -51,7 +52,7 @@ If we want to replace any of the first arguments with our default we need to pas
5152

5253
ES6 makes it very easy to set default function arguments. Let's look at an example:
5354

54-
``` javascript
55+
``` js
5556
function calculatePrice(total, tax = 0.1, tip = 0.05){
5657
// When no value is given for tax or tip, the default 0.1 and 0.05 will be used
5758
return total + (total * tax) + (total * tip);
@@ -60,14 +61,14 @@ return total + (total * tax) + (total * tip);
6061

6162
What if we don't want to pass the parameter at all, like this:
6263

63-
``` javascript
64+
``` js
6465
// The 0.15 will be bound to the second argument, tax even if in our intention it was to set 0.15 as the tip
6566
calculatePrice(100, 0.15)
6667
```
6768

6869
We can solve by doing this:
6970

70-
``` javascript
71+
``` js
7172
// In this case 0.15 will be bound to the tip
7273
calculatePrice(100, undefined, 0.15)
7374
```
@@ -76,7 +77,7 @@ It works, but it's not very nice, how to improve it?
7677

7778
With **destructuring** we can write this:
7879

79-
``` javascript
80+
``` js
8081
function calculatePrice({
8182
total = 0,
8283
tax = 0.1,
@@ -86,30 +87,30 @@ function calculatePrice({
8687

8788
const bill = calculatePrice({ tip: 0.15, total:150 });
8889
// 187.5
89-
```
9090

9191
We made the argument of our function an Object and when calling the function we don't even have to worry about the order of the parameters because they will be matched based on their key.
9292

9393
In the example above the default value for *tip* was 0.05 and we overwrote it with 0.15 but we didn't give a value to tax which remained the default 0.1.
9494

9595
Notice this detail:
9696

97-
```js
97+
``` js
9898
{
9999
total = 0,
100100
tax = 0.1,
101-
tip = 0.05} = {}
101+
tip = 0.05
102+
} = {}
102103
```
103104

104105
If we don't default our argument Object to an empty Object, and we were to try and run `calculatePrice()` we would get:
105106

106-
```js
107+
``` javascript
107108
Cannot destructure property `total` of 'undefined' or 'null'.
108109
```
109110

110111
By writing ` = {}` we default our argument to an `Object` and no matter what argument we pass in the function, it will be an `Object`:
111112
112-
```js
113+
``` js
113114
calculatePrice({});
114115
// 0
115116
calculatePrice();
@@ -124,17 +125,18 @@ Don't worry about destructuring, we will talk about it in Chapter 10.
124125

125126
Note: We now don't need to construct object and equate to an empty object. Alternative to above we can construct a function as below
126127

127-
``` javascript
128+
``` js
128129
function calculatePrice({
129130
total = 0,
130131
tax = 0.1,
131132
tip = 0.05}){
132133
return total + (total * tax) + (total * tip);
133-
}```
134+
}
135+
```
134136

135137
and the below code would work normal
136138

137-
```js
139+
``` js
138140
calculatePrice({});
139141
// 0
140142
calculatePrice();

0 commit comments

Comments
 (0)