이 게시물은 원본 아티클인 Master Call, Apply and Bind in JavaScript and Ace Your Interview 를 한글로 번역한 게시글입니다. 게시물 내용의 저작권은 원작자 jeetvora331 에게 있습니다.

JavaScript는 call, apply, bind 3개의 메서드를 사용해 함수의 컨텍스트를 조작할 수 있는 강력하고 유연한 언어입니다. 이 메서드들은 함수 내에서 this의 값을 변경하는 데 유용합니다. this는 함수가 작동하는 객체를 결정합니다. 이번 아티클에서는 JavaScript에서 call, apply, bind를 사용하는 방법을 설명하고 그 예제를 알아보도록 하겠습니다.

Call, Apply, Nind가 뭔가요?

call, apply, bind는 JavaScript에서 함수의 프로토타입 객체의 메서드 입니다. 이들은 함수 내에서 this의 값을 변경하고, 다른 인수와 함께 실행할 수 있게 합니다.

Call

call 메서드는 this 값이나 인수들을 쉼표로 구분해 함수를 호출하는 데 사용됩니다.

Copycopy code to clipboard
let person1 = {
	firstName: 'Karan',
	lastName: 'Sharma',
};

let person2 = {
	firstName: 'Rakesh',
	lastName: 'Verma',
};

function sayHello(greeting) {
	console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

sayHello.call(person1, 'Hello'); // Hello Karan Sharma
sayHello.call(person2, 'Hello'); // Hello Rakesh Verma

예제에서는 call 메서드를 사용해 person 객체를 sayHello 함수의 this 값으로 지정하고, 문자열 "Hello"를 인수로 전달하여 sayHello 함수를 호출합니다. 이 방법은 함수 내에서 person 객체의 속성에 접근하고 함수의 컨텍스트를 변경할 수 있습니다.

call 메서드는 원하는 다른 this 값과 고정된 갯수의 인수를 사용해 함수를 실행시키는 데 유용합니다. 또한 call 메서드를 사용해 다른 객체나 클래스로부터 메서드를 빌려올 수 있습니다.

Apply

apply 메서들는 인수를 배열(또는 유사배열 객체)로 받는 것을 제외하고 call 메서드와 굉장히 비슷합니다.

Copycopy code to clipboard
let person1 = {
	firstName: 'Karan',
	lastName: 'Sharma',
};

let person2 = {
	firstName: 'Rakesh',
	lastName: 'Verma',
};

function sayHello(greeting) {
	console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

sayHello.call(person1, ['Hello']); // Hello Karan Sharma
sayHello.call(person2, ['Hello']); // Hello Rakesh Verma

Bind

bind 메서드는 call, apply 메서드와 다릅니다. 이는 바로 함수를 실행하지 않습니다. 그 대신 전달한 this 값과 인수를 사용해 새로운 함수를 반환합니다.

bind()를 사용하면 미리 정의된 컨텍스트를 가진 새로운 함수를 만들 수 있으며, 이는 원하는 인수와 함께 호출 될 수 있습니다.

Copycopy code to clipboard
let person1 = {
	firstName: 'Karan',
	lastName: 'Sharma',
};

let person2 = {
	firstName: 'Rakesh',
	lastName: 'Verma',
};

function sayHello(greeting) {
	console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

let sayHelloToPerson1 = sayHello.bind(person1);
let sayHelloToPerson2 = sayHello.bind(person2);

sayHelloToPerson1; // Hello Karan Sharma
sayHelloToPerson2; // Hello Rakesh Verma

어떻게 면접 질문을 부시나요?

이 질문은 종종 JavaScript에서 함수의 동작하는 방식이나, call, apply, bind를 사용해 함수의 컨텍스트를 조작할 수 있는지에 대한 이해력을 테스트하기 위해 물어봅니다. 여기 그 질문에 대한 팁이 있습니다.

• call, apply, bind의 구문과 동작에 대한 차이를 설명하세요.
• 각 메서드를 다른 인수와 컨텍스트와 함께 사용하는 예시를 보여주세요.
• 이 메서드들이 어떤 경우에 유용하거나 필요한 지 설명해주세요.
• 전역 객체나 화살표 함수 같은 다른 방법으로 this를 수정하는 것과 비교해주세요.
• JavaScript에서 this가 동작하는 방식과, 실행 컨텍스트에 어떻게 의존하는지에 대한 지식을 보여주세요.

요약

이번 아티클에서는 JavaScript에서 call, apply, bind를 어떻게 사용하는지 간단한 예제와 함께 배워보았습니다. 또한 면접 질문에 대답할 때 알고 있으면 좋을 팁을 제공했습니다. 기억해두면 좋은 키 포인트를 말씀드리겠습니다.

• call, apply, bind 세 개의 메서는 함수 내의 this 값을 바꾸고 다른 인수로 실행 할 수 있게 해줍니다.
• call, apply는 인수로 받은 배열이나 쉼표로 구분된 값들을 사용해 즉시 함수를 실행시킵니다.
• bind는 전달 받은 this 과 인수를 사용하는 새로운 함수를 반환합니다.
• 이 메서드들은 함수의 컨텍스트를 바꾸거나 고정된 컨텍스트로 새로운 함수를 만드는 데 유용합니다.

역주 의견

여기서부터는 저(himprover)의 의견 입니다.

이번이 14번째 게시글이네요. 🎉

영어 공부를 위해 무작정 하루에 하나씩 아티클을 번역해보자 하고 벌써 2주가 지났습니다.

내키지 않는 날도 있었지만 그래도 진행했습니다.

보통 이런 일은 했을 때 후회 할 일은 없지만, 안 했을 때 후회가 됐었거든요.

누군가에겐 별 거 아닌 작업일 수 있겠지만 꾸준히 해보려고 합니다. 🤗

읽어주셔서 감사합니다. 👍