Javascript에서의 this

JavaScript에서 this는 컨텍스트(context)를 나타내는 중요한 키워드로, 코드가 실행되는 문맥에 따라 달라진다. this의 동작을 이해하는 것은 JavaScript의 핵심 개념 중 하나이며, 다음은 this에 관한 주요 사항과 그 사용 방법을 설명한 내용이다.

전역 컨텍스트(Global Context)에서의 this

JavaScript에서 this는 기본적으로 전역 객체를 참조한다. 브라우저 환경에서는 window 객체가 전역 객체이며, Node.js에서는 global 객체가 전역 객체이다.

console.log(this); // 브라우저에서는 window, Node.js에서는 global 출력

함수 컨텍스트(Function Context)에서의 this

함수 내부에서 this는 해당 함수를 호출한 방법에 따라 달라진다.

전역 함수에서의 this

일반 함수에서 this는 기본적으로 전역 객체를 참조한다.

function showThis() {
    console.log(this); // 브라우저에서는 window, Node.js에서는 global 출력
}

showThis();

엄격 모드(strict mode)에서의 this

엄격 모드에서는 함수 내부에서 this가 undefined로 설정된다.

"use strict";

function showThisStrict() {
    console.log(this); // undefined 출력
}

showThisStrict();

메서드 컨텍스트(Object Method)에서의 this

객체의 메서드로서 함수를 호출할 때, this는 해당 메서드를 소유하고 있는 객체를 참조한다.

const obj = {
    name: "JavaScript",
    getName: function () {
        console.log(this.name); // "JavaScript" 출력
    },
};

obj.getName();

생성자 함수(Constructor)에서의 this

생성자 함수에서 this는 새로 생성된 인스턴스를 참조한다.

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

const person1 = new Person("Alice");
console.log(person1.name); // "Alice" 출력

bind, call, apply 메서드에서의 this

this의 값을 명시적으로 설정하려면 bind, call, apply 메서드를 사용할 수 있다.

call과 apply

함수를 호출하면서 this를 명시적으로 설정한다. apply는 인수를 배열로 전달하고, call은 개별적으로 전달한다.

function greet() {
    console.log(this.name);
}

const person = { name: "Bob" };

greet.call(person); // "Bob" 출력
greet.apply(person); // "Bob" 출력

bind

this가 영구적으로 바인딩된 새로운 함수를 반환한다.

function greet() {
    console.log(this.name);
}

const person = { name: "Bob" };

const boundGreet = greet.bind(person);
boundGreet(); // "Bob" 출력

화살표 함수(Arrow Function)에서의 this

화살표 함수는 독특한 this 바인딩을 가지고 있다. 화살표 함수는 자신만의 this를 가지지 않으며, 선언된 위치에서의 this를 상속받는다.

const obj = {
    name: "JavaScript",
    getName: function () {
        const arrowFunc = () => {
            console.log(this.name); // "JavaScript" 출력
        };
        arrowFunc();
    },
};

obj.getName();

화살표 함수는 주로 this 바인딩 문제를 피하기 위해 콜백 함수에서 사용된다.

결론

JavaScript에서 this는 코드가 실행되는 컨텍스트에 따라 동적으로 결정되기에, 이를 올바르게 이해하고 사용하는 것은 JavaScript 프로그래밍에서 중요한 스킬 중 하나이다. this의 동작은 함수가 어떻게 호출되었는지, 어떤 객체와 연관되어 있는지에 따라 달라지므로 다양한 상황에서 this가 어떻게 동작하는지 이해하는 것이 중요하다.