2
2
3
3
Prior to ES6, setting default values to function arguments was not so easy. Let's look at an example:
4
4
5
- ``` js
5
+ ``` js
6
6
function getLocation (city ,country ,continent ){
7
7
if (typeof country === ' undefined' ){
8
8
country = ' Italy'
@@ -26,7 +26,7 @@ When calling `getLocation('Milan')` the second and third parameter (country and
26
26
27
27
But what if we want our default value to be at the beginning and not at the end of our list of arguments?
28
28
29
- ``` js
29
+ ``` js
30
30
function getLocation (continent ,country ,city ){
31
31
if (typeof country === ' undefined' ){
32
32
country = ' Italy'
@@ -39,6 +39,7 @@ function getLocation(continent,country,city){
39
39
40
40
getLocation (undefined , undefined ,' Milan' )
41
41
// Europe Italy Milan
42
+
42
43
getLocation (undefined ,' Paris' ,' France' )
43
44
// Europe Paris France
44
45
```
@@ -51,7 +52,7 @@ If we want to replace any of the first arguments with our default we need to pas
51
52
52
53
ES6 makes it very easy to set default function arguments. Let's look at an example:
53
54
54
- ``` javascript
55
+ ``` js
55
56
function calculatePrice (total , tax = 0.1 , tip = 0.05 ){
56
57
// When no value is given for tax or tip, the default 0.1 and 0.05 will be used
57
58
return total + (total * tax) + (total * tip);
@@ -60,14 +61,14 @@ return total + (total * tax) + (total * tip);
60
61
61
62
What if we don't want to pass the parameter at all, like this:
62
63
63
- ``` javascript
64
+ ``` js
64
65
// 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
65
66
calculatePrice (100 , 0.15 )
66
67
```
67
68
68
69
We can solve by doing this:
69
70
70
- ``` javascript
71
+ ``` js
71
72
// In this case 0.15 will be bound to the tip
72
73
calculatePrice (100 , undefined , 0.15 )
73
74
```
@@ -76,7 +77,7 @@ It works, but it's not very nice, how to improve it?
76
77
77
78
With ** destructuring** we can write this:
78
79
79
- ``` javascript
80
+ ``` js
80
81
function calculatePrice ({
81
82
total = 0 ,
82
83
tax = 0.1 ,
@@ -86,7 +87,6 @@ function calculatePrice({
86
87
87
88
const bill = calculatePrice ({ tip: 0.15 , total: 150 });
88
89
// 187.5
89
- ```
90
90
91
91
const bill = calculatePrice ({ tip: 0.15 , total: 150 });
92
92
// 187.5
@@ -98,22 +98,23 @@ In the example above the default value for *tip* was 0.05 and we overwrote it wi
98
98
99
99
Notice this detail:
100
100
101
- ```js
101
+ ``` js
102
102
{
103
103
total = 0 ,
104
104
tax = 0.1 ,
105
- tip = 0.05} = {}
105
+ tip = 0.05
106
+ } = {}
106
107
```
107
108
108
109
If we don't default our argument Object to an empty Object, and we were to try and run ` calculatePrice() ` we would get:
109
110
110
- ``` js
111
+ ``` javascript
111
112
Cannot destructure property ` total` of ' undefined' or ' null' .
112
113
```
113
114
114
115
By writing ` = {} ` we default our argument to an ` Object ` and no matter what argument we pass in the function, it will be an ` Object ` :
115
116
116
- ``` js
117
+ ``` js
117
118
calculatePrice ({});
118
119
// 0
119
120
calculatePrice ();
@@ -128,17 +129,18 @@ Don't worry about destructuring, we will talk about it in Chapter 10.
128
129
129
130
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
130
131
131
- ``` javascript
132
+ ``` js
132
133
function calculatePrice ({
133
134
total = 0 ,
134
135
tax = 0.1 ,
135
136
tip = 0.05 }){
136
137
return total + (total * tax) + (total * tip);
137
- }` ` `
138
+ }
139
+ ```
138
140
139
141
and the below code would work normal
140
142
141
- ` ` ` js
143
+ ``` js
142
144
calculatePrice ({});
143
145
// 0
144
146
calculatePrice ();
0 commit comments