[기술면접준비] this의 동작원리와 용법, 그리고 예시

this 키워드는 JavaScript에서 함수 안에서 사용되며, 함수가 호출될 때 호출한 객체를 참조하는 데 사용됩니다.

this는 객체지향 프로그래밍에서 사용되는 용어 중 하나로, 객체의 속성에 접근하기 위해서는 그 객체의 이름을 명시해야 합니다. this를 사용하면 함수를 호출한 객체를 참조할 수 있으므로, 객체의 속성에 쉽게 접근할 수 있습니다.

예를 들어, 다음과 같이 객체를 정의하고 객체의 메소드를 호출하는 경우 this는 호출된 객체를 참조합니다.

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

person.sayHello(); // "Hello, my name is John"

위의 코드에서 person.sayHello()는 sayHello() 메소드를 호출하는 것이며, 이 때 this는 person 객체를 참조합니다.

 

JavaScript에서 this의 동작 방식은 다른 언어와 다르게 동작합니다. 대부분의 다른 언어에서는 this가 메소드를 호출한 객체를 참조하지만, JavaScript에서는 this가 함수를 호출한 객체를 참조합니다. 이러한 이유로 JavaScript에서 this는 함수가 어떻게 호출되었는지에 따라 달라집니다.

예를 들어, 다음과 같이 함수를 호출하는 경우 this는 전역 객체를 참조합니다.

function sayHello() {
  console.log(`Hello, my name is ${this.name}`);
}

const name = 'John';
sayHello(); // "Hello, my name is undefined"

위의 코드에서 sayHello() 함수를 호출하면 this는 전역 객체를 참조하게 됩니다. 이 때 name 변수는 전역 변수이므로 this.name은 undefined가 됩니다.

JavaScript에서 this를 사용할 때 주의해야 할 점은 함수를 호출하는 방법에 따라 this가 참조하는 객체가 달라질 수 있다는 것입니다. 함수를 호출할 때 call(), apply(), bind()와 같은 메소드를 사용하면 this가 참조하는 객체를 명시적으로 지정할 수 있습니다.

코드 중에서 this가 가장 큰 차이를 만드는 부분은 객체지향 프로그래밍에서 메소드를 호출할 때 this를 사용하는 부분입니다. this를 사용하지 않으면 객체의 속성에 접근할 수 없으며, 객체를 사용하는 코드가 많은 경우 this를 적절하게 사용하지 않으면 코드의 가독성과 유지보수성이 떨어질 수 있습니다.