TIL/JavaScript/arrow_function.js at master · YounglanHong/TIL · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// function sum(a, b) {
// return a + b;
// }

letsum=(a,b)=>a+b;

// function isPositive(number) {
// return number >= 0;
// }

letisPositive=(number)=>number>=0;
// let isPositive = number => number >= 0;

// function randomNumber() {
// return Math.random;
// }

letrandomNumber=()=>Math.random;

// document.addEventListener("click", function () {
// console.log("Click");
// });

document.addEventListener("click",()=>console.log("Click"));

/***************************************************************/

/* Scoping of 'this' */
classPerson{
constructor(name){
this.name=name;
console.log("Constructor: ",this);// Person {name: "Bob"}
}

// 화살표 함수: 함수 호출 시 this 재정의 안함
printNameArrow(){
setTimeout(()=>{
console.log("Arrow_this: ",this);// Person {name: "Bob"}
console.log("Arrow: "+this.name);// Arrow: Bob
},100);
}

// 일반 함수: 함수 호출 시 this 재정의
printNameFunction(){
setTimeout(function(){
console.log("Fn_this: ",this);// Window {window: Window, self: Window, document: document, name: "", location: Location, …}
console.log("Function: "+this.name);// Function:
},100);
}
}

letperson=newPerson("Bob");
person.printNameArrow();
person.printNameFunction();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// function sum(a, b) {
// return a + b;
// }

letsum=(a,b)=>a+b;

// function isPositive(number) {
// return number >= 0;
// }

letisPositive=(number)=>number>=0;
// let isPositive = number => number >= 0;

// function randomNumber() {
// return Math.random;
// }

letrandomNumber=()=>Math.random;

// document.addEventListener("click", function () {
// console.log("Click");
// });

document.addEventListener("click",()=>console.log("Click"));

/***************************************************************/

/* Scoping of 'this' */
classPerson{
constructor(name){
this.name=name;
console.log("Constructor: ",this);// Person {name: "Bob"}
}

// 화살표 함수: 함수 호출 시 this 재정의 안함
printNameArrow(){
setTimeout(()=>{
console.log("Arrow_this: ",this);// Person {name: "Bob"}
console.log("Arrow: "+this.name);// Arrow: Bob
},100);
}

// 일반 함수: 함수 호출 시 this 재정의
printNameFunction(){
setTimeout(function(){
console.log("Fn_this: ",this);// Window {window: Window, self: Window, document: document, name: "", location: Location, …}
console.log("Function: "+this.name);// Function:
},100);
}
}

letperson=newPerson("Bob");
person.printNameArrow();
person.printNameFunction();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// function sum(a, b) {
// return a + b;
// }

letsum=(a,b)=>a+b;

// function isPositive(number) {
// return number >= 0;
// }

letisPositive=(number)=>number>=0;
// let isPositive = number => number >= 0;

// function randomNumber() {
// return Math.random;
// }

letrandomNumber=()=>Math.random;

// document.addEventListener("click", function () {
// console.log("Click");
// });

document.addEventListener("click",()=>console.log("Click"));

/***************************************************************/

/* Scoping of 'this' */
classPerson{
constructor(name){
this.name=name;
console.log("Constructor: ",this);// Person {name: "Bob"}
}

// 화살표 함수: 함수 호출 시 this 재정의 안함
printNameArrow(){
setTimeout(()=>{
console.log("Arrow_this: ",this);// Person {name: "Bob"}
console.log("Arrow: "+this.name);// Arrow: Bob
},100);
}

// 일반 함수: 함수 호출 시 this 재정의
printNameFunction(){
setTimeout(function(){
console.log("Fn_this: ",this);// Window {window: Window, self: Window, document: document, name: "", location: Location, …}
console.log("Function: "+this.name);// Function:
},100);
}
}

letperson=newPerson("Bob");
person.printNameArrow();
person.printNameFunction();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// function sum(a, b) {
// return a + b;
// }

letsum=(a,b)=>a+b;

// function isPositive(number) {
// return number >= 0;
// }

letisPositive=(number)=>number>=0;
// let isPositive = number => number >= 0;

// function randomNumber() {
// return Math.random;
// }

letrandomNumber=()=>Math.random;

// document.addEventListener("click", function () {
// console.log("Click");
// });

document.addEventListener("click",()=>console.log("Click"));

/***************************************************************/

/* Scoping of 'this' */
classPerson{
constructor(name){
this.name=name;
console.log("Constructor: ",this);// Person {name: "Bob"}
}

// 화살표 함수: 함수 호출 시 this 재정의 안함
printNameArrow(){
setTimeout(()=>{
console.log("Arrow_this: ",this);// Person {name: "Bob"}
console.log("Arrow: "+this.name);// Arrow: Bob
},100);
}

// 일반 함수: 함수 호출 시 this 재정의
printNameFunction(){
setTimeout(function(){
console.log("Fn_this: ",this);// Window {window: Window, self: Window, document: document, name: "", location: Location, …}
console.log("Function: "+this.name);// Function:
},100);
}
}

