1. bind 용도:

-.함수의 this 값을 영구적으로 바꿉니다.

-.새로운 함수를 반환합니다.

-.나중에 실행할 함수를 미리 준비할 때 유용합니다.

*.문법: const boundFn = originalFn.bind(thisArg, arg1, arg2, ...);

*.특징:

-.즉시 실행되지 않습니다.

-.반환된 함수는 나중에 호출할 수 있습니다.

-.부분 적용(partial application)을 구현할 수 있습니다.

예제:

const person = {
name: '한종인',
greet: function(greeting) {
           console.log(`${greeting}, 저는 ${this.name}입니다.`);
      }
};

const greetFn = person.greet.bind(person, '안녕하세요');

greetFn(); // "안녕하세요, 저는 한종인입니다.

2.apply 용도:

this를 사용하여 메서드를 호출할 때, 메서드 내부에서 this가 올바르게 동작하도록 합니다.

*.문법: const boundFn = originalFn.bind(thisArg, arg1, arg2, ...);

*.특징:

-.함수를 즉시 실행.

-.두 번째 인자로 배열을 받습니다.

예제:

const person = {
   name: '한종인',
   greet: function(greeting, arg1) {
            console.log(`${greeting}, 저는 ${this.name}입니다${arg1}`);
          }
};

person.greet.apply(person, ['안녕하세요', '!!']);// 바로 출력 => "안녕하세요, 저는 한종인입니다!!"

*** 차이점

*.실행 시점:

-.bind: 새 함수를 반환하며, 즉시 실행되지 않습니다.

-.apply: 함수를 즉시 실행합니다.

*.인자 전달:

-.bind: 인자를 개별적으로 전달합니다.

-.apply: 인자를 배열로 전달합니다.

*.반환 값:

-.bind: 새로운 함수를 반환합니다.

-.apply: 원본 함수의 실행 결과를 반환합니다.

*.사용 상황:

-.bind: 이벤트 리스너나 콜백 함수에서 this를 고정할 때 자주 사용됩니다.

-.apply: 배열을 함수의 인자로 사용하거나, 함수를 즉시 실행하면서 this를 변경해야 할 때 사용됩니다.

바닐라 JS 사용 시 참조하시고, Happy coding...!!