this값을 명시적으로 설정하는 메서드 - bind(), call(), apply()

bind(), call(), apply()는 JavaScript에서 함수의 this 값을 명시적으로 설정하는 메서드다.

 

1. bind()

bind() 메서드는 함수에 대한 this 값을 영구히 설정하고, 새로운 함수를 반환한다. 

원본 함수에 영향을 주지 않고 새로운 함수를 생성하며, 새로운 함수를 호출하면 그 함수 내의 this가 bind()에 전달된 값으로 설정된다.

const newFunction = originalFunction.bind(thisArg[, arg1[, arg2[, ...]]]);

 

originalFunction : this를 영구적으로 설정하고자 하는 원본 함수.

thisArg : originalFunction 내에서 this로 사용할 값.

arg1, arg2, ... : originalFunction에 전달될 인자. (선택적)

 

 

예1)

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const newFunction = person.sayHello.bind(person); // bind 메서드를 사용하여 this 값을 설정

newFunction(); // Hello, John!

 

 

예2)

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: 'John' };

// Creating a new function with 'this' set to 'person' and providing additional arguments
const greetJohn = greet.bind(person, 'Hello');
const greetJane = greet.bind(person, 'Hi');

greetJohn('!'); // Hello, John!
greetJane('!!!'); // Hi, John!!!

 

 

bind()는 일반적으로 콜백 함수로 전달될 때나 특정 객체의 메서드로 사용될 때 원하는 this 값을 보존하고자 할 때 유용하다. 

 

2. call()

call() 메서드는 함수를 호출하면서 특정한 this 값을 설정하고 이후 인자는 순서대로 전달된다.

함수를 호출하면서 어떤 객체를 this로 사용할지 명시적으로 지정할 수 있다.

function functionName(arg1, arg2, ...) {
  // 함수 본문
}

functionName.call(thisArg, arg1, arg2, ...);

 

functionName : this를 설정하고자 하는 함수.
thisArg : 함수 내에서 this로 사용할 값.
arg1, arg2, ... : 함수에 전달될 인자들.

 

 

예1)

function sayHello() {
  console.log(`Hello, ${this.name}!`);
}

const person1 = { name: 'John' };
const person2 = { name: 'Jane' };

sayHello.call(person1); // Hello, John!
sayHello.call(person2); // Hello, Jane!

 

 

 예2)

const person = {
  name: 'John',
  greet: function (greeting) {
    console.log(`${greeting}, ${this.name}!`);
  }
};

const anotherPerson = {
  name: 'Jane'
};

person.greet('Hello'); // Hello, John!

// call() 메서드를 사용하여 this를 anotherPerson으로 설정하고 함수 호출
person.greet.call(anotherPerson, 'Hi'); // Hi, Jane!

 

call()는 주로 함수에서 다른 객체의 메서드를 빌려와 실행하거나, 함수를 호출할 때 this 값을 원하는 값으로 지정할 때 사용한다.

 

 

3. apply()

apply() 메서드는 call()과 유사하지만, 인자를 배열로 받는다.

첫 번째 인자로 전달된 객체를 호출하는 함수의 this로 설정하고, 두 번째 인자로 전달된 배열은 함수에 전달된다.

function functionName(arg1, arg2, ...) {
  // 함수 본문
}

functionName.apply(thisArg, [arg1, arg2, ...]);

 

functionName : this를 설정하고자 하는 함수.
thisArg : 함수 내에서 this로 사용할 값.
[arg1, arg2, ...] : 함수에 전달될 인자들을 배열로 전달.

 

 

예1)

function sayHello() {
  console.log(`Hello, ${this.name}!`);
}

const person1 = { name: 'John' };
const person2 = { name: 'Jane' };

// apply() 메서드에 인자를 배열로 전달
sayHello.apply(person1, []); // Hello, John!
sayHello.apply(person2, []); // Hello, Jane!

 

 

예2)

const person = {
  name: 'John',
  greet: function (greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
  }
};

const anotherPerson = {
  name: 'Jane'
};

person.greet('Hello', '!'); // Hello, John!

// apply() 메서드를 사용하여 this를 anotherPerson으로 설정하고 함수 호출
person.greet.apply(anotherPerson, ['Hi', '!!!']); // Hi, Jane!!!

 

apply() 메서드는 함수에 가변적인 수의 인자를 전달할 때 유용하며, 주로 함수에 배열을 전달하여 동적으로 처리할 때 활용된다.

 

 

 

>> thisArg에 null 또는 undefined일때

function sum(a, b) {
  return a + b;
}

const numbers = [3, 4];

const result = sum.apply(null, numbers);
console.log(result); // 7

 

sum.apply(null, numbers)는 sum 함수를 호출하면서 this를 null로 설정하고, 인자로 배열 [3, 4]을 전달한다. 따라서 sum 함수 내에서는 this는 null이 되고, 인자로는 3과 4가 전달되어 7이 반환된다.

 

thisArg로 null 또는 undefined를 전달하면 전역 객체를 가리키게 되므로 null 또는 undefined를 전달하는 대신 실제로 사용할 객체를 전달하는 것이 좋다.

 

 

위 3가지 메서드를 정리하면,

- bind()는 새로운 함수를 반환하고, 나중에 호출될 때에도 원래 함수를 변경하지 않는다.
- call()과 apply()는 함수를 즉시 호출하며, 호출된 함수를 변경하지 않는다.
- 이 세 메서드는 모두 함수의 this 값을 설정하는 데 사용되며, 주로 객체 지향 프로그래밍에서 메서드와 객체를 연결하거나, 특정한 this 값을 갖는 함수를 생성하는 데 활용된다.

 

 

 

ES6부터

- 화살표 함수의 등장으로 인해 bind()의 사용 빈도가 줄어든다고 한다. 

화살표 함수는 자체적인 this를 생성하지 않고 상위 스코프의 this를 유지하므로, bind()를 사용하지 않고도 명시적인 this 설정이 가능하다.

 

- call()과 apply()는 일반적으로 함수를 호출할 때 특정한 this 값을 설정하는 용도로 사용되지만, 함수의 인자를 동적으로 받아 처리해야 할 때는 ES6에서 도입된 확산 연산자 (spread operator)가 더 간편한 방법이다.