[this, 화살표 함수] Javascript this 완전정복!

안녕하세요! 오늘은 좀 개념적인 부분인 자바스크립트의 this에 대해서 알아보도록 하겠습니다.

우선 this는 생성자 혹은 메소드에서 객체를 가리킬때 쓰입니다.

 

this 때에 따라 다른 값을 가리킵니다. 어디에서 선언되냐에 따라서 그 값이 바뀝니다.

1. global scope 에서 사용될 때 this 는 전역 객체를 가리킵니다.(window 객체)
2. 함수에서 사용될 때에도 this 는 전역 객체를 가리킵니다.
3. 객체에 속한 메소드에서 사용될 때 this 는 메소드가 속한 객체를 가리킵니다.
4. 객체에 속한 메소드의 내부함수에서 사용될 때 this 는 전역 객체를 가리킵니다.
5. 생성자에서 사용될 때 this 는 이 생성자로 인해 생성된 새로운 객체를 가리킵니다.

글로써 보는 것보다 코드와 함께 설명하면 훨씬 이해하기 편하니 확인해보도록 하겠습니다.

 

객체에 속한 메소드의 내부함수

3번 까지는 말 그대로 사용되는 장소가 명확하지만, 4번부터 좀 의아할 수 있습니다. 객체에 속한 메소드에서 this는 메소드가 속한 객체를 가르키는데 그 메소드에서 선언된 함수의 this는 전역객체를 가르키는 것 입니다.

const introObject = {
  name: "상준",
  nickname: "ray",
  getIntro: function() {
    introFunction = function() {
      return `${this.username}님의 닉네임은 ${this.nickname}입니다.`;
    };
    console.log(introFunction());
  }
};
introObject.getIntro(); //undefined님의 닉네임은 undefined입니다.

코드를 살펴보면, introObject라는 객체가 있습니다. 여기에는 name, nickname getIntro라는 메소드가 있습니다. 이 메소드에는 introFunction이라는 내부함수가 있습니다. 이 내부함수에서 ${this.username}과 ${this.nickname}을 호출합니다. 그리고 introObject.getIntro();를 실행하지만 여기서 username과 nickname은 undefined로 출력이 됩니다.

 

살펴보면 introObject.getIntro();는 전역스코프에서 실행이 되었습니다. 따라서 여기에서 getIntro의 내부함수인 introFunction이 this.username과 this.nickname을 호출하기 때문에 this가 window를 가르키게 되는 것이죠. 이 내부함수가 global에서도 제대로 작동하기 위해서 우리는 저 내부함수에 객체의 this를 바인딩 할 필요가 있을 것입니다.

 

화살표 함수

여러분 화살표 함수를 왜 사용하시나요? 사실 저도 제대로 몰랐을때는 그냥 작성이 편해서 마구마구 사용을 했던 기억이 있습니다 ㅠㅠ

하지만 화살표함수는 명확한 특징이 있습니다. 저의 this가 마구마구 undefined를 날려대던 이유는 무엇일까요?

 

 

화살표 함수의 특징

 

익명 함수로만 만들 수 있습니다.

생성자로 사용할 수 없습니다.

스스로의 this, argument 를 가지지 않습니다.

함수가 정의된 스코프에 존재하는 this 를 가리킵니다.

생성될 때 this 가 결정됩니다.

화살표 함수가 어떻게 사용되건, 호출되건, this 는 바뀌지 않습니다.

return하지 않아도 값이 반환됩니다.

 

코드로 확인해봅니다!

const introObject = {
  name: "상준",
  nickname: "ray",
  getIntro: function() {
    innerFunc = () => `${this.name}님의 닉네임은 ${this.nickname}입니다.`;
    console.log(innerFunc());
  }
};
introObject.getIntro(); //상준님의 닉네임은 ray입니다.

여기서 보면, 아까 undefined를 뱉어냈던 getIntro의 내부함수가 정상적으로 작동하는 것을 확인할 수 있습니다. 화살표 함수에서의 this는 자기가 정의된 스코프에 존재하는 this를 가르킵니다. 즉 자기의 상위에 있는 스코프의 this를 가르키는 것이죠. 따라서 우리는 내부함수에 어떠한 바인딩도 하지 않았지만 화살표 함수로 함수를 정의했기 때문에 this가 introObject를 가르키고 있습니다.

 

따라서 우리는 "객체의 메소드를 화살표 함수로 정의하면 안됩니다." 객체의 메소드를 화살표 함수로 정의하게 되면,그 메소드는 태생부터 this를 window를 가르키기 때문입니다.

이렇게 오늘은 Javascript의 this에 대해서 알아보았습니다. 화살표 함수는 잘 쓰면 this를 편하게 사용할 수 있을 것입니다.

도움이 되셨다면 좋겠습니다! 감사합니다.