Skip to content

Commit 1986292

Browse files
Evavic44Evavic44
committed
section: a closer look at function
1 parent 37e0909 commit 1986292

File tree

7 files changed

+224
-0
lines changed

7 files changed

+224
-0
lines changed

‎10-A_Closer_Look_At_Functions/README.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
# Default Parameters
2+
3+
Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.
4+
5+
```js
6+
const bookings = [];
7+
8+
function createBooking(flightNum, numPassengers, price) {
9+
const booking = {
10+
flightNum,
11+
numPassengers,
12+
price,
13+
};
14+
console.log(booking);
15+
bookings.push(booking);
16+
}
17+
18+
createBooking("LH123");
19+
```
20+
21+
Here we simply created a function with some empty values, then we called the function with a single argument which is then attached to the first parameter of the `createBooking` function.
22+
23+
Here's how we added default parameters in `ES5` syntax
24+
25+
```js
26+
const bookings = [];
27+
28+
function createBooking(flightNum, numPassengers, price) {
29+
numPassengers = numPassengers || 1; // 1
30+
price = price || 199; // 199
31+
32+
const booking = {
33+
flightNum,
34+
numPassengers,
35+
price,
36+
};
37+
console.log(booking);
38+
bookings.push(booking);
39+
}
40+
41+
createBooking("LH123");
42+
```
43+
44+
Here we utilized a concept called `short circuting` which in an `OR` operator, returns the last or next result if a value is a falsy value.
45+
46+
So since the values `numPassengers, price` are `undefined`, which is a falsy value, the result will be the next value.
47+
48+
However this process is a bit cumbersome. So in `ES6`, we can assign default parameters directly where the parameters is being created using the assignment operator `=`.
49+
50+
```js
51+
const bookings = [];
52+
53+
function createBooking(flightNum, numPassengers = 1, price = 199) {
54+
const booking = {
55+
flightNum,
56+
numPassengers,
57+
price,
58+
};
59+
console.log(booking);
60+
bookings.push(booking);
61+
}
62+
63+
createBooking("LH123");
64+
```
65+
66+
Of course we can overwrite this parameters when we specify the arguments.
67+
68+
```js
69+
createBooking("LH123", 2, 800); // numPassengers = 2, price = 800
70+
```
71+
72+
We can also use expressions on the default parameters.
73+
74+
```js
75+
function createBooking(flightNum, numPassengers = 1 + 1, price = 199 - 99) {}
76+
```
77+
78+
We can also calculate the value based on the parameter that was set before it. For example `price * numPassengers`
79+
80+
```js
81+
function createBooking(
82+
flightNum,
83+
numPassengers = 1,
84+
price = 199 * numPassengers
85+
) {}
86+
87+
createBooking("LH123", 2); // numPassengers = 2, price = 398
88+
createBooking("LH123", 5); // numPassengers = 5, price = 995
89+
```
90+
91+
In a situation we want to skip a parameter, we can simply assign it `undefined`, which is basically not setting any value, so this will return the default value.
92+
93+
```js
94+
createBooking("LH123", undefined, 1000); // numPassengers = 1, price = 1000
95+
```

‎10-A_Closer_Look_At_Functions/css/main.css‎

Lines changed: 57 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎10-A_Closer_Look_At_Functions/css/main.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎10-A_Closer_Look_At_Functions/favicon.ico‎

15 KB
Binary file not shown.

‎10-A_Closer_Look_At_Functions/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>A Closer Look at Functions</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<h1>A Closer Look at Functions</h1>
12+
<button class="buy">Buy new plane 🛩</button>
13+
<button class="poll">Answer poll ⁉️</button>
14+
<script src="script.js"></script>
15+
</body>
16+
</html>

‎10-A_Closer_Look_At_Functions/script.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
"use strict";
2+
3+
const bookings = [];
4+
5+
function createBooking(
6+
flightNum,
7+
numPassengers = 1,
8+
price = 199 * numPassengers
9+
) {
10+
// ES5
11+
// numPassengers = numPassengers || 1;
12+
// price = price || 199;
13+
14+
const booking = {
15+
flightNum,
16+
numPassengers,
17+
price,
18+
};
19+
console.log(booking);
20+
bookings.push(booking);
21+
}
22+
23+
createBooking("LH123");
24+
createBooking("LH123", 2, 800);
25+
createBooking("LH123", 2); // "LH123" 2 * 199 = 398
26+
createBooking("LH123", 5); // "LH123" 5 * 199 = 995
27+
createBooking("LH123", undefined, 1000); // 1(default value), 1000

‎10-A_Closer_Look_At_Functions/style.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
body {
2+
height: 100vh;
3+
display: flex;
4+
align-items: center;
5+
background: linear-gradient(to top left, #28b487, #7dd56f);
6+
}
7+
h1 {
8+
font-family: sans-serif;
9+
font-size: 50px;
10+
line-height: 1.3;
11+
width: 100%;
12+
padding: 30px;
13+
text-align: center;
14+
color: white;
15+
}
16+
.buy,
17+
.poll {
18+
font-size: 1.6rem;
19+
padding: 1rem 2rem;
20+
position: absolute;
21+
top: 2rem;
22+
}
23+
.buy {
24+
left: 2rem;
25+
}
26+
.poll {
27+
right: 2rem;
28+
}

0 commit comments

Comments
 (0)