[JS ES6]-[3] 화살표 함수 사용이유 핵심만 이해하기(기초)

 

안녕하세요

이번 글에서는 자바스크립트에서의  화살표함수 사용이유의 핵심만 알려드리겠습니다.

 

1. 화살표함수 사용이유

기존에 javascript에선 function 키워드로 함수를 정의했습니다.

그러나  ES6 신문법 화살표 함수를 사용하면 아래처럼 함수를 정의할 수 있습니다.

//기존
function 함수() {
}

//화살표 함수
var 함수 = () => {
}

 

function 키워드가 있는데 왜 화살표 함수가 나온 걸까요?

답은 화살표 함수에는 this 키워드가 없기 때문입니다.

 

this 키워드를 모른다면 아래 블로그를 읽어주세요

(javascript) this 핵심만 이해하기

 

this는 현재 환경에 따라 다르게 this를 지칭하는데요

그렇기에 혼란을 유발하기도 합니다. 예시를 들어보죠.

 

const cat = {
  name : "nabi",
  foo1: function() {
    const foo2 = function() {
      console.log(this.name);  //Window
    }
    //함수가 호출될 때 foo2 내부의 this는 지정되지 않아서 곧 전역 객체를 가리킴
    foo2();
  }
}
cat.foo1();  //undefined

왜 undefined가 나올까요?

왜냐면 함수 호출 시 함수 내부의 this를 지칭하지 않아서입니다.

this를 지칭하지 않는다면, this는 자동으로 전역 객체를 바라봅니다.

그래서  함수 내부에서의 this는 전역 객체가 됩니다. 

이것은 js개발자 중 한 명인 더글라스 크락포트조차 설계상의 오류라고 지적했습니다.

 

 

위의 예시를 화살표 함수로 바꾸면 잘 동작합니다.

const cat = {
  name : "nabi",
  foo1: function() {
    const foo2 = () => {
      console.log(this.name)
    }
    foo2();
  }
}
cat.foo1();  //nabi

잘 동작하는 이유는 화살표 함수에는 this가 없기 때문입니다.

this가 없기 때문에, 상위 객체인 cat 객체의 this를  지칭합니다.

 

 

왜 this키워드가 없으면 상위 객체를 지칭하나요?

js에서는 변수를 찾을 때 현재 환경에서 그 변수가 없으면 상위 환경을 검색합니다.
그렇게 상위 환경으로 올라가다, 가장 상위 환경에 도착하면 그만둡니다. 

 

 

2. 결론

결국 화살표 함수를 사용하면 항상 상위 객체의 this값을 받습니다.

환경에 따라 달라지는  this값을,

화살표 함수를 쓰면 예측하기 쉬워집니다.

그래서 function 키워드보단 화살표 함수를 쓰길 추천드립니다.