Skip to content

Commit d6845ef

Browse files
author
Sam Zeng
authored
Update 03_default_function_arguments.md
Improve syntax highlighting code
1 parent c112a69 commit d6845ef

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,7 +87,6 @@ function calculatePrice({
8687

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

9191
const bill = calculatePrice({ tip: 0.15, total:150 });
9292
// 187.5
@@ -98,22 +98,23 @@ In the example above the default value for *tip* was 0.05 and we overwrote it wi
9898

9999
Notice this detail:
100100

101-
```js
101+
``` js
102102
{
103103
total = 0,
104104
tax = 0.1,
105-
tip = 0.05} = {}
105+
tip = 0.05
106+
} = {}
106107
```
107108

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

110-
```js
111+
``` javascript
111112
Cannot destructure property `total` of 'undefined' or 'null'.
112113
```
113114

114115
By writing ` = {}` we default our argument to an `Object` and no matter what argument we pass in the function, it will be an `Object`:
115116

116-
```js
117+
``` js
117118
calculatePrice({});
118119
// 0
119120
calculatePrice();
@@ -128,17 +129,18 @@ Don't worry about destructuring, we will talk about it in Chapter 10.
128129

129130
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
130131

131-
``` javascript
132+
``` js
132133
function calculatePrice({
133134
total = 0,
134135
tax = 0.1,
135136
tip = 0.05}){
136137
return total + (total * tax) + (total * tip);
137-
}```
138+
}
139+
```
138140

139141
and the below code would work normal
140142

141-
```js
143+
``` js
142144
calculatePrice({});
143145
// 0
144146
calculatePrice();

0 commit comments

Comments
 (0)