[JS] 문맥에 따라 다른 값을 가지는 this

 

 

자기자신을 뜻하는 this는 쓰여진 위치에 따라 해석이 달라진다.
this는 함수 안에서 사용할 수 있는 변수이면서, 그 변수 안에 담겨있는 의미는 함수를 어떻게 호출하냐에 따라 달라진다.

 

 

1. this의 단독 호출, 일반 함수에서의 호출

전역 공간에서 this를 호출하는 경우 this는 전역객체 ( = global object )를 의미한다.

TEST 1

function abc() {
  console.log(this);
}
abc(); // output = window

일반함수에서 this를 사용했으므로 this는 전역객체를 의미한다.
브라우저에서 전역객체는 window 이다.

 

TEST 2

const name = 'Jessie';
function callName() {
  console.log(this.name);
}
callName(); // output = 'Jessie'

name 이라는 전역변수를 만들고, 'Jessie' 라는 value를 할당했다.

callName 이라는 일반함수에서 this는 window를 의미하고,
window 전역공간에 선언된 name 이라는 변수를 불러와 출력했으므로 'Jessie' 라는 아웃풋을 얻을 수 있다.

 

예외 : 엄격한 모드 Strict mode

'use strict';
const name = 'Jessie';
function callName() {
  console.log(this.name);
}
callName(); // error

위 코드처럼 'use strict' 를 선언해두면 this는 undefined 되어 에러표시가 뜬다.
엄격한 모드를 사용하는 이유는 실수를 오류로 처리하기 위함이다.

디폴트 값인 느슨한 모드(sloppy mode)에서는 오류를 일으킬 만한 코드를 에러표시 없이 실행해버린다.
실무에서 window를 가져오기위해 this를 사용하는 경우는 거의 없다.
그래서 실수로 글로벌변수(window)를 생성하는 것을 불가능하게 만들기 위함이다.

결국 다양한 실수들을 방지하기 위해 사용하는 것이라는데..
언젠가 더 깊게 알고싶을때 더 찾아보자.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode

Strict mode - JavaScript | MDN

 

---

 

2. 메소드에서의 this 호출

객체에는 속성과 메소드가 들어갈 수 있다.

객체 안의 속성은 key : value 의 형태로 선언되고, 객체 안에 있는 함수는 메소드라고 한다.

const name = 'Jessie';

console.log(this.name); // output : 'Jessie'

const newName = {
    name : 'Tony',
    callName : function() {
        console.log(this.name);
    }
}

newName.callName(); // output : 'Tony'

오브젝트 내부에 있는 메소드를 호출 한 경우, 그 메소드에 있는 this는 자신이 들어있는 오브젝트 자체를 의미하게 된다.

newName 이라는 오브젝트에서 callName 메소드를 실행시켰으므로,

this는 newName 을 의미하고, 그 안에 있는 name 값인 'Tony' 를 출력한다.

 

사실 이것은 전역공간에서 this를 사용했을때와 다르지 않다.

전역공간에서 선언된 this도 결국 window에 속하기 때문이다. 생략되어 있을 뿐.

 

 

예외 : 오브젝트 내 메소드를 arrow function으로 사용한 경우

const name = 'Jessie';

console.log(this.name); // output : 'Jessie'

const newName = {
    name : 'Tony',
    callName : () => {
        console.log(this.name);
    }
}

newName.callName(); // output : 'Jessie'

위와 동일한 코드에서 메소드 함수를 arrow function으로 바꾸면 결과값이 달라진다.

메소드에서 화살표함수를 사용하면 this는 메소드를 포함하는 오브젝트를 의미하지 않고, 그 외부에서 값을 가져온다.

(내부의 this값을 변화시키지 않고, 외부에 있었던 this의 값을 그대로 가져와 사용한다.)

 

자세한 내용은 더 알아볼 수 있을때 별도로 포스팅하자.

