JavaScript Function Call
JavaScript call() Method: 함수 호출 시 this 바인딩과 인자 전달
JavaScript의 call() 메서드는 함수를 호출할 때 this를 명시적으로 설정할 수 있는
강력한 기능을 제공합니다. **call()**은 JavaScript의 내장 함수로, 함수가 호출될 때 this 값을
원하는 객체로 바인딩하여 사용할 수 있으며, 함수 인자도 개별적으로 전달할 수 있습니다.
이 가이드는 JavaScript의 call() 메서드에 대한 설명과 사용 예시를 다룹니다.
1. call() 메서드의 기본 개념
- *
call()*은 함수를 호출할 때this를 특정 객체에 바인딩하고, 동시에 인자를 개별적으로 전달할 수 있습니다. 즉, 함수를 호출할 때 어떤 객체의 메서드로 동작해야 할지를 지정하는 데 사용됩니다.
1.1. call() 메서드 구문
functionName.call(thisArg, arg1, arg2, ...);
thisArg: 함수 내에서 **this*로 사용될 객체를 지정.arg1,arg2, ...: 함수에 전달할 인자들을 개별적으로 나열.
1.2. call() 메서드의 주요 특징
- 함수의
this값을 명시적으로 설정할 수 있음. - 인자는 개별적으로 전달해야 함.
- 즉시 함수를 호출합니다.
2. call() 사용 예시
2.1. 기본 사용 예시
function greet() {
console.log(`Hello, my name is ${this.name}`);
}
const person = { name: 'Alice' };
greet.call(person); // Hello, my name is Alice
greet()함수는this로person객체를 받게 되어,person의name속성을 참조합니다.- *
call()*을 사용하여 **this*를 명시적으로 지정할 수 있습니다.
2.2. 인자를 사용하는 함수와 call()
function introduce(greeting, age) {
console.log(`${greeting}, my name is ${this.name} and I am ${age} years old.`);
}
const person = { name: 'Bob' };
introduce.call(person, 'Hi', 25); // Hi, my name is Bob and I am 25 years old.
- 인자들은
thisArg뒤에 개별적으로 나열합니다. - 이 예시에서는
person객체가 **this*로 바인딩되며, 함수에 전달된 **greeting*과age값이 함께 사용됩니다.
3. call()과 메서드 공유
call() 메서드는 다른 객체의 메서드를 재사용할 때 매우 유용합니다. 객체가 동일한 메서드를 각각 정의하지 않고, 하나의 메서드를 여러
객체에서 공유할 수 있습니다.
3.1. 메서드 공유 예시
const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };
function sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
sayHello.call(person1); // Hello, my name is Alice
sayHello.call(person2); // Hello, my name is Bob
sayHello()메서드는this값에 따라person1또는person2객체에서 호출할 수 있습니다.- 두 객체에서 메서드를 공유하여 메모리 낭비를 방지할 수 있습니다.
4. call()과 상속 구현
JavaScript에서는 프로토타입 상속을 통해 클래스 간 메서드를 상속할 수 있습니다. 이때 **call()**을 사용하면
상위 클래스의 메서드를 하위 클래스에서 재사용할 수 있습니다.
4.1. 상속 구현 예시
function Animal(name) {
this.name = name;
}
function Dog(name, breed) {
Animal.call(this, name); // Animal 생성자를 호출하며 `this` 바인딩
this.breed = breed;
}
const myDog = new Dog('Rex', 'Golden Retriever');
console.log(myDog.name); // 'Rex'
console.log(myDog.breed); // 'Golden Retriever'
Animal.call(this, name):Animal생성자를 호출하면서 **this*를 **Dog*로 바인딩합니다.- 이를 통해
Dog객체는Animal클래스의 속성도 함께 사용할 수 있습니다.
5. call()과 apply()의 차이점
- *
call()*과 **apply()*는 매우 유사하지만, 인자를 전달하는 방식에서 차이가 있습니다. call(): 개별 인자를 나열하여 전달.apply(): 배열을 사용해 인자를 전달.
5.1. apply() 사용 예시
function introduce(greeting, age) {
console.log(`${greeting}, my name is ${this.name} and I am ${age} years old.`);
}
const person = { name: 'Bob' };
introduce.apply(person, ['Hello', 30]); // Hello, my name is Bob and I am 30 years old.
- *
apply()*에서는 배열 형태로 인자를 전달합니다.
6. call()과 bind()의 차이점
call(): 함수를 즉시 호출하면서this값을 설정.bind(): 새로운 함수를 반환하며, 반환된 함수는 나중에this값이 고정된 상태로 호출됩니다.
6.1. bind() 사용 예시
function greet() {
console.log(`Hello, my name is ${this.name}`);
}
const person = { name: 'Alice' };
const boundGreet = greet.bind(person); // `this`가 고정된 새로운 함수 반환
boundGreet(); // Hello, my name is Alice
요약
JavaScript의 call() 메서드는 함수 호출 시 this 값을 명시적으로 설정할 수 있는
유용한 기능입니다.
- *
thisArg*로this값을 지정할 수 있으며, 이를 통해 다양한 객체에서 함수나 메서드를 재사용할 수 있습니다. - 인자는 개별적으로 전달하며, 함수가 즉시 호출됩니다.
- *
apply()*와는 인자 전달 방식에서 차이가 있고, **bind()*와는 즉시 호출과 새로운 함수 반환이라는 차이점이 있습니다.
이러한 호출 방식들을 적절히 사용하면 코드 재사용성과 가독성을 크게 향상시킬 수 있습니다.