자바스크립트에서 this란 무엇일까?

자바스크립트에서 this란?

"this가 뭐야?"
"어.. 음.. 어떻게 호출 됐냐에 따라 값이 바뀌는.."

평소에 this가 동작하는 방식에만 집중하다 보니 this 그 자체가 뭐냐는 질문에 어떻게 답을 해야할지 우물쭈물 했던 기억이 난다.

그래서 this가 뭐냐고?

이번 포스팅의 목표는 자바스크립트에서 this가 어떻게 변하는지 관찰해보고, this가 한마디로 무엇인지 나름대로 정리를 해보는 것이다. this는 호출 방법에 따라 값이 동적으로 달라진다는 것을 항상 생각하면서 this가 어떻게 바뀌는지 알아보자.

먼저 기본적으로 this가 무엇인지 알아보자 

console.log(this)

기본적으로 this는 window다.

함수 안에서 this는 무엇일까?

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

a(); // window

이번에도 this는 window다. this가 들어 있는 함수 a를 실행한 주체가 window이기 때문이다.

객체에서도 this를 확인해보자. 객체 안에 다음과 같이 프로퍼티와 메서드를 정의했다.

const obj = {
  name: "dmchoi",
  who() {
    console.log(this.name);
  },
};

obj.who();

객체의 메서드를 호출해보니 dmchoi가 출력 되었다. 메서드를 호출한 주체가 obj이기 때문에 this가 obj로 바뀌었기 때문이다.

이번에는 객체의 메서드를 다른 변수에 할당한 후에 실행 해보자

const obj = {
  name: "dmchoi",
  who() {
    console.log(this.name);
  },
};

let a = obj.who;
console.log(a()); // undefined

dmchoi가 아니라 undefined가 나온다. 

a를 실행한 주체는 global이기 때문에 this의 값은 window 다.

window에서 name을 따로 정의해주지 않았기 때문에 undefined가 나오게 되는 것이다.

생성자 함수를 new를 이용해 호출하는 경우를 보자.

function Person(name){
	this.name = name
 }
 
 new Person("dmchoi") // {name: 'dmchoi'}

이 때의 this는 생성자 함수가 생성할 인스턴스를 가르킨다.

조금 복잡한 상황에서는 this가 어떻게 변하는지 알아보자

객체 안에 메서드로 화살표 함수가 들어가 있는 경우이다.

const obj = {
  name: "choi",
  who: () => {
    console.log(this.name);
  },
};

화살표 함수에서는 부모에게서 this를 찾기 때문에 this는 window가 된다. 

따라서 window.name의 값이 출력된다.

객체 안에 메서드가 있고 또 그 안에 이너 함수가 들어가 있는 경우이다.

const obj = {
  name: "choi",
  who() {
    console.log(this.name);
    function inner() {
      console.log(this.name);
    }
    inner();
  },
};

obj.who();

결과는 choi과 window.name 값이다.

첫 번째 콘솔은 obj가 메서드의 실행 주체기 때문에 this가 obj로 바뀐다.

두 번째 콘솔은 함수를 호출할 때 별도의 처리를 해주지 않았기 때문에 this는 window이다.

마지막으로 다음 케이스를 보자. 이번에는 이너 함수로 화살표 함수가 들어간 경우이다.

const obj = {
  name: "choi",
  who() {
    console.log(this.name);
    const inner = () => {
      console.log(this.name);
    };
    inner();
  },
};

obj.who();

this는 호출하는 방법에 따라 정해진다고 했다. obj.who()를 호출할 때 this는 obj이다. 

그러므로 첫 번째 콘솔에는 obj.name인 “choi”가 찍힌다.

두 번째 콘솔은 화살표 함수이기 때문에 this를 부모한테서 찾아야 하는데 inner의 부모는 who 다.

who의 this를 알기 위해선 who가 어떻게 호출됐는지를 보면 되고, 그 this가 곧 우리가 찾는 this다.

who의 this는 방금 위에서 찾은 obj이다. 따라서 두 번째 콘솔에는 “choi”가 찍힌다.

지금까지 함수, 객체, 생성자 그리고 복잡한 케이스에서 this가 어떻게 변하는지 알아 보았다.

그래서 this를 한 마디로 정리하자면 이렇게 말할 수 있을 것 같다.

this는 자신이 속한 객체나 실행한 함수를 가리키는 자기 참조 변수