[Javascript] Javascript의 `this` 키워드 이해하기

Back-End 개발자라 할지라도 Admin 페이지, 즉 백오피스 정도는 스스로 개발해야하는 경우가 많이 생깁니다. 이럴 때 보통 web을 통해 작업을 진행하는데요. front-end 개발자 만큼 깊게는 아닐지라도 전반적인 내용은 이해를 하고 있어야 합니다. 여기에 기본이 되는것이 html, css, javascript인데요. 오늘은 Javascript의 this라는 키워드에 대해서 알아보는 시간을 가지도록 하겠습니다. Java와 javascript는 구조가 많이 다르기 때문에 같은 syntax인 this일 지라도 그 용도가 많이 다릅니다.

테스트 방법

Javascript를 테스트하기 위해서는 html 파일을 만들어야 합니다. 매번 테이스트를 위해서 만드는 것은 무리가 있기 때문에 chrome의 debugging모드의 console탭을 이용하도록 하겠습니다. 아래 과정을 진행하시면 테스트 준비 과정이 마무리됩니다.

chrome을 연다.
F12 또는 오른쪽 마우스 - 검사를 클릭한다.
Console 탭에 들어간다.

this

javascript에서 this syntax는 this를 사용하는 곳이 속하고 있는 Object (객체)를 나타냅니다. 어디에서 사용하고 있냐에 따라서 this가 가리키는 객체는 달라질 수 있습니다. 아래에서 각 사용에 대해서 결과를 알아보도록 하겠습니다.

단독으로 사용되면 browser window의 global Object를 가리킵니다

var x = this;

위와 같이 단독으로 사용했을 때, this는 속하고 있는 객체인 Global Object를 가리킵니다. Browser를 사용하고 있다면 this는 [object window]를 가리킵니다. window객체는 실제로 열려있는 브라우저 창(탭)을 가리킵니다. window object 여기 나와있는 객체의 Method와 function을 사용할 수 있습니다. 실제로 위처럼 var x = this;로 할당 한 후 x.close()를 이용하면 창이 닫히는것을 확인하실 수 있습니다.

function에서 사용하면 browser window의 global Object를 가리킵니다

function myFunction() {
  return this;
}

위와 같이 function(함수)를 이용하여 사용했을 때 this는 단독으로 사용했을 때와 마찬가지로 Global Object를 가리킵니다. 따라서 아래와 같이 global Object의 Mehotds를 사용할 수 있습니다.

function에서 strict mode를 사용하면서 사용하면 undefined입니다

'use strict';
function myFunction() {
  return this;
}

'use strict';
var y = this;

javascript의 ES5에서 추가된 strict mode를 사용하면 이는 default binding을 허용하지 않는다는 의미입니다. 그래서 strict mode인 function(함수)에서 사용했을 때 this는 undefined입니다. 단독으로 사용하면 동일하게 Global Object를 가리킵니다.

여기서 나온 strict mode를 잠깐 짚고 넘어가도록 하겠습니다. strict mode는 javascript언어를 좀 더 secure하게 사용하기 위해서 ES5에서 나온 syntax입니다. 예를 들어 기본적인 javascript에서는 var xy = 10; console.log(xx); 와 같이 오타에 대해서 오류로 잡지 않고 결과적으로 undefined라는 결과를 내놓습니다. 이를 비롯하여 strct mode에서는 non-writable property, getter-only property 등이 잘못 사용될 경우 에러를 뱉도록 되어있습니다. 좀 더 자세한 설명은 link를 확인하세요.

event 안에서 사용한다면 this는 그 이벤트를 받는 element를 나타냅니다

<button onclick="this.style.display='none'">
  Click to Remove Me!
</button>

DOM의 event Handler에 this가 붙으면 해당 이벤트가 일어난 DOM을 나타냅니다. 따라서 위의 예제는 누른 버튼이 사라지게 됩니다. 이것은 실제로 체험해볼 수 있는 예제로 있으니 예제를 참고하면 이해에 좋습니다.

객체 안의 function (Method)에서 `this`를 사용하면 해당 객체(Object)를 가리킵니다

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

위 예제는 person 이라는 객체를 만들고 이 객체 안의 method에서 this를 사용하는 것입니다. 이 때 this는 person 객체를 가리킵니다. 따라서 this.firstName은 person 객체에 있는 firstName 변수이며 "John"입니다. this.lastName "Doe"가 될 것입니다.

call(), apply()에서의 this

var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
var person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
person.fullName.call(person1);  // Will return "John Doe"
person.fullName.apply(person1);  // Will return "John Doe"

먼저 call()과 apply()에 대해서 알아보고 this를 어떻게 사용하는지 알아보도록 하겠습니다. Call() mehod는 선 정의되는 javascript 메서드입니다. call()과 method의 내부 변수를 외부에서 가져와서 사용하는 javascript만의 메서드입니다. 위 예제는 person1과 person2의 객체에 변수를 두고 이를 person 객체의 fullName이라는 메서드에서 사용하는 예제입니다. apply() 또한 call()의 차이점은 w3schools_function_apply에서 자세하 확인하실 수 있습니다.

마무리

오늘은 이렇게 javascript의 this에 대해서 알아보는 시간을 가졌습니다. 저도 사실 front-end는 아직 초보와 다름이 없습니다만 이렇게 글을 정리하면서 스스로에게도 정리가 되는 기분이 듭니다. 조금씩 조금씩 여러분께 잘 설명을 드릴 수 있도록 최선을 다하겠습니다.

참고로 위 예제들은 w3school에서 가져왔습니다.

감사합니다.