JavaScript와 TypeScript에서의 `this` 키워드 이해하기

JavaScript와 TypeScript에서 this 키워드는 매우 중요한 개념입니다. 이 글에서는 this의 동작 방식과 전통적인 함수와 화살표 함수 간의 차이를 깊이 있게 살펴보겠습니다. 이를 통해 개발자들이 코드 작성 시 this를 올바르게 이해하고 활용할 수 있도록 돕고자 합니다.

1. 전통적인 함수에서의 this

전통적인 함수에서 this는 호출되는 컨텍스트에 따라 다르게 해석됩니다. 다음은 this가 어떻게 작동하는지에 대한 몇 가지 주요 사례입니다.

1.1 객체 메서드로 호출

객체의 메서드로 호출될 경우, this는 해당 객체를 가리킵니다. 예를 들어, Person 클래스를 정의하고 그 안에 greet 메서드를 구현하면, 이 메서드는 this를 통해 해당 객체의 속성에 접근할 수 있습니다.

class Person {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    greet() {
        console.log(`안녕하세요! 제 이름은 ${this.name}입니다.`);
    }
}

const person = new Person("홍길동");
person.greet(); // 안녕하세요! 제 이름은 홍길동입니다.

1.2 일반 함수 호출

전역 스코프 또는 독립적으로 호출할 경우, this는 기본적으로 전역 객체(브라우저에서는 window)를 가리킵니다. 이 경우 this는 전역 컨텍스트를 참조하게 되어, 예상치 못한 결과를 초래할 수 있습니다.

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

showThis(); // 브라우저에서는 window 객체를 출력합니다.

1.3 call이나 apply 메서드를 사용하여 명시적으로 설정

call이나 apply 메서드를 사용하면 this 값을 원하는 객체로 변경할 수 있습니다. 이를 통해 특정 객체를 this로 설정하여 메서드를 호출할 수 있습니다.

function introduce() {
    console.log(`안녕하세요! 저는 ${this.name}입니다.`);
}

const user = { name: "김철수" };
introduce.call(user); // 안녕하세요! 저는 김철수입니다.

2. 화살표 함수의 특징

화살표 함수는 간결한 문법을 제공하며, 가장 큰 특징 중 하나는 자신만의 this 바인딩이 없다는 것입니다. 즉, 화살표 함수를 포함하는 외부 스코프의 this 값을 그대로 사용합니다. 이로 인해 화살표 함수는 일반 함수보다 더 직관적이고 오류가 적은 코드를 작성할 수 있게 해줍니다.

2.1 화살표 함수의 예

다음은 화살표 함수의 사용 예입니다:

class Counter {
    count: number;

    constructor() {
        this.count = 0;

        // 일반 함수를 사용할 경우
        setInterval(function() {
            this.count++; // 'this'가 undefined가 될 수 있음 (strict mode)
            console.log(this.count);
        }, 1000);

        // 화살표 함수를 사용할 경우
        setInterval(() => {
            this.count++; // 'this'가 클래스 인스턴스를 참조함
            console.log(this.count);
        }, 1000);
    }
}

// Counter 클래스를 인스턴스화하면 두 번째 setInterval만 정상 작동함 
const counterInstance = new Counter();

위 예제에서 첫 번째 setInterval()은 일반 함수를 사용했기 때문에 내장된 setInterval() 메서드에 의해 생성된 새로운 컨텍스트에서 실행되어 제대로 동작하지 않습니다. 반면 두 번째 예제에서는 화살표 함수를 사용하여 외부 클래스 인스턴스 (Counter)의 count 속성을 올바르게 참조하게 됩니다. 이처럼 화살표 함수는 this의 바인딩 문제를 해결하는 데 큰 도움이 됩니다.

3. 요약

• 전통적 함수:

  • 호출 맥락에 따라 달라지는 this
  • 다양한 상황(객체 메서드, 일반 호출 등)에 따라 다른 결과를 초래할 수 있음

• 화살표 함수:

  • 자신의 고유한 this 바인딩 없음
  • 항상 부모 스코프의 this를 유지하여 더 직관적이고 오류 없는 코드 작성 가능

이러한 이해를 바탕으로 TypeScript 프로젝트에서 적절한 상황에 맞게 전통적인 함수와 화살표 함수를 선택할 수 있는 능력을 기르는 것이 중요합니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있으며, 더 나아가 개발자로서의 역량을 한층 더 강화할 수 있습니다.