[참고자료] https://ko.javascript.info/arrow-functions

 

---

 

3. new 생성자에서의 호출

이것을 이해하려면 new 생성자에 대해 먼저 알아야한다.

2022.01.08 - [Javascript] - [JS] 객체를 생성하는 new 생성자

[JS] 객체를 생성하는 new 생성자

function Profile(name, age) {
  this.name = name,
  this.age = age,
  this.introduce = function() {
    return this.name + ' is ' + this.age;
  }
}

const profile1 = new Profile('Jessie', '20');
console.log(profile1.introduce());  // output : Jessie is 20

const profile2 = Profile('Tony', '25');
console.log(profile2.introduce()); // undefined error

new 생성자 안에서의 this는 new 생성자가 '만들' 객체를 가리킨다.

 

생성자 함수로 만들어 놓은 함수를 new 없이 그냥 호출하면 (profile2) 일반함수로 호출한 것이 되기 때문에,

this는 전역객체(window)를 의미하게 된다.

위 코드에서는 전역객체로 선언된 introduce 메소드가 없기 때문에 undefined error가 생긴다.

 

new 생성자에는 this가 꼭 필요하다.

 

생성자 함수가 객체를 만들어내기 전까지는 속성과 메소드가 어떤 변수에도 할당될 수 없기 때문이다.

new로 선언되어서 객체가 생성되고 나서야 생성자 함수 내의 속성과 메소드는 변수를 할당받고 제 역할을 할 수 있다.

 

 

여담으로.. 진짜 this 정리하면서 3,4번 뜻 부터 막혀서 거의 3주 동안 정리하기를 시도했다 말았다 했다. (연말 분위기도 한 몫ㅋ)

자바스크립트 객체지향에 대해 1도 아는바가 없으면서 this부터 공부하려니 그렇지..

듣고있는 강의에선 더 쉽게 설명해주시려고 전문용어의 사용을 지양하는 분위기인데, 나는 그게 더 어렵게 느껴진다.

결국 개념정리를 위해 구글링 하다보면 마주칠 수밖에 없는 것들인데..

제대로 된 용어를 피하면 나같은 생초짜들은 이거랑 그거랑 같은 것인줄을 모르게 된다 ㅠㅠ

그래서 최대한 많은 문서를 찾아보고 공통적으로 찾을 수 있는 내용부터 공부하면서 글로 정리하고 있다.

진짜.. 3주.. 괴로운 슬럼프(?) 구간이었다.

 

 

---

 

4. 이벤트 핸들러에서의 호출

const btn = document.querySelector('#button');

btn.addEventListener('click', fucntion(e){
  console.log(this); // output : <button id='button'> </button>
  console.log(e.currentTarget); // output : <button id='button'> </button>
})

이벤트 핸들러에서 this를 쓰면 this는 이벤트를 받는 HTML요소를 값으로 가진다.

e.currentTarget 으로 이벤트가 일어난 태그를 가져왔을때랑 동일하게 작동한다.

 

 

---

 

5. this를 제어하는 apply, call, bind

함수는 기본적으로 apply, call, bind라는 메소드를 가지고 있다.

이 메소드를 통해서 this의 값을 명시적으로 정해줄 수 있다.

 

전에는 this값을 최신문법처럼 자유롭게 사용할 수 없었기 때문에,

임의로 this의 값을 정해주기 위해서 이런 메소드 들을 사용했다고 한다.

 

여기에 필요한 예제 코드는 지금 이해가 안된다.

진짜 여기서 너무 길어지고 있으므로 일단 패쓰. 수시로 다시보고 이해할 수 있게 되면 포스팅하자.

 

 

 

---

 

 

위 내용들처럼 this가 가질 수 있는 값은 변화무쌍하다.

하지만 본질은 하나다.

this가 있는 함수가 어떤 객체의 소속인가에 따라서 this의 값이 정해진다고 보면 되는 것이다.