JavaScript 일반함수, 화살표 함수 this

✅배경

라이브러리의 원본 코드를 보면 객체의 메서드로 this가 꽤나 많이 사용됨을 알 수 있었고 대부분 화살표 함수대신 일반함수를 사용하길래 왜 es6 화살표함수가 아닌 일반함수를 사용했을까 라는 생각을 했었다. 그러는 와중에 this가 가리키는게 화살표함수와 일반함수에서 차이가 있음을 예전에 알게 되었고 이를 깊게 파다보니 꽤나 혼란스럽다는 생각이 들었다. 그래서 이를 포스팅으로 정리하고자 한다.  

 

✅사전지식

`객체의 메서드로 호출` / `객체의 메서드가 아닌 그냥 호출` 이 경우를 일단 구분할 줄 알아야한다.  

 

✅객체의 메서드로 호출될때 

`일반함수`:  함수의 스코프를 this로 가리킨다. 단 호출방법에 따라 동적으로 this가 정의된다. (1번/3번)

`화살표함수`: 화살표 함수의 스코프의 상위스코프를 this로 가리킨다. (2번)

예시코드

`normalFn`는 함수의 스코프 즉 obj를 this로 가져가고 (1번)

`other()` 의 경우 `obj.normalFn` 와 같이 객체의 메서드가 아닌 바로 호출되어 this가 전역객체로 잡힌다. (3번) 

`arrowFn()`는 함수의 스코프(obj)의 상위스코프 즉 전역객체를 thi로 가져간다. (2번)

this.name = "차은우"; 
const obj = {
    name: "서강준",
    normalFn: function () {
        console.log(this.name);
    },
    arrowFn: () => {
        console.log(this.name);
    },
};

obj.normalFn(); // 1번.서강준
obj.arrowFn(); // 2번.차은우

const other = obj.normalFn;
other(); // 3번.차은우

 

✅객체의 메서드로 호출되지 않은 경우

`일반함수`:  this는 전역객체
`화살표함수`: 화살표 함수 스코프의 상위스코프를 this로 가리킨다

예시코드(일반함수)

`innerFn()`은 함수내부에서 정의되고 호출되었다. 객체의 메서드 형태로 호출 되었기 때문에 this는 전역객체를 가리킨다.

const obj3={
  fn:function(){
    function innerFn(){
      console.log(this)
    }
    innerFn()
 }
}
obj3.fn() // window

예시코드(화살표함수)

`innerFn()`은 함수내부에서 정의되고 호출되었다. `innerFn()`의 스코프의 상위스코프 즉 obj4가 this가 된다.

const obj4={
  fn:function(){
    const innerFn=()=>{
      console.log(this)
    }
    innerFn()
 }
}
obj4.fn() // obj4

 

✅결론

객체의 메서드로 함수가 호출될 때 함수내부에서 this를 통해 해당객체의 값을 참고하는데 일반함수의 this를 이용하는게 훨씬 코드가 보기 좋고 직관적으로 이해된다. 라이브러리 내부 코드를 보면 객체의 메서드로 일반함수로 많이 쓰는데 `나였어도 화살표 함수대신 일반함수를 썻을 것이다.

 

포스팅한 내용이 많이 햇갈릴 수 있다. 나 역시도 처음에 너무 햇갈렸고 오랜뒤에 다시 위와 비슷한 코드를 보면 햇갈릴 확률이 매우 높다. 일반적인 경우라면 객체의 내부함수에 함수를 정의하여 사용하는 복잡한 경우는 잘 경험하지 않을 것이기 때문에 잘 이해가 되지 않는다면  `아래코드만 이해하자`

this.name = "차은우"; 
const obj = {
    name: "서강준",
    normalFn: function () {
        console.log(this.name);
    },
    arrowFn: () => {
        console.log(this.name);
    },
};

obj.normalFn(); // 1번.서강준
obj.arrowFn(); // 2번.차은우