브라우저 환경에서의 자바스크립트 - this

 

서론 및 요약: this를 쓰는 이유

자바스크립트에서 `this` 키워드가 많이 사용되는 이유는 코드의 유연성을 높이고, 다양한 컨텍스트에서 객체나 함수의 동작을 다르게 만들 수 있기 때문입니다. 또한 `this`는 코드 실행 시점에 따라 동적으로 바인딩되며, 함수나 객체의 실행 컨텍스트를 이해하는 데 핵심적인 역할을 합니다. 하지만 이러한 특성 때문에 `this`의 동작 방식을 이해하는 데 혼란을 겪는 경우가 많습니다. 특히 함수 호출 방식, 객체의 메서드 호출, 그리고 화살표 함수와의 차이점은 `this`를 다룰 때 주의해야 할 주요 요소입니다.

 

예를 들어서

동적 컨텍스트 바인딩

`this`는 함수나 메서드가 호출되는 컨텍스트에 따라 동적으로 바인딩됩니다. 즉, 함수가 어떻게 호출되었는지에 따라 `this`가 다르게 동작하므로, 같은 코드를 다른 방식으로 호출하거나 재사용할 때 매우 유용합니다.

• 객체 메서드 > `this` > 해당 객체 접근
• 이벤트 핸들러 > `this` > 발생 DOM 요소 접근

객체 지향 프로그래밍(OOP)

자바스크립트는 객체 지향 프로그래밍(OOP)을 지원합니다. `this`는 객체의 속성과 메서드에 접근하거나, 인스턴스의 상태를 관리할 때 핵심적으로 사용됩니다. 

• 생성자 함수나 클래스 내에서 `this`는 새로 생성된 객체를 참조

콜백 함수 및 이벤트 핸들링

자바스크립트에서 콜백 함수나 이벤트 핸들러가 많이 사용됩니다. 이들 함수에서 `this`는 함수가 호출될 때, 즉 이벤트가 발생할 때의 컨텍스트를 자동으로 참조합니다.

• 동적으로 DOM을 조작하는 코드에 유용

상속과 다형성

자바스크립트의 상속 관계에서 `this`는 상속된 메서드가 부모 객체가 아닌 자식 객체에서 동작하도록 할 수 있습니다. 이를 통해 다형성을 구현할 수 있습니다.

• 클래스 상속을 통해 메서드 오버라이딩할 때, `this`를 사용하여 부모 클래스의 메서드를 호출하거나 자식 클래스의 특성에 맞게 동작을 변경할 수 있습니다.

코드 재사용 및 유연성

`this`를 활용하면 함수나 메서드를 객체에 종속적이지 않게 작성할 수 있기 때문에, 코드의 재사용성과 유연성이 높아집니다. 객체나 클래스의 인스턴스에 따라 다르게 동작할 수 있게 되며, 다양한 시나리오에 맞춰 코드가 유동적으로 변경될 수 있습니다.

클로저와 결합

`this`와 클로저를 결합하면, 함수가 선언된 시점과 호출된 시점의 `this`가 다를 때 유용하게 사용될 수 있습니다. 예를 들어, 클로저를 이용해 `this`가 특정 컨텍스트를 유지하게 만들 수 있습니다.

 

---

this의 기본 개념

자바스크립트의 실행 컨텍스트와 this

`this`는 자바스크립트의 실행 컨텍스트(execution context)에 의해 결정됩니다. 실행 컨텍스트는 코드가 실행되는 환경을 정의하며, 전역 컨텍스트와 함수 컨텍스트에서 다르게 동작합니다.

 

전역 컨텍스트에서의 this

전역 컨텍스트에서 `this`는 브라우저 환경에서는 전역 객체인 `window`를, Node.js 환경에서는 `global` 객체를 참조합니다. 예를 들어,

console.log(this); //브라우저: window, Node.js: global

 

---

함수에서의 this

일반 함수 호출과 this

일반 함수에서 `this`는 기본적으로 전역 객체를 참조합니다. 하지만 `use strict`를 사용하면 `this`는 `undefined`로 설정됩니다.

