JS에서 this를 알아보자

heauchi·2024년 8월 1일

When I Was Mentee - Front

목록 보기

17/21

this는 JavaScript에서 조금 헷갈릴 수 있는 개념입니다. this가 어디서 어떻게 쓰이는지 알고 나면 좀 더 쉽게 코드를 작성할 수 있습니다. 이번 글에서는 this가 어떤 경우에 어떻게 동작하는지 설명합니다.

이글을 읽으면 얻어갈 수 있는 정보들

다른 언어에서 사용되는 this

일반 함수에서의 this

화살표 함수에서 this

명시적바인딩

콜백 함수 this

이벤트 헨들러에서의 this

언제 어떤 것을 사용해야할까?

다른 언어에서 사용되는 this

다른 언어들, 예를 들어 Java나 C++ 같은 언어에서는 this가 항상 자기 자신을 가리킵니다. 쉽게 말해, 그 객체 자체를 뜻하는 겁니다. 하지만 JavaScript에서는 함수가 어떻게 호출되느냐에 따라 this가 달라지기때문에 조금 더 신경 써야합니다.

일반 함수에서의 this

일반 함수에서는 this가 어떻게 함수가 호출되었는지에 따라 달라지는데, 전역에서 호출되는 함수는 this가 전역 객체(브라우저에서는 window)를 가리킵니다.

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

showThis(); // window (브라우저 환경에서는 전역 객체인 window)

이처럼, 전역에서 호출된 함수는 전역 객체를 가리키지만 객체 안에서 호출되면 그 객체를 가리킵니다.

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

obj.showThis(); // heauchi

obj.showThis()처럼 객체 내부에서 호출되면 this는 그 객체 자체를 가리킵니다.

화살표 함수에서의 this

화살표 함수는 일반 함수와 다르게 동작합니다. 일반 함수는 this가 호출 방식에 따라 달라지지만, 화살표 함수는 자신이 선언된 위치의 this를 사용합니다. 다시 말해, 화살표 함수 내부의 this는 변하지 않습니다.

const obj = {
  name: 'heauchi',
  arrowFunc: () => {
    console.log(this.name);
  }
};

obj.arrowFunc(); // undefined

이 예제에서는 화살표 함수가 obj가 아니라 전역 객체의 this를 사용해서 undefined가 나dhqslek. 만약 객체의 속성을 제대로 출력하고 싶다면, 화살표 함수보다는 일반 함수를 사용하는 것이 좋습니다.

명시적 바인딩

JavaScript에서는 this를 call(), apply(), bind() 같은 메서드를 이용하여 직접 지정할 수 있는 방법이 있습니다.

call(): 함수에 this를 첫 번째 인자로 넘기고, 그 뒤에 추가 인자들을 넘겨서 함수를 실행합니다.
apply(): call()과 비슷하지만, 추가 인자들을 배열로 넘깁니다.
bind(): 함수를 실행하지 않고, this가 고정된 새로운 함수를 반환합니다.

const person = {
  name: 'yyy',
  introduce() {
    console.log(`Hello, I am ${this.name}`);
  }
};

const anotherPerson = { name: 'heauchi' };

person.introduce.call(anotherPerson); // Hello, I am heauchi

call()을 사용하면 anotherPerson의 name 속성을 this로 설정해 사용할 수 있습니다.

콜백 함수에서의 this

콜백 함수를 쓸 때 this가 자주 헷갈릴 수 있는데, 콜백 함수는 호출될 때 그 문맥에 따라 this가 달라지기 때문입니다. 이런 경우 this가 예상과 다르게 동작할 수 있습니다.

const obj = {
  name: 'heauchi',
  greet: function() {
    setTimeout(function() {
      console.log(`Hello, ${this.name}`);
    }, 1000);
  }
};

obj.greet(); // undefined (setTimeout의 콜백 함수에서 this가 전역 객체를 가리킴)

여기서는 setTimeout의 콜백 함수가 일반 함수로 호출되면서 this가 전역 객체를 가리키게 되어 name이 undefined로 출력됩니다. 이럴 때는 화살표 함수를 사용하면 this가 변하지 않습니다.

const obj = {
  name: 'heauchi',
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`);
    }, 1000);
  }
};

obj.greet(); // Hello, heauchi

이 경우 화살표 함수가 this를 상위 스코프에서 가져오기 때문에 this.name이 잘 출력됩니다.

이벤트 핸들러에서 this

이벤트 핸들러에서는 this가 이벤트가 발생한 요소를 가리킵니다. 그래서 이벤트 핸들러 안에서 this를 사용하면 클릭된 버튼이나 입력 필드 등을 가리킬 수 있어요.

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // 클릭된 버튼을 가리킴
});

이때는 this가 클릭된 button 요소를 가리키죠. 하지만 화살표 함수를 사용하면 this는 상위 스코프의 this를 가져옵니다. 즉, 더 이상 버튼을 가리키지 않게 돼요.

button.addEventListener('click', () => {
  console.log(this); // 전역 객체를 가리킴
});

언제 어떤 것을 사용해야 할까?

일반 함수: 객체의 메서드로 사용할 때 적합합니다. this가 객체를 가리켜야 할 때 사용하면 됩니다.
화살표 함수: 콜백 함수에서 this가 바뀌지 않도록 하거나, 함수가 선언된 문맥의 this를 유지하고 싶을 때 사용하면 됩니다.
명시적 바인딩 (call, apply, bind): this를 명확하게 특정 객체로 지정해야 할 때 사용하면 됩니다.