▶ JavaScript Functions

JavaScript Function Invocation

JavaScript Function Invocation: 함수 호출 방식

*JavaScript 함수 호출(Function Invocation)**은 함수가 정의된 후에 실제로 실행되는 과정을 의미합니다. 함수가 호출될 때, 호출 방식에 따라 this 키워드의 바인딩이 달라지며, 함수의 동작도 차이가 생길 수 있습니다. JavaScript는 다양한 방식으로 함수를 호출할 수 있으며, 각 방식에 따라 함수의 실행 컨텍스트와 매개변수 처리 방식이 달라집니다.

이 가이드는 JavaScript에서 함수를 호출하는 다양한 방식과 각 방식의 특징을 설명합니다.

1. 일반 함수 호출

일반 함수 호출은 가장 기본적인 호출 방식입니다. 함수명을 사용해 함수를 호출하며, 이때 **this**는 전역 객체에 바인딩됩니다. 브라우저 환경에서는 this가 window 객체를 참조하고, Node.js 환경에서는 global 객체를 참조합니다.

1.1. 일반 함수 호출 예시

function greet() {
    console.log('Hello!');
}

greet();  // 함수 호출

1.2. `this`의 바인딩

function showThis() {
    console.log(this);
}

showThis();  // 브라우저에서는 window 객체 출력, Node.js에서는 global 객체 출력

2. 메서드 호출

메서드 호출은 객체의 속성으로 정의된 함수를 호출하는 방식입니다. 이 경우, **this**는 메서드를 호출한 객체를 참조합니다. 객체의 메서드는 객체의 속성과 밀접하게 관련된 동작을 수행하며, 객체 내에서 this가 해당 객체를 가리키는 것이 특징입니다.

2.1. 메서드 호출 예시

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

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

2.2. `this`의 바인딩

const person = {
    name: 'Alice',
    greet: function() {
        console.log(this);  // `this`는 person 객체를 가리킴
    }
};

person.greet();  // person 객체 출력

3. 생성자 함수 호출 (Constructor Invocation)

생성자 함수 호출은 new 키워드와 함께 함수를 호출하는 방식입니다. 이 방식으로 호출하면, 새로운 객체가 생성되며 **this**는 생성된 새로운 객체를 가리킵니다. 생성자 함수는 대문자로 시작하는 이름으로 정의하는 것이 관례입니다.

3.1. 생성자 함수 호출 예시

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

const alice = new Person('Alice', 30);
console.log(alice.name);  // 'Alice'

3.2. `this`의 바인딩

function Car(brand, model) {
    this.brand = brand;
    this.model = model;
}

const myCar = new Car('Toyota', 'Corolla');
console.log(myCar);  // { brand: 'Toyota', model: 'Corolla' }

new 키워드를 사용하면 함수 내부에서 this가 새롭게 생성된 객체를 참조합니다.
생성자 함수 내부에서 새로운 속성을 정의하고 초기화할 수 있습니다.

4. `call()`, `apply()`에 의한 호출

JavaScript에서 **call()**과 apply() 메서드를 사용하면, 함수를 호출하면서 this를 명시적으로 지정할 수 있습니다. 두 메서드는 모두 함수의 this 값을 원하는 객체로 설정하여 호출할 수 있지만, 인자를 전달하는 방식에 차이가 있습니다.

4.1. `call()` 사용 예시

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

const person = { name: 'Bob' };

introduce.call(person, 'Hello');  // Hello, my name is Bob

4.2. `apply()` 사용 예시

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

const person = { name: 'Bob' };

introduce.apply(person, ['Hi']);  // Hi, my name is Bob

4.3. 차이점

call(): 함수에 직접 인자들을 하나씩 전달합니다.
apply(): 배열 형태로 인자들을 전달합니다.

5. `bind()`에 의한 호출

*bind()*는 함수를 호출하지 않고, this가 고정된 새로운 함수를 반환합니다. 반환된 함수는 나중에 호출할 때 this 값이 고정되어 있습니다.

5.1. `bind()` 사용 예시

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

const person = { name: 'Alice' };

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

주요 특징

*bind()*는 함수를 즉시 호출하지 않고, 나중에 호출할 때 this가 고정된 상태로 실행됩니다.
이벤트 핸들러에서 자주 사용됩니다.

6. 화살표 함수 호출

화살표 함수는 this를 상위 스코프에서 상속받습니다. 즉, 화살표 함수 내부에서 **this는 자신을 포함하는 외부 함수나 객체의 this**와 동일합니다. 이 특징 때문에 화살표 함수는 call(), apply(), **bind()**로 this 값을 변경할 수 없습니다.

6.1. 화살표 함수에서 `this` 예시

const person = {
    name: 'Alice',
    greet: () => {
        console.log(this.name);  // `this`는 전역 객체를 참조 (화살표 함수는 상위 스코프의 `this`를 상속)
    }
};

person.greet();  // undefined (전역 객체에는 `name`이 정의되지 않음)

6.2. 화살표 함수에서의 `this` 바인딩

function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++;
        console.log(this.age);  // 화살표 함수는 상위 스코프의 `this`를 참조
    }, 1000);
}

const p = new Person();  // 1, 2, 3, 4...

화살표 함수는 자신이 정의된 **상위 스코프의 this*를 그대로 사용합니다.
일반 함수와 달리 화살표 함수는 this 바인딩을 변경할 수 없으므로, 이벤트 핸들러나 콜백 함수에서 유용하게 사용됩니다.

7. 즉시 실행 함수 (IIFE) 호출

*즉시 실행 함수(IIFE)**는 정의되자마자 즉시 호출되는 함수입니다. 이를 통해 변수의 스코프를 제한하고, 전역 변수 오염을 방지할 수 있습니다.

7.1. IIFE 사용 예시

(function() {
    console.log('This function is immediately invoked.');
})();  // This function is immediately invoked.

주요 특징

정의와 동시에 실행되는 함수입니다.
전역 오염 방지를 위해 변수를 지역 스코프로 캡슐화하는 데 유용합니다.

요약

JavaScript에서 함수 호출 방식에 따라 this 키워드의 바인딩이 다르게 동작하며, 함수의 동작도 달라집니다.

일반 함수 호출: 함수가 전역 객체에 바인딩되어 호출됩니다.
메서드 호출: 객체의 메서드로 호출될 때 **this*는 메서드를 호출한 객체를 참조합니다.
생성자 함수 호출: new 키워드로 호출되며, 새로운 객체가 생성되고 **this*는 그 객체를 가리킵니다.
call()와 apply() 호출: this 값을 명시적으로 설정하여 함수를 호출합니다.
bind() 호출: **this*가 고정된 새로운 함수를 반환합니다.
화살표 함수 호출: **상위 스코프의 this*를 상속받아, **this 바

인딩을 변경할 수 없습니다**.

즉시 실행 함수 호출: 함수가 정의되자마자 실행되어, 변수 스코프를 캡슐화할 수 있습니다.

각 호출 방식에 따른 this 바인딩의 차이를 이해하는 것은 JavaScript 함수의 동작 방식을 명확히 이해하는 데 매우 중요합니다.

코딩 스쿨 JavaScript