|
1 | | -// Arrow Functions or Fat Arrow Functions |
2 | | -// regular function - 'this' refers to parent, left of the dot |
3 | | -// arrow function - 'this' refers to it's current surrounding scope |
| 1 | +// default parameters - a fallback to a value to prevent incase functionality breaks if the parameter is not passed i.e undefined. The argument/parameter passed will have more precedence than the default parameter |
4 | 2 |
|
5 | | -constbtn=document.querySelector(".btn"); |
| 3 | +// arrow function gotchas - hositing doesn't work since it has variable name to defined |
6 | 4 |
|
7 | | -btn.addEventListener("click", function () { |
8 | | - console.log(this); |
| 5 | +sayHi(); |
9 | 6 |
|
10 | | - // Here, it points to window, since window is parent of setTimeOut |
11 | | - // setTimeout(function () { |
12 | | - // console.log(this); |
13 | | - // this.style.color = "black"; |
14 | | - // }, 2000); |
| 7 | +const john = "John"; |
| 8 | +const anna = "Anna"; |
15 | 9 |
|
16 | | - // Here, it points to surrounding scope i.e btn |
17 | | - setTimeout(() => { |
18 | | - console.log(this); |
19 | | - this.style.color = "black"; |
20 | | - }, 2000); |
21 | | -}); |
| 10 | +function sayHi(person = "Peter") { |
| 11 | + console.log(`Hi ${person}`); |
| 12 | +} |
| 13 | + |
| 14 | +const sayHello = (person = "Bob") => { |
| 15 | + console.log(`Hello ${person}`); |
| 16 | +}; |
| 17 | +sayHello(anna); |
0 commit comments