'this' 키워드의 다양한 활용 예시 및 코드 리뷰

안녕하세요! 오늘은 자바스크립트에서 많이 사용되는 ‘this’ 키워드에 대해 알아보고, 그 다양한 활용 예시와 코드를 리뷰해보겠습니다.

‘this’ 키워드란?

‘this’ 키워드는 자바스크립트에서 현재 실행 중인 함수나 메서드가 속한 객체를 참조하는 데 사용됩니다. 이를 통해 객체의 프로퍼티에 접근하거나 메서드를 호출할 수 있습니다.

예시 1: 객체 내부에서 ‘this’ 사용하기

const person = {
  name: 'John',
  age: 30,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

person.sayHello(); // 출력: Hello, my name is John

위 예시에서 person 객체의 sayHello 함수 내부에서 this.name을 사용하면 person 객체의 name 프로퍼티에 접근할 수 있습니다.

예시 2: 생성자 함수에서 ‘this’ 사용하기

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

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

위 예시에서 Car 생성자 함수 내부에서 this.makethis.model을 사용하여 인스턴스의 프로퍼티를 설정합니다. new 키워드로 Car 객체를 생성한 뒤에는 myCar.makemyCar.model을 통해 해당 프로퍼티에 접근할 수 있습니다.

코드 리뷰

이제 위 예시 코드를 리뷰해보겠습니다.

  1. 객체 내부에서의 ‘this’ 사용은 객체의 메서드에서 주로 사용됩니다. 이를 통해 해당 객체에 속한 프로퍼티나 다른 메서드를 참조할 수 있습니다.
  2. 생성자 함수 내부에서의 ‘this’ 사용은 인스턴스를 생성할 때 사용됩니다. ‘this’를 통해 인스턴스의 프로퍼티를 설정하고, 해당 인스턴스를 반환하는데 사용됩니다.

이외에도 ‘this’ 키워드는 다양한 상황에서 활용될 수 있으며, 자세한 사용 방법은 공식 문서를 참고하시기 바랍니다.

이상으로 ‘this’ 키워드의 다양한 활용 예시 및 코드 리뷰를 마치겠습니다. 감사합니다! #techblog #javascript