function example() {
  console.log(this);
}
example(); //window 또는 undefined (strict mode)

strict mode에서의 this 변화

`strict mode`에서는 안전한 코딩을 위해 암시적으로 전역 객체를 참조하지 않도록 설정됩니다. 따라서 함수 내부에서 `this`는 `undefined`로 설정됩니다.

 

---

객체와 메서드에서의 this

객체 내부 메서드에서 this의 의미

객체의 메서드를 호출할 때 `this`는 메서드를 호출한 객체를 참조합니다.

const obj = {
  value: 42,
  getValue() {
    return this.value;
  }
};
console.log(obj.getValue()); // 42

중첩 함수와 this 문제 해결

중첩 함수에서는 `this`가 전역 객체를 참조하게 되는 문제가 발생합니다. 이를 해결하기 위해 `bind()`, `self` 변수, 또는 화살표 함수를 사용할 수 있습니다.

const obj = {
  value: 42,
  method() {
    function inner() {
      console.log(this); // window 또는 undefined
    }
    inner();
  }
};
obj.method();

 

---

생성자 함수와 클래스에서의 this

생성자 함수에서 this의 역할

생성자 함수는 새로운 객체를 생성하며, `this`는 생성된 객체를 참조합니다.

function Person(name) {
  this.name = name;
}
const person = new Person('Alice');
console.log(person.name); // Alice

클래스에서 this의 동작 원리

ES6 클래스에서도 `this`는 생성된 객체를 참조합니다. 하지만 클래스 메서드의 `this`는 항상 클래스 인스턴스를 참조하도록 설계되었습니다.

class Person {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}
const person = new Person('Bob');
person.sayName(); // Bob

 

---

화살표 함수와 this

화살표 함수에서의 this 특성

화살표 함수는 자신만의 `this`를 가지지 않으며, 상위 스코프의 `this`를 그대로 사용합니다. 이를 Lexical Binding이라고 합니다.

const obj = {
  value: 42,
  arrowFunc: () => {
    console.log(this.value); // undefined
  }
};
obj.arrowFunc();

화살표 함수와 일반 함수의 this 비교

화살표 함수와 일반 함수는 `this`의 바인딩 방식에서 큰 차이를 보입니다. 화살표 함수는 주로 콜백 함수에서 유용합니다.

 

---

이벤트 핸들러에서의 this

DOM 이벤트 핸들러에서의 this

DOM 이벤트 핸들러에서 `this`는 이벤트가 바인딩된 요소를 참조합니다.

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // button 요소
});

bind, call, apply 메서드로 컨텍스트 제어

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

function sayName() {
  console.log(this.name);
}
const person = { name: 'Charlie' };
sayName.call(person); // Charlie

 

---

this를 명시적으로 바꾸는 방법

bind() 메서드

`bind()`는 함수의 `this`를 영구적으로 설정한 새로운 함수를 반환합니다.

const obj = { value: 42 };
function printValue() {
  console.log(this.value);
}
const boundFunc = printValue.bind(obj);
boundFunc(); // 42

call()과 apply()의 차이

`call()`과 `apply()`는 함수 실행 시점에 `this`를 설정하며, 인수 전달 방식에서 차이가 있습니다.

function sum(a, b) {
  return this.base + a + b;
}
const obj = { base: 10 };
console.log(sum.call(obj, 1, 2)); // 13
console.log(sum.apply(obj, [1, 2])); // 13

 

---

this와 관련된 흔한 실수와 디버깅 팁

예상치 못한 this 값 문제 해결

`this` 값이 의도와 다르게 설정되는 문제를 방지하려면, 화살표 함수 또는 `bind()`를 사용하는 것이 좋습니다.

 

디버깅을 통해 올바른 this 찾기

`console.log(this)`를 사용하여 `this`가 참조하는 객체를 확인하거나, 브라우저 디버깅 도구를 활용하여 실행 컨텍스트를 분석할 수 있습니다.