<div id="readability-page-1" class="page"><div>
 <article id="post-js-this" itemscope="" itemprop="blogPost">
 <div>
 
 <header>
 
 
 
 

 </header>
 
 
 
 
 
 <div itemprop="articleBody">
 

 

 

 <img src="https://user-images.githubusercontent.com/33862991/132130245-56875e17-f0c1-4494-a928-cce917f536a0.jpg" alt="Marisol Benitez from Unsplash">
자바 스크립트에서 <code>this</code>는 무엇을 의미하는걸까? 아래의 코드를 개선하는 과정을 통해 <code>this</code>가 가리키는 것이 무엇인지를 알아보자.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 </pre></td><td><pre>const me = { name: 'youngjin', age: 31, hello:function(name, age) { return 'Hello, My name is '+name+'. I am '+age+'.'; } } console.log(me.hello(me.name, me.age)); </pre></td></tr></tbody></table></figure>

위의 코드는 <code>name</code>, <code>age</code>, <code>hello()</code>라는 속성을 갖는 오브젝트이다. 그리고 이 오브젝트를 이용하여 콘솔에 이름와 나이를 출력하는데, 이 때 외부에서 값을 주입받아서 출력을 하고 있다. 
언뜻봐도 비효율적인 코드이다. 이미 내부에서 속성으로 갖고있는 값을 굳이 외부에서 주입받을 필요가 있을까? 위의 코드를 조금 개선해보도록 하겠다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 </pre></td><td><pre>const me = { name: 'youngjin', age: 31, hello:function() { return 'Hello, My name is '+me.name+'. I am '+me.age+'.'; } } console.log(me.hello()); </pre></td></tr></tbody></table></figure>

이름과 나이를 외부에서 주입받지 않고, 내부 속성에 담겨있는 값을 호출했다. 이렇게하니 비효율성을 조금 덜어낸것 같다.
그런데 만약 이 오브젝트의 이름을 <code>person</code> 으로 바꾸게 되면 어떨까? 오브젝트 이름뿐 아니라 내부 속성을 호출하는 모든 함수에서 변경을 해야할 것이다. 예시 코드 속 오브젝트는 내부 함수가 하나밖에 없는 작은 오브젝트지만, 만약 내부 속성을 호출해서 사용하는 함수를 수십개 가진 오브젝트라면 어떻게 변경해야 할까?
한마디로 위의 코드는 변경에 취약한 코드이다. 어떻게 더 개선할 수 있을까?
이 때 등장하는 This이다. this를 사용해서 변경에 유연한 오브젝트로 개선해보겠다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 </pre></td><td><pre>const person = { name: 'youngjin', age: 31, hello:function() { return 'Hello, My name is '+this.name+'. I am '+this.age+'.'; } } console.log(person.hello()); </pre></td></tr></tbody></table></figure>

오브젝트 내부를 호출할 때 사용하는 키워드로 오브젝트 명 대신 <code>this</code> 키워드를 사용했다. 이렇게 되면 앞으로 오브젝트 명이 바뀔때마다 내부 속성 호출부를 수정하지 않아도 된다.
<code>this</code>가 무엇을 가리키길래 이런 역할을 할 수 있는걸까?
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 11 12 </pre></td><td><pre>const person = { name: 'youngjin', age: 31, hello:function() { return 'Hello, My name is '+this.name+'. I am '+this.age+'.'; }, whoIsThis:function() { return this; } } console.log(person.whoIsThis()); </pre></td></tr></tbody></table></figure>

<code>this</code>를 반환하는 함수를 오브젝트에 추가해서 콘솔에 출력해보았다.
<img src="https://user-images.githubusercontent.com/33862991/132128912-756eadff-f21c-48bf-b5db-18d11316ff66.png">
<code>this</code>는 오브젝트 자신을 가리키는 키워드였다. 오브젝트 자신을 가리킴으로써 내부 속성에 접근할 수 있던 것이다. 
웹 브라우저의 개발자도구를 열어서 콘솔창에서 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this">this</a>를 입력하면 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/API/Window">Window</a> 객체를 반환하는 것도 확인할 수 있다.
<img src="https://user-images.githubusercontent.com/33862991/132128914-e034faa5-fa1e-4a5e-a18a-7be0f792efdc.png">
이번엔 이름과 나이를 외부에 주입받아서 이를 속성이 참조하도록 하고, 속성을 호출해서 인삿말을 출력할 수 있도록 코드를 리팩토링해보겠다.
외부에서 변수를 받아서 속성에 주입하기 위해서는 함수(function)가 필요하다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td><pre>function person(name, age) { name= name, age=age, hello=function() { return 'Hello, My name is '+this.name+'. I am '+this.age+'.'; } } const me = new person('youngjin',31); console.log(me.hello); </pre></td></tr></tbody></table></figure>

여기까지 작성하고 콘솔에 출력하면 <code>undefined</code>가 출력된다. <code>hello()</code>라는 함수를 찾지 못한 것이다.
<code>person</code>의 내부 속성에 <code>this</code>를 선언하면 함수를 올바르게 인식할 것이다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td><pre>function person(name, age) { this.name= name, this.age=age, this.hello=function() { return 'Hello, My name is '+this.name+'. I am '+this.age+'.'; } } const me = new person('youngjin',31); console.log(me.hello()); </pre></td></tr></tbody></table></figure>

이렇게 하면 정상적으로 출력된다. <code>this</code> 키워드를 통해서 <code>person</code> 객체의 내부속성으로 argument를 대입하여 이를 외부에서 호출할 수 있었다.
 
 </div>
 </div>
	 
	
	
 

</article>
 </div></div>

기록하는개발자 | DevAndy

DevAndy

자바 스크립트에서 this는 무엇을

JavaScript - This

댓글