[JavaScript 심화 시리즈] 2일차: JavaScript의 this 키워드 이해하기

2. this 키워드 이해하기

this 키워드란 무엇인가?

this 키워드는 JavaScript에서 함수가 호출될 때 설정되는 특수한 객체를 참조합니다. this의 값은 함수가 어떻게 호출되었는지에 따라 결정됩니다.

기본적인 this의 사용

1. 전역 컨텍스트에서의 this

전역 컨텍스트에서 this는 전역 객체를 참조합니다. 브라우저 환경에서는 window 객체를 가리킵니다.

console.log(this);  // 출력: [object Window]

2. 객체 메서드에서의 this

객체의 메서드에서 this는 그 메서드를 소유한 객체를 참조합니다.

let person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

person.greet();  // 출력: Hello, Alice

함수에서의 this

1. 일반 함수에서의 this

일반 함수에서 this는 전역 객체를 참조합니다. 엄격 모드(strict mode)에서는 undefined가 됩니다.

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

showThis();  // 출력: [object Window] (엄격 모드에서는 undefined)

2. 화살표 함수에서의 this

화살표 함수는 자신만의 this 바인딩을 가지지 않고, 외부 함수의 this를 상속받습니다.

let person = {
  name: 'Bob',
  greet: function() {
    let innerFunction = () => {
      console.log('Hello, ' + this.name);
    };
    innerFunction();
  }
};

person.greet();  // 출력: Hello, Bob

생성자 함수에서의 this

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

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

let alice = new Person('Alice');
console.log(alice.name);  // 출력: Alice

명시적으로 this 바인딩

1. call()

call 메서드를 사용하여 this 값을 명시적으로 설정할 수 있습니다.

function greet() {
  console.log('Hello, ' + this.name);
}

let person = {
  name: 'Charlie'
};

greet.call(person);  // 출력: Hello, Charlie

2. apply()

apply 메서드는 call과 비슷하지만, 인수를 배열로 전달합니다.

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

let person = {
  name: 'Dave'
};

greet.apply(person, ['Hello', '!']);  // 출력: Hello, Dave!

3. bind()

bind 메서드는 새로운 함수를 반환하며, this 값을 영구적으로 설정할 수 있습니다.

function greet() {
  console.log('Hello, ' + this.name);
}

let person = {
  name: 'Eve'
};

let boundGreet = greet.bind(person);
boundGreet();  // 출력: Hello, Eve

this의 사용 예제

1. 이벤트 핸들러에서의 this

DOM 이벤트 핸들러에서 this는 이벤트가 발생한 요소를 참조합니다.

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log(this);  // 출력: <button id="myButton">...</button>
});

결론

this 키워드는 JavaScript에서 매우 유용하지만, 혼란스러울 수 있는 개념입니다. this의 값은 함수가 호출되는 방식에 따라 달라지므로, 이를 이해하고 적절히 사용하는 것이 중요합니다.

다음 글에서는 프로토타입과 상속에 대해 알아보겠습니다.

다음 글에서 만나요!