블로그

Javascript 의 bind vs apply 차이와 용도?

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...!!

웹 개발bindapplyjavascriptjs

채널톡 아이콘