자바스크립트 - Function call() 메서드

안녕하세요, 미래의 코딩 슈퍼스타 여러분! 오늘 우리는 자바스크립트의 작은 트릭 중 하나인 call() 메서드에 대해 깊이 다룰 것입니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요; 저는 수년간 수많은 학생들을 가르쳐온 경험을 바탕으로 단계별로 안내해 드리겠습니다. 그러니 당신의 좋아하는 음료를 한 잔 마시며, 이 흥미로운 모험에 동참해 주세요!

JavaScript - Function call()

Function call() 메서드는 무엇인가요?

call() 메서드에 뛰어들기 전에, 함수에 대해 잠시 기억을 냅시다. 자바스크립트의 함수는 특정 작업을 수행하는 작은 기계와도 같습니다. 매우 유용하며, 한 번 익숙해지면 자주 사용하게 될 것입니다!

이제, call() 메서드는 함수가 가지는 특별한 초능력입니다. 이 메서드를 사용하면 함수를 호출(또는 호출)하고 해당 함수 내에서 this 키워드가 무엇을 가리킬지 지정할 수 있습니다. 이게 좀 혼란스러울 수 있지만, 걱정하지 마세요! 몇 가지 예제를 통해 설명드리겠습니다.

문법

call() 메서드는 다음과 같습니다:

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

functionName은 호출하고 싶은 함수입니다.
thisArg은 함수 내에서 this가 가리킬 대상입니다.
arg1, arg2, ...은 함수에 전달하고 싶은 인자들입니다.

Function call() 메서드의 예제

call()이 어떻게 작동하는지 몇 가지 예제를 통해 살펴보겠습니다!

예제 1: 기본 사용

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

const person = { name: 'Alice' };

greet.call(person);

이 코드를 실행하면 다음과 같이 출력됩니다:

Hello, my name is Alice!

여기서 무엇이 일어나고 있는 걸까? 우리는 call()을 사용하여 greet 함수를 호출하고, person을 this로 사용하도록 지정하고 있습니다. 그래서 함수가 this.name에 접근할 때, 실제로는 person.name에 접근하게 됩니다.

예제 2: 인자 전달

function introduce(hobby, food) {
console.log(`Hi, I'm ${this.name}. I love ${hobby} and my favorite food is ${food}.`);
}

const person1 = { name: 'Bob' };
const person2 = { name: 'Carol' };

introduce.call(person1, 'coding', 'pizza');
introduce.call(person2, 'painting', 'sushi');

이 outputs:

Hi, I'm Bob. I love coding and my favorite food is pizza.
Hi, I'm Carol. I love painting and my favorite food is sushi.

이 예제에서 우리는 this를 지정하는 것 외에도 함수에 인자를 전달하고 있습니다. call() 메서드는 두 가지 작업을 동시에 수행할 수 있게 해줍니다!

예제 3: 메서드 빌리

call()의 가장 멋진 기능 중 하나는 다른 객체에서 메서드를 "빌리"할 수 있다는 것입니다. 제가 무엇을 의미하는지 보여드리겠습니다:

const calculator = {
multiply: function(a, b) {
return a * b;
}
};

const scientific = {
square: function() {
return this.multiply(this.number, this.number);
},
number: 5
};

console.log(scientific.square.call(scientific));  // 기대대로 작동합니다
console.log(calculator.multiply.call(scientific, scientific.number, scientific.number));  // multiply 메서드를 빌립니다

출력:

25
25

이 예제에서 우리는 calculator 객체에서 multiply 메서드를 빌려와 scientific 객체의 문맥에서 사용하고 있습니다. 멋지죠?

예제 4: 내장 메서드와 함께 사용

알고 계신가요, call()을 자바스크립트의 내장 메서드와 함께 사용할 수도 있습니다? 이를 확인해 보세요:

const numbers = [1, 2, 3, 4, 5];
const max = Math.max.call(null, ...numbers);
console.log(max);  // Outputs: 5

여기서 우리는 Math.max()와 함께 call()을 사용하고 있습니다. null 인자는 Math.max()가 this를 사용하지 않기 때문입니다. numbers 배열을 개별 인자로 전개하고 있습니다.

call()와 관련된 메서드

완전한 그림을 제공해드리기 위해, call()과 관련된 몇 가지 메서드를 살펴보겠습니다:

메서드	설명	문법
`call()`	주어진 `this` 값과 개별 인자로 함수를 호출	`func.call(thisArg, arg1, arg2, ...)`
`apply()`	`call()`와 유사하지만, 인자는 배열로 전달	`func.apply(thisArg, [argsArray])`
`bind()`	고정된 `this` 값을 가진 새로운 함수를 생성	`func.bind(thisArg, arg1, arg2, ...)`

이 각 메서드는 자신만의 사용 사례가 있지만, call()은 인자를 명확히 알 때 가장 직관적입니다.

결론

그렇습니다, 제 사랑하는 학생 여러분! 우리는 call() 메서드를 완전히 탐구했습니다. 기억하시기 바랍니다, call()은 this의 의미를 함수 내에서 제어하고 다른 객체에서 메서드를 빌릴 수 있는 마법의 지팡이와도 같습니다.

프로그래밍과 마찬가지로, 연습이 완벽을 만듭니다. 그러므로 call()을 자신의 코드에서 실험해 보지 마세요. 누구 knows? call()을 더 자주 사용하게 될지도 모릅니다!

계속 코딩하고, 계속 배우며, 기억하시오: 자바스크립트의 세상에서, 항상 새로운 가능성을 열어주는 call()이 있습니다!

Credits: Image by storyset

이전 튜토리얼:

JavaScript - 함수 호출

다음 튜토리얼:

JavaScript - apply() 함수