JavaScript 명시적 this 바인딩, apply 메소드 쉽게 배우기 - 예시 코드 제공

JavaScript 명시적 this 바인딩, apply 메소드 쉽게 배우기 - 예시 코드 제공

 

 

자바스크립트에서 this 키워드의 동작은 함수가 어떻게 호출되느냐에 따라 다르게 작동합니다. 명시적으로 this를 바인딩하려면 apply 메소드를 사용할 수 있습니다. 이 글에서는 apply 메소드와 그 차이점을 살펴보고, 예시 코드를 통해 이해하겠습니다.

 

 

apply 메소드란 무엇인가?

 

apply는 모든 함수 객체에서 사용 가능한 메소드로, 함수를 호출하면서 this를 특정 객체로 명시적으로 바인딩하는 데 사용됩니다. call과 유사하지만 매개변수를 배열 형태로 받는 점이 다릅니다.

 

 

apply 메소드의 사용법

 

apply 메소드를 사용하면 함수를 호출하면서 this를 특정 객체로 바인딩하고, 함수의 매개변수를 배열로 전달할 수 있습니다. 아래는 기본적인 사용법입니다.

 

 

function greet(names) {
    console.log(`안녕, ${names[0]}와 ${names[1]}! 나는 ${this.job}이야.`);
}

const person = {
    names: ["철수", "영희"],
    job: "개발자"
};

greet.apply(person, person.names);

 

위 코드에서 apply 메소드는 greet 함수를 호출하면서 this를 person 객체로 바인딩하고, person.names 배열을 함수의 매개변수로 전달합니다.

 

 

apply 메소드를 활용한 예시

 

apply 메소드는 call과 마찬가지로 다른 컨텍스트에서 함수를 실행하고, 배열 형태의 매개변수를 전달할 때 유용합니다.

 

const car = {
    brand: "BMW",
    model: "X5",
    start: function(action) {
        console.log(`${this.brand} ${this.model}을 ${action}합니다.`);
    }
};

const bicycle = {
    brand: "Trek",
    model: "FX2"
};

car.start.apply(bicycle, ["고르는 중"]); // "Trek FX2을 고르는 중입니다."

 

위 코드에서 apply 메소드를 사용하여 car 객체의 start 함수를 bicycle 객체의 컨텍스트에서 실행하고, 배열로 "고르는 중"을 매개변수로 전달했습니다.

 

 

call과 apply의 차이점

 

call과 apply는 모두 this 바인딩을 수행하며 매개변수를 전달합니다. 차이점은 매개변수를 전달하는 방식뿐입니다. call은 각각의 매개변수를 쉼표로 구분하여 전달하고, apply는 매개변수를 배열로 전달합니다.

 

 

끝으로

 

apply 메소드는 함수를 호출하면서 this를 명시적으로 바인딩하고 배열 형태의 매개변수를 전달하는 데 사용됩니다. call과 비슷한 역할을 하지만 매개변수를 다루는 방식이 다릅니다.

 

이 글에서는 apply 메소드와 그 차이를 살펴보았습니다. 함수를 다양한 컨텍스트에서 실행하고 this를 지정할 때 apply 메소드를 사용하면 코드를 더 유연하게 작성할 수 있습니다.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript 콜백 지옥 해결법 - Promise, async/await 사용법 소개

 

JavaScript 콜백함수 사용법, 콜백 지옥, 에러 처리, 관련 소스 코드