(JS) this

자바스크립트의 모든 함수(화살표 함수 제외) 내부에서는 별도의 변수 선언없이 this라는 키워드를 사용할 수 있습니다. (비슷한 예로는 arguments 키워드가 있습니다)

function 키워드를 이용해 생성한 일반 함수와는 다르게, 화살표 함수 내부에는 this와 arguments가 존재하지 않습니다. 화살표 함수에서 이 키워드들을 사용할 경우 일반 변수와 동일하게 스코프 체인을 따라 탐색하게 됩니다.

function foo () {
  // 별도의 변수 선언없이 'this'라는 키워드를 사용할 수 있습니다. 
  console.log(this);
}

this란 어떤용도일까?

우리말에는 '나'와 '너'처럼 다른 문자에서 사용되었지만, 상황에 따라 유여낳게 적용될 수 있는 단어들이 존재한다. 이러한 단어들은 달리 바꾸지 않더라도 재사용이 가능해 재사용성 또한 훌륭하다.

자바스크립트의 this키워드 또한 유사한 용도이다. 이 키워드를 잘 활용한다면, 우리는 함수를 더욱 유연하고 재사용성이 뛰어나게 만들 수 있다. 단, 무분별한 사용은 좋지 않다. 올바른 사용처에 대한 학습을 우선하고 적동 원리에 대해 깨우친 후 시도하는 것이 좋다.

this의 정확한 판별

현직 개발자들에게도 this의 값을 정확하게 판별하는 것은 매우 어려운 부분이다.
하지만 this값을 판별할때 매우 직관적이며 쉽게 판단할 수 있는 법칙이 있다.

자바스크립트의 this키워드는 함수 내부에서 사용된다.
this 값은 this를 포함하고 있는 함수가 "어떻게 실행되느냐"에 따라 결정된다. 함수 선언 시점에 결정되는 값이 아니라, 함수 실행 시점에 결정되는 값이다.

var age = 10;

const hodoo = {
  age: 5,
  logAge: function () {
    // 대부분의 상황에서 `this`는 객체입니다.
    console.log(this.age);
  }
};

const func = hodoo.logAge;

hodoo.logAge();
func();

hodoo.logAge();와func();는 결국 같은 함수를 실행하지만 콘솔의 출력결과는 다르다. 즉,함수 실행문에 따라 this의 값이 다릅니다

this값은 함수가 실행되는 순간 결정되기 때문에 this를 판별하기 위해서는 반드시 함수의 실행문을 찾아야 한다. 함수의 실행문을 찾고, 그 함수가 어떻게 실행되었는지만 판별한다면 this값은 쉽게 판별할 수 있다.

함수가 실행될 수 있는 방식 4가지

• Regular Function Call
• Dot Notation (Object Method Call)
• Call, Apply, Bind
• "new" Keyword

위 방식에 따라, this의 값 또한 4가지 경우의 수가 있다는 의미가 된다.