JavaScript 함수는 다양한 호출 패턴을 가지고 있습니다. 이러한 호출 패턴은 함수가 어떻게 호출되는지와 관련이 있으며, 함수 내부에서 this 키워드와 인자들이 어떻게 처리되는지에 영향을 미칩니다. 이번 글에서는 자바스크립트 함수 호출 패턴에 대해 살펴보겠습니다.

자바스크립트에서 함수는 다음과 같은 다섯 가지 호출 패턴을 가질 수 있습니다:

1. Function invocation pattern (함수 호출 패턴)
2. Method invocation pattern (메서드 호출 패턴)
3. Constructor invocation pattern (생성자 호출 패턴)
4. Apply invocation pattern (apply 호출 패턴)
5. Bind invocation pattern (bind 호출 패턴)

1. Function Invocation Pattern (함수 호출 패턴)

함수를 단순히 호출하는 패턴은 가장 기본적인 패턴으로, 함수 이름을 통해 호출됩니다. 이 호출 패턴에서 this는 전역 객체 (global object) 를 참조합니다.

function greet() {
  console.log("Hello, world!");
}

greet(); // "Hello, world!"

2. Method Invocation Pattern (메서드 호출 패턴)

객체의 프로퍼티로서 함수가 할당되어 있는 경우, 해당 함수는 메서드로 간주되며, 메서드를 호출하는 패턴입니다. 이 호출 패턴에서 this는 해당 메서드가 속한 객체를 참조합니다.

const person = {
  name: "John",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // "Hello, my name is John"

3. Constructor Invocation Pattern (생성자 호출 패턴)

자바스크립트는 생성자 함수를 통해 새로운 객체를 생성할 수 있습니다. 생성자 함수는 new 키워드와 함께 호출되며, 이 호출 패턴에서 this는 새롭게 생성되는 객체를 참조합니다.

function Person(name) {
  this.name = name;
}

const john = new Person("John");
console.log(john.name); // "John"

4. Apply Invocation Pattern (apply 호출 패턴)

apply() 메서드는 어떤 객체에 대해 함수를 호출하는 메서드입니다. 첫 번째 인자로 함수에서 참조할 this 값을, 두 번째 인자로는 함수의 인자들의 배열을 전달합니다.

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

const person = {
  name: "John"
};

greet.apply(person, ["Hello"]); // "Hello, my name is John"

5. Bind Invocation Pattern (bind 호출 패턴)

bind() 메서드는 어떤 객체에 대해 함수를 호출하는 새로운 함수를 생성합니다. 이 호출 패턴은 this 값을 영구적으로 바인딩하기 위해 사용됩니다.

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

const person = {
  name: "John"
};

const boundGreet = greet.bind(person);
boundGreet("Hello"); // "Hello, my name is John"

정리

이렇게 다양한 호출 패턴을 사용하여 자바스크립트 함수를 호출할 수 있습니다. 각 호출 패턴에 따라 this의 값이 달라지며, 함수의 인자들을 다르게 전달할 수 있습니다. 호출 패턴을 명확히 이해하고 올바르게 활용함으로써 더욱 체계적이고 효과적인 코드를 작성할 수 있습니다.

이상으로 자바스크립트 함수 호출 패턴에 대한 간략한 설명을 마치겠습니다. 다음 글에서는 메서드 호출 패턴과 생성자 호출 패턴에 대해 좀 더 자세히 살펴보도록 하겠습니다.