함수 선언 방식에 따라 달라지는 this

자바스크립트 함수 선언식과 표현식, 제대로 알고 쓰기 | 요즘IT

요즘 레터 읽다가 문득 this 에 대해서 한번 정리할까 싶어서 작성.

---

 

예시 코드에선 객체 안에 3가지 방식의 메서드(sayHi, sayHello, sayBye)가 정의되어 있고, 각각 다른 방식으로 this를 바인딩.

 

1. 축약형 메서드 문법

sayHi() {
  console.log(this.name); // "아무개"
}

 

여기서 this는 항상 해당 메서드를 호출한 객체 (user) 를 가리킨다.

따라서 this.name === "아무개" → 콘솔에 "아무개" 출력

 

2. 일반 함수 표현식

sayHello: function () {
  console.log(this.name); // "아무개"
}

 

일반 함수도 객체 내부에서 메서드로 사용되면 this는 해당 객체 (user)를 참조한다.

그래서 역시 this.name === "아무개" → "아무개" 출력

 

3. 화살표 함수

sayBye: () => {
  console.log(this.name); // undefined
}

 

화살표 함수는 자신만의 this를 갖지 않고, 대신 외부(상위 스코프)의 this를 그대로 사용한다.

여기서 상위 스코프는 전역 컨텍스트거나, 함수 바깥 환경이기 때문에 this.name은 undefined 이다.

 

---

요약 비교

방식	this	출력 결과
sayHi()	user 객체	"아무개"
sayHello()	user 객체	"아무개"
sayBye()	전역 또는 바깥 컨텍스트	undefined

 

※ 객체 메서드에서 this를 사용하고 싶다면 화살표 함수 X
 (화살표 함수는 주로 콜백, map, setTimeout, 이벤트 핸들러 내부 같은 곳에서 유용)