자바스크립트의 this: 개념, 활용, 장단점, 예제 코드

자바스크립트의 this: 개념, 활용, 장단점, 예제 코드

this란?

자바스크립트에서 this는 함수가 어떻게 호출되는지에 따라 동적으로 바인딩되는 특별한 키워드입니다. this는 함수 내에서 현재 실행 중인 컨텍스트를 참조하며, 호출 방식에 따라 다르게 동작합니다.

역할

this의 주된 역할은 다음과 같습니다.

1. 객체의 속성 참조: 메소드 내에서 객체의 속성에 접근하기 위해 사용됩니다.
2. 생성자 함수: 생성자 함수에서 객체를 생성할 때, 새로운 인스턴스를 가리킵니다.
3. 이벤트 핸들러: 이벤트 핸들러 함수 내에서 이벤트가 발생한 요소를 참조합니다.

사용 상황

1. 객체의 메소드에서

const obj = {
  name: 'MyObject',
  logName: function() {
    console.log(this.name);
  }
};

obj.logName(); // 출력: MyObject

2. 생성자 함수에서

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

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

3. 이벤트 핸들러에서

const button = document.getElementById('myButton');

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

장단점

장점

• 유연한 활용: 다양한 상황에서 동적으로 컨텍스트에 바인딩되어 유연하게 활용 가능합니다.
• 재사용성: 함수를 여러 컨텍스트에서 사용할 수 있도록 도와줍니다.

단점

• 혼동의 여지: 코드가 복잡해질 경우, this가 어떤 값을 참조하는지 혼동이 발생할 수 있습니다.
• Arrow Function과 차이: Arrow Function은 자체적인 this를 가지지 않기 때문에, 사용 시 주의가 필요합니다.

예제 코드

1. 객체의 메소드에서의 this 활용

const calculator = {
  value: 0,
  add: function(num) {
    this.value += num;
  }
};

calculator.add(5);
console.log(calculator.value); // 출력: 5

2. 생성자 함수에서의 this 활용

function Car(model) {
  this.model = model;
}

const myCar = new Car('Tesla');
console.log(myCar.model); // 출력: Tesla

3. 이벤트 핸들러에서의 this 활용

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
  this.disabled = true;
  console.log('Button clicked!');
});

연관된 기술

Arrow Function

Arrow Function은 자체적인 this를 가지지 않고, 주변 스코프의 this를 상속받습니다. 이로 인해 함수가 어디에서 정의되었는지에 따라 this가 결정되므로 주의가 필요합니다. Arrow Function은 메소드로 사용할 때보다 일반적인 함수로 사용될 때 더 적절합니다.

const myFunction = () => {
  console.log(this); // 상위 스코프의 this를 참조
};

this의 이해는 자바스크립트에서 핵심적인 부분 중 하나이며, 적절한 활용은 코드의 가독성과 유지보수성에 큰 영향을 미칩니다.