Programing/JavaScript

[JavaScript] JavaScript의 this 키워드

유니얼 2024. 12. 26. 00:37
728x90

this는 JavaScript에서 중요한 키워드로, 어떤 함수가 호출되는 방식에 따라 동적으로 결정되는 실행 문맥(context)을 나타냅니다. 이 글에서는 this의 개념, 동작 방식, 그리고 C# 같은 객체 지향 언어의 this와의 차이를 비교하며, 효과적으로 this를 이해하고 활용하는 방법을 정리합니다.

1. JavaScript의 this 키워드 설명 및 개요

현재 실행 중인 코드의 실행 문맥(context) 을 참조합니다.

 

  • 현재 실행 중인 코드의 실행 문맥(context)을 참조합니다.
  • 작성 시점이 아닌 실행 시점에서 값이 결정됩니다.
  • 함수 호출 방식에 따라 동적으로 값이 변경됩니다.JavaScript에서 this는 다음과 같은 특징을 가집니다:

이러한 유연성 덕분에 다양한 프로그래밍 패턴을 구현할 수 있지만, 호출 방식에 따라 this가 달라지기 때문에 혼란을 초래할 수도 있습니다.

2. C# 등 객체 지향 프로그래밍 언어의 this와 JavaScript의 this 차이

this는 C# 같은 객체 지향 언어와 JavaScript에서 개념적으로 다릅니다.

C#에서의 this

  1. 항상 현재 객체 인스턴스를 참조: C#에서 this는 현재 메서드나 생성자가 속한 객체를 참조하며 호출 방식에 영향을 받지 않습니다.
  2. 정적 메서드에서는 사용 불가: 정적 메서드는 객체와 연결되지 않으므로 this를 사용할 수 없습니다.
  3. 예측 가능한 동작: this는 항상 고정된 값으로, 호출 방식에 관계없이 동일하게 동작합니다.
public class MyClass
{
    private int value;

    public void SetValue(int value)
    {
        this.value = value; // 클래스 필드와 매개변수 구분
    }

    public MyClass Configure()
    {
        return this; // 현재 객체 반환
    }
}

JavaScript에서의 this

  1. 호출 방식에 따라 값이 달라짐: 호출 컨텍스트에 따라 this가 동적으로 변경됩니다.
  2. 명시적 설정 가능: JavaScript는 call, apply, bind를 통해 this를 명시적으로 설정할 수 있습니다.
  3. 화살표 함수에서 상위 컨텍스트 사용: 화살표 함수는 자신만의 this를 가지지 않고, 상위 스코프의 this를 사용합니다.

차이점 요약

특징 C# JavaScript
기본 참조 대상 현재 객체 인스턴스 호출 방식에 따라 동적으로 결정
동작 방식 컴파일 시점에 고정 런타임 시점에 결정
정적 메서드에서의 사용 사용 불가 함수 자체가 독립적일 경우에도 사용 가능 (전역 객체 참조)
호출 컨텍스트에 따른 변화 호출 방식과 무관 (항상 동일) 호출 방식에 따라 값이 변경
명시적 설정 불가능 (항상 현재 객체 고정) call, apply, bind로 설정 가능

3. JavaScript에서의 this 동작 방식

1. 전역 문맥(Global Context)

  • 전역 문맥에서 this는 전역 객체를 참조합니다.
    • 브라우저 환경: window
    • Node.js 환경: global
console.log(this); // 브라우저에서는 window 출력

2. 함수 문맥(Function Context)

일반 함수 호출

  • 일반 함수에서 this는 전역 객체를 참조합니다.
  • **엄격 모드('use strict')**에서는 this는 undefined가 됩니다.
function calcAge(birthYear) {
    console.log(this); // 브라우저: window, 'use strict': undefined
}
calcAge(1990);

화살표 함수(Arrow Function)

  • 화살표 함수는 자신만의 this를 가지지 않고, **상위 스코프의 this**를 그대로 사용합니다.
const calcAgeArrow = (birthYear) => {
    console.log(this); // 전역 객체 (window)
};
calcAgeArrow(1990);

3. 메서드 호출

객체 내부의 메서드에서 호출된 경우, this는 메서드를 호출한 객체를 참조합니다.

const profile = {
    name: 'Alice',
    greet() {
        console.log(this.name); // Alice
    }
};
profile.greet();

메서드 복사 후 호출

메서드를 다른 객체에 복사하면, 호출 시 해당 객체가 this로 설정됩니다.

const anotherProfile = { name: 'Sara' };
anotherProfile.greet = profile.greet;
anotherProfile.greet(); // Sara

함수 할당 후 호출

메서드를 변수에 할당하면, this는 전역 객체를 참조합니다.

const greetFunction = profile.greet;
greetFunction(); // 브라우저: undefined (엄격 모드: undefined)

4. call, apply, bind 메서드

call

첫 번째 인자로 this를 명시적으로 설정하며, 나머지 인자는 개별적으로 전달합니다.

function sayHello() {
    console.log(`Hello, ${this.name}`);
}
const user = { name: 'John' };
sayHello.call(user); // Hello, John

apply

call과 동일하지만, 인자를 배열 형태로 전달합니다.

sayHello.apply(user, []); // Hello, John

bind

bind는 함수를 호출하지 않고, this가 고정된 새 함수를 반환합니다.

const boundSayHello = sayHello.bind(user);
boundSayHello(); // Hello, John

4. 요약

호출 방식 this의 값
전역 문맥 전역 객체 (window 또는 global)
일반 함수 호출 전역 객체 (엄격 모드에서는 undefined)
메서드 호출 메서드를 호출한 객체
화살표 함수 상위 스코프의 this
call, apply, bind 호출 명시적으로 설정한 값

5. 결론

JavaScript에서 this는 호출 방식에 따라 동적으로 변하는 실행 문맥을 나타냅니다. 이는 유연성과 강력함을 제공하지만, 혼란을 초래할 수도 있습니다.

  • C#의 this는 고정적이며 항상 현재 객체를 참조하기 때문에 명확하고 예측 가능합니다.
  • JavaScript의 this는 함수 호출 방식에 따라 값이 달라지며, 이를 이해하고 적절히 사용하는 것이 중요합니다.

JavaScript에서 this를 활용하려면 호출 컨텍스트를 명확히 파악하고, 화살표 함수, call, apply, bind 와 같은 도구를 적절히 사용하세요. 이를 통해 더 효율적이고 명확한 코드를 작성할 수 있습니다.

반응형