자바스크립트 this란 무엇인가?

📌 What is this?

✅ this

자바스크립트를 사용함에 있어 가장 흔히 사용하는 값 중 하나는 바로 this 가 아닐까? 매번 this를 사용하면서 정확히 this가 무엇인 지에 대해 깊게 고민해본 적은 없었던 것 같다. 단순히 인터넷 강의에서 사용하다 보니 그냥 나도 모르게 익숙하게 사용했던 것 같다.

w3Schools.com에서는 this를 이렇게 정의하고 있다.

• In a method, this refers to the owner object
• Alone, this refers to the global object
• In a function, this refers to the global object
• In a function, in strict mode, this is undefined
• In an event, this refers to the element that received the event
• Methods like call(), and apply() can refer this to any object

해석해보면,

1. this는 메소드에서 소유자 개체를 나타낸다.
2. this는 단독으로 글로벌 객체를 지칭한다.
3. this는 함수에서 이것은 전역 객체를 나타낸다.
4. this는 함수에서 엄격한 모드에서는 이 값이 정의되지 않는다.
5. this는 이벤트에서 이벤트를 수신한 요소를 나타낸다.
6. this는 call( ) 및 apply( )와 같은 메서드는 임의의 객체를 참조할 수 있다.

정의만 보면 뚜렷히 어떤 의미를 내포하고 있는지 해석하기 어렵다.

👉 일반(Normal) 함수에서는 호출 위치에서 따라 this 정의
👉 화살표(Arrow) 함수에서는 자신이 선언된 함수 범위에서 this 정의

 

normal 함수 즉, 일반 함수에서 this를 사용할 때 호출 위치에 따라 this를 정의하기 때문에 호출된 위치가 sungjae.normal() 이므로 즉, sungjae가 this가 된다.

위 코드에선 arrow 함수가 선언된 범위 외부에서는 this를 정확히 무엇인 지 알 수 없다. this가 다양한 부분들을 지칭 할 수 있기 때문에 undefined가 출력이 된다.