Javascript ES6 - this 키워드의 의미

this 키워드의 의미는 4가지가 있습니다.

 

1. 다짜고짜 그냥 쓰거나 일반 함수 안에서 사용하면 window

console.log(this)

다짜고짜 이렇게 쓰면 window를 의미합니다. 그렇다면 window란 무엇일까요?

 

window란 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체입니다. 쉽게 다시 말하자면 자바스크립트에서 일반적으로 쓰는 자체 내장함수들을 보관하고 있는 ‘보관소’라고 생각하면 됩니다. window는 객체(object)의 형식을 가지고 있습니다.

 

⚠️참고

'use strict' 

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

script 최상단에 ‘use strict’를 작성해주면 자바스크립트 strict mode가 됩니다. 변수 등을 선언할 때 더 엄격하게 작성해야되는 모드를 의미합니다. strict mode에서는 this 키워드를 일반 함수에서 불렀을 때 undefined 라는 값을 반환해줍니다.

 

2. object 자료형 안에 함수를 넣었을 때 사용하면 ‘주인님’

const object1 = {
  data : 'Kim',
  exFunc : function(){ console.log('간지') } 
}

object1.exFunc(); // object1 안에 들어있는 함수를 불러오는 방법

위에서 보이는 것처럼 object 안에도 함수를 넣어줄 수 있습니다. 이 때 object 안에 들어있는 함수를 method 라고 합니다. method 안에서 this 키워드를 사용하게 되면 그 때 this는 method 자신을 포함하는 가장 가까운 object를 의미합니다. 위의 예제 코드에선 object1이 되겠네요.

 

const object2 = {
  data : {
    exFunc : function(){ console.log(this) }
  }
}
object2.data.exFunc();

그렇다면 이런 경우에는 this가 의미하는 것이 무엇일까요? 앞서 method에서 this 키워드를 사용하면 자신을 포함하는 가장 가까운 object가 된다고 했는데요. 이 예제에서는 가장 가까운 object는 object2가 아닙니다. 이 때 가장 가까운 object는 object2.data가 되겠네요.

 

그런데 사실 1번과 2번의 의미는 크게 다르지 않습니다. 1번의 경우를 살펴보죠. 1번은 그냥 다짜고짜 쓰면 window를 의미한다고 했습니다. 그리고 window는 객체(object)라고 했습니다. 다짜고짜 쓴 변수, 일반 함수들은 모두 window라는 객체 안에 담겨져 있습니다. 2번 경우에서 exFunc처럼 말이죠. 따라서 1번도 사실 알고보면 자신을 포함한 가장 가까운 object가 window이기에 window라는 결과가 나오게 된 것입니다. 사실상 1번과 2번이 같습니다. 

 

3. 이벤트리스너의 callback 함수에서 사용하면 e.currentTarget 

document.getElementById('btn').addEventListener('click', function(e){
  	console.log(this)
});

이런 코드가 있습니다. 자바스크립트로 HTML을 조작할 때 가장 많이 하는 동작 중 하나인 이벤트리스너입니다. 위 코드에서 이벤트리스너( ) 안에 있는 함수를 callback 함수라고 합니다. 이 때 이벤트리스너의 callback 함수에서 this 키워드를 사용하면 e.currentTarget을 의미합니다. e.currentTarget이란 이벤트가 현재 ‘어디서’ 발생하는지를 보여주는 것입니다. 다시 말하자면 이벤트리스너를 준 HTML 요소라고 할 수 있습니다. 위의 예제에선 id가 ‘btn’인 HTML 요소가 되겠네요.

 

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

이런 경우에선 this가 어떤 것을 의미할까요? 이벤트리스너 안에서 사용했기 때문에 e.currentTarget이 될까요? 그렇지 않습니다. this의 의미를 파악할 때는 가장 가까운 함수를 주의깊게 봐야합니다. 현재 this가 사용된 함수는 forEach의 callback 함수입니다. forEach는 객체도 아니고, 이벤트리스너도 아닙니다. 즉 forEach의 callback 함수는 다짜고짜 선언된 일반 함수입니다. 따라서 여기서 this는 window를 의미합니다.

 

const object1 = {
  names : ['김', '이', '박'];
  exFunc : function(){
	console.log(this) - ①
      	object1.names.forEach(function(){
        console.log(this);
      });
  }
}

그렇다면 ①번 표시가 있는 곳의 this는 무엇을 의미할까요? 가장 가까운 함수를 봐야한다고 했습니다. 이 때는 object1 객체 안에 있는 함수에서 사용된 것을 알 수 있습니다. 따라서 이 경우에는 this가 window가 아니라 object1을 의미한다고 할 수 있겠네요.

 

const object1 = {
  names : ['김', '이', '박'];
  exFunc : function(){
      console.log(this); - ①
      object1.names.forEach(() => {
        console.log(this);
      });
  }
}

이 경우에는 forEach의 callback 함수에서 this가 사용되었네요. 이 때도 그러면 window를 의미할까요? 그런데 이 경우는 좀 특이하게 callback 함수가 일반함수가 아니라 Arrow Function 형태로 선언되었네요. Arrow Function은 함수 내부의 this의 의미를 바꾸지 않습니다. 함수 내부의 this의 의미를 바꾸지 않고 이전에 사용된(혹은 사용된 것이라고 간주되는)this의 의미를 그대로 가지고 옵니다. 따라서 이 경우에는 this는 object1을 의미합니다. ①에서 이미 this가 object1이 됐기 때문입니다. 

 

4. constructor 안에서 사용하면 constructor로 생성하는 object

function machine(){
  this.name = 'Kim';
}

이런 코드가 있습니다. 이름이 machine인 함수네요. 여기서 정의된 machine함수는 소위 constructor(생성자)라고 하는 것입니다. 생성자는 object를 비슷한 걸 여러 개 만들 때 주로 사용합니다. 생성자로부터 만들어진 object를 instance라고 합니다. 즉 생성자 안에서 this를 사용하면 그 때 this는 instance를 의미하는 것입니다. 따라서 저 코드에 나와있는 this.name은 새로 만들어질 object에 key가 이름이고 value가 ‘Kim’인 자료를 넣으라는 뜻이 됩니다. constructor에 관한 내용은 추후에 더 다룰 예정입니다.