[JavaScript] 자바스크립트 "this"에 대해 알아보자

자바스크립트 ‘this’는 동작 방식이 매우 다양해 처음 봤을 땐 조금 어려운 키워드이기도 하다.

이번 글을 통해 this를 완벽하게 정복해보자.

 

일반적으로 객체 내부에서 호출되는 함수의 소유자 객체를 가리키는 키워드인데

상황에 따라 this가 가리키는 대상과 뜻이 달라지기 때문에 각 동작을 정확히 이해하는 것이 중요하다.

this는 크게 4가지의 각기 다른 뜻을 가지고 있다.

 

1. 일반 함수 내에서 쓸 떄 - 전역객체 (window)
2. 메서드 내에서 쓸 때 - 메서드를 소유하는 객체 (object)
3. 생성자(constructor) 내에서 쓸 때 - 새로 생성되는 오브젝트 (object)
4. 이벤트 리스너(eventlistener) 안에서 쓸때 - 동작하는 html 요소(e.currentTarget)

 

 

1. 일반 함수 내에서 쓸 때 - 전역객체(window)를 가리킴.

 

script 열고 그냥 이렇게 쓰거나

 console.log(this)

 

일반함수에서 이렇게 사용하고 콘솔창에 출력하면

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

 

window~~ 하면서 길게 출력될텐데

이것이 this가 가리키는 첫번째 대상인 window(전역객체)이다.

window는 브라우저 환경의 전역 객체를 의미하는데

쉽게말해 console.log(), setTimeout() 등의 함수들을 보관하고 있는 큰 객체(object) 라고 생각하면 된다.

변수를 만들때도 보관을 해주고 화면 크기, 위치 등의 정보도 담겨있다.

 

 

2. 메서드 내에서 쓸 때 - 메서드를 소유하는 객체 (object)

 

obeject 자료형에 집어넣는 함수를 메서드(method)라고 한다.

이 메서드 안에서 this를 사용하면 ‘메서드를 소유하는 객체(object)’를 가리킨다.

var item = {
  data : 'Kim',
  sayThis : function(){ console.log(this) }
}

item.saythis(); // {date : 'kim', sayThis : f}

 

위 코드에서 this는 ‘sayThis ‘ 함수를 소유하는 객체 ‘item’을 출력했다.

 

사실 1번 뜻은 2번과 같은 뜻인데

1번 뜻에서 일반 함수 안에서 this를 쓸 때는

일반 함수를 소유하는 객체인 ‘window’를 출력한 것이기 때문이다.

그 일반 함수가 window의 메서드가 되므로, 2번 뜻만 외워도 window를 가리킴을 유추할 수 있다.

 

 

3. 생성자(constructor) 내에서 쓸 때 - 새로 생성되는 오브젝트 (object)

 

생성자(constructor)는 쉽게 말하면 object를 복제해서 만들어주는 장치인데

함수 문법을 써서 안에 this를 넣어주면 이 this는 새로 생성될 object를 가리킨다.

function sayThis(){
  this.name = 'Jay'
}

// 새로운 object 출력
var nameObj = new sayThis();

 

이렇게 만들어진 새로운 object는 { name : ‘Jay’ }라는 값을 가지게 된다.

 

 

4. 이벤트 리스너(eventlistener) 안에서 쓸때 - 동작하는 html 요소(e.currentTarget)

 

document.getElementById('btn').addEventListener('click', function(e){
  console.log(this) // <button id="btn">눌러보세요<button/>
});

 

이벤트 리스너(eventlistener) 안에서 쓰이는 this는 e.currentTarget과 동등한 뜻인데.

e.currentTarget은 현재 이벤트가 동장하는 html 요소를 의미한다.

위 코드를 실행하면 "<button id="btn">눌러보세요<button/>" 등의 html 요소가 출력될 것이다.

 

 

만약 이벤트리스너(eventlistener)에 콜백함수가 사용한다면 아래 코드에서는 무엇이 출력될까?

(콜백함수 : 함수 안에 파라미터로 작동하는 함수)

 

아래는 forEach 반복문 내 콜백함수에 this가 사용된 코드이다.

document.getElementById('btn').addEventListener('click', function(e){
  var arr = [1,2,3];
  arr.forEach(function(){
    console.log(this)
  });
});

 

먼저 이벤트리스너(eventlistener)가 쓰였으니까… e.currentTarget?

틀렸다. 답은 window다.

 

이벤트리스너(eventlistener) 안에 있지만 그 안에서 forEach의 콜백함수를 한번 더 만났기 때문에

일반함수로 간주되어 this는 ‘window’를 가리키는 것이다. (object 내부의 콜백함수여도 마찬가지)

 

‘this가 어떤 함수에 들어있는가?’만 잘 파악한다면 this의 대상을 찾기가 쉬워진다.

 

 

화살표 함수(arrow fuction)

 

그런데 this는 함수를 만날때마다 값이 바뀔 수 있기 때문에 원하는 this 값을 쓰기 어려울 수 있다.

그럴때 사용하는 것이 바로 ‘화살표 함수(arrow function)’이다.

var obj = {
	names : ['Jay', 'David', 'Mark'];
  sayThis : function(){
      obj.names.forEach(() => {
        console.log(this) // {names : ['Jay', 'David', 'Mark'], sayThis : f }
      });
  }
}

 

자바스크립트에서는 함수를 만들 때 fuction () {} 대신 사용할 수 있는 ()⇒{} 라는 ‘화살표 함수’ 문법이 있다.

함수를 만드는 건 똑같지만, 화살표 함수는 내부의 this값을 변화시키지 않고 외부의 this 값을 그대로 재사용 할 수 있다.

즉, 위 코드에서는 window가 아니라 외부의 obj의 값이 출력되는 것이다.