자바스크립트에서 함수를 호출하는 방법은 네가지가 있습니다.
함수를 호출하는 방법으로는 함수 뒤에 ()를 붙이는 것과, call, apply 그리고 bind메서드를 이용하는 방법이 있습니다.
보면 call은 보통 함수와 똑같이 매개변수를 콤마로 구분해서 넣고, apply는 매개변수를 하나로 묶어 배열로 만들어 넣는 것을 알 수 있습니다. 그리고 bind() 메서드는 this를 정의하고 나서 그 함수를 복사해 새로운 함수를 만들어 리턴 하는 겁니다. 그래서 bind를 호출하고 다시 실행을 해야만 합니다.
그렇다면 call과 apply 그리고 bind가 공통적으로 가진 null 인자의 역할은 뭘까요? 바로 this를 대체하는 겁니다.
다음을 보겠습니다.
|
// 함수 선언
const fn1 = (name, age) =>{
console.log(`${name}씨 ${age}살이네 이제부터 행님이라 불러라~~`);
}
// 함수의 호출
fn1('한사람', 22);
fn1.call(null, '한사람', 21);
fn1.apply(null, ['한사람', 18]);
// bind 함수는 함수가 가리키는 this만 바꾸고 호출하지는 않는 겁니다.
// 정확히 말하면 this를 정의하고 나서 그 함수를 복사해 새로운 함수를 만들어 리턴 하는 겁니다.
fn1.bind(null)('한사람', 19);
// 다음과 같이 2줄로 써도 됩니다.
let myBind = fn1.bind(null);
myBind('한사람', 23);
|
실행 결과 입니다.
당연히 위의 내용처럼 사용할 사용자는 없을겁니다. 그렇다면 언제 사용할까요?
다음의 내용을 보도록 하겠습니다.
아래의 코드를 보면 user 객체에 show()라는 메서드를 정의 했습니다. 이 메서드를 users배열에서 사용하고 싶다면 어떻게 해야 할까요?
|
let user = {
name : '한사람',
age : 22,
show(prefix, suffix){
console.log(`${prefix} ${this.name}씨 ${this.age}살이네 이제부터 행님이라 불러라~~ ${suffix}`);
}
}
let users = [
{name:'두사람', age:11},
{name:'세사람', age:16},
{name:'네사람', age:21}
]
|
users배열의 모든 요소에 show()메서드를 추가하는 방법이 있겠고 또하나는 user객체를 생성하는 생성자 함수를 만들어 사용하는 방법이 있을 수 있습니다.
그런데 한번만 쓰고 다시는 사용할 일이 없다면 굳이 위에서 처럼 하는 것은 몹시 불편하게 됩니다. 이럴때 user객체에 있는 this를 바꿔서 사용하게 한다면 다른 객체가 가지고 있는 메서드를 이용하여 나의 객체를 처리가 가능하게 됩니다.
다음의 코드를 보도록 하겠습니다. call(), apply(), bind() 메서드를 이용하여 user객체가 가지고 있는 show()메서드를 이용하여 출력을 수행하도록 했습니다.
|
user.show('[', ']'); // 여기서 this는 user
console.log("-".repeat(70));
users.forEach((u)=>{
user.show.call(u, '-=[', ']=-') // 여기서 this는 users 배열의 요소들
});
console.log("-".repeat(70));
users.forEach((u)=>{
user.show.apply(u,["-={[", "]}=-"]) // 여기서 this는 users 배열의 요소들
});
console.log("-".repeat(70));
users.forEach((u)=>{
user.show.bind(u)("🤷♂️", "👍") // 여기서 this는 users 배열의 요소들
});
console.log("=".repeat(70));
|
다음은 전체 소스 입니다.
ex06.html 파일을 다음과 같이 만듭니다.
|
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
55
56
57
58
59
60
61
62
63
64
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 Call() & Apply() & Bind() </title>
<script>
// 함수 선언
const fn1 = (name, age) =>{
console.log(`${name}씨 ${age}살이네 이제부터 행님이라 불러라~~`);
}
// 함수의 호출
fn1('한사람', 22);
// call은 보통 함수와 똑같이 매개변수를 ,로 구분해서 전달하고 apply는 매개변수를 하나로 묶어 배열로 전달합니다.
fn1.call(null, '한사람', 21);
fn1.apply(null, ['한사람', 18]);
// bind 함수는 함수가 가리키는 this만 바꾸고 호출하지는 않는 겁니다.
// 정확히 말하면 this를 정의하고 나서 그 함수를 복사해 새로운 함수를 만들어 리턴 하는 겁니다.
fn1.bind(null)('한사람', 19);
// 다음과 같이 2줄로 써도 됩니다.
let myBind = fn1.bind(null);
myBind('한사람', 23);
let user = {
name : '한사람',
age : 22,
show(prefix, suffix){
console.log(`${prefix} ${this.name}씨 ${this.age}살이네 이제부터 행님이라 불러라~~ ${suffix}`);
}
}
let users = [
{name:'두사람', age:11},
{name:'세사람', age:16},
{name:'네사람', age:21}
]
console.log("=".repeat(70));
user.show('[', ']'); // 여기서 this는 user
console.log("-".repeat(70));
users.forEach((u)=>{
user.show.call(u, '-=[', ']=-') // 여기서 this는 배열의 요소들
});
console.log("-".repeat(70));
users.forEach((u)=>{
user.show.apply(u,["-={[", "]}=-"]) // 여기서 this는 배열의 요소들
});
console.log("-".repeat(70));
users.forEach((u)=>{
user.show.bind(u)("🤷♂️", "👍") // 여기서 this는 배열의 요소들
});
console.log("=".repeat(70));
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 콜백 지옥 (Callback Hell) 경험해 보기 (0) | 2024.10.24 |
|---|---|
| [JavaScript] call() & apply() & bind()의 사용 2 (0) | 2024.10.24 |
| [JavaScript] 콜백(Callback) 함수 5(this 문제점) (1) | 2024.10.24 |
| [JavaScript] 콜백(Callback) 함수 4(활용 사례) (1) | 2024.10.24 |
| [JavaScript] 콜백(Callback) 함수 3(인사하기) (0) | 2024.10.24 |