letperson=newPerson("Bob");
person.printNameArrow();
person.printNameFunction();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// function sum(a, b) {
// return a + b;
// }

letsum=(a,b)=>a+b;

// function isPositive(number) {
// return number >= 0;
// }

letisPositive=(number)=>number>=0;
// let isPositive = number => number >= 0;

// function randomNumber() {
// return Math.random;
// }

letrandomNumber=()=>Math.random;

// document.addEventListener("click", function () {
// console.log("Click");
// });

document.addEventListener("click",()=>console.log("Click"));

/***************************************************************/

/* Scoping of 'this' */
classPerson{
constructor(name){
this.name=name;
console.log("Constructor: ",this);// Person {name: "Bob"}
}

// 화살표 함수: 함수 호출 시 this 재정의 안함
printNameArrow(){
setTimeout(()=>{
console.log("Arrow_this: ",this);// Person {name: "Bob"}
console.log("Arrow: "+this.name);// Arrow: Bob
},100);
}

// 일반 함수: 함수 호출 시 this 재정의
printNameFunction(){
setTimeout(function(){
console.log("Fn_this: ",this);// Window {window: Window, self: Window, document: document, name: "", location: Location, …}
console.log("Function: "+this.name);// Function:
},100);
}
}

letperson=newPerson("Bob");
person.printNameArrow();
person.printNameFunction();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// function sum(a, b) {
// return a + b;
// }

letsum=(a,b)=>a+b;

// function isPositive(number) {
// return number >= 0;
// }

letisPositive=(number)=>number>=0;
// let isPositive = number => number >= 0;

// function randomNumber() {
// return Math.random;
// }

letrandomNumber=()=>Math.random;

// document.addEventListener("click", function () {
// console.log("Click");
// });

document.addEventListener("click",()=>console.log("Click"));

/***************************************************************/

/* Scoping of 'this' */
classPerson{
constructor(name){
this.name=name;
console.log("Constructor: ",this);// Person {name: "Bob"}
}

// 화살표 함수: 함수 호출 시 this 재정의 안함
printNameArrow(){
setTimeout(()=>{
console.log("Arrow_this: ",this);// Person {name: "Bob"}
console.log("Arrow: "+this.name);// Arrow: Bob
},100);
}

// 일반 함수: 함수 호출 시 this 재정의
printNameFunction(){
setTimeout(function(){
console.log("Fn_this: ",this);// Window {window: Window, self: Window, document: document, name: "", location: Location, …}
console.log("Function: "+this.name);// Function:
},100);
}
}

letperson=newPerson("Bob");
person.printNameArrow();
person.printNameFunction();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// function sum(a, b) {
// return a + b;
// }

letsum=(a,b)=>a+b;

// function isPositive(number) {
// return number >= 0;
// }

letisPositive=(number)=>number>=0;
// let isPositive = number => number >= 0;

// function randomNumber() {
// return Math.random;
// }

letrandomNumber=()=>Math.random;

// document.addEventListener("click", function () {
// console.log("Click");
// });

document.addEventListener("click",()=>console.log("Click"));

/***************************************************************/

/* Scoping of 'this' */
classPerson{
constructor(name){
this.name=name;
console.log("Constructor: ",this);// Person {name: "Bob"}
}

// 화살표 함수: 함수 호출 시 this 재정의 안함
printNameArrow(){
setTimeout(()=>{
console.log("Arrow_this: ",this);// Person {name: "Bob"}
console.log("Arrow: "+this.name);// Arrow: Bob
},100);
}

// 일반 함수: 함수 호출 시 this 재정의
printNameFunction(){
setTimeout(function(){
console.log("Fn_this: ",this);// Window {window: Window, self: Window, document: document, name: "", location: Location, …}
console.log("Function: "+this.name);// Function:
},100);
}
}

letperson=newPerson("Bob");
person.printNameArrow();
person.printNameFunction();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// function sum(a, b) {
// return a + b;
// }

letsum=(a,b)=>a+b;

// function isPositive(number) {
// return number >= 0;
// }

letisPositive=(number)=>number>=0;
// let isPositive = number => number >= 0;

// function randomNumber() {
// return Math.random;
// }

letrandomNumber=()=>Math.random;

// document.addEventListener("click", function () {
// console.log("Click");
// });

document.addEventListener("click",()=>console.log("Click"));

/***************************************************************/

/* Scoping of 'this' */
classPerson{
constructor(name){
this.name=name;
console.log("Constructor: ",this);// Person {name: "Bob"}
}

// 화살표 함수: 함수 호출 시 this 재정의 안함
printNameArrow(){
setTimeout(()=>{
console.log("Arrow_this: ",this);// Person {name: "Bob"}
console.log("Arrow: "+this.name);// Arrow: Bob
},100);
}

// 일반 함수: 함수 호출 시 this 재정의
printNameFunction(){
setTimeout(function(){
console.log("Fn_this: ",this);// Window {window: Window, self: Window, document: document, name: "", location: Location, …}
console.log("Function: "+this.name);// Function:
},100);
}
}

letperson=newPerson("Bob");
person.printNameArrow();
person.printNameFunction();