Javascript ES6 - Arrow Function

Arrow Function은 기존의 함수를 좀 더 간편하게 사용하기 위한 ES6에서 새로 등장한 개념입니다

function orginalFunc () { } // 기존 함수 선언 방식

const ArrowFunc = () => { } // 화살표 함수 선언 방식


기존함수();
화살표함수();

화살표 함수는 변수에 함수를 담는 식으로 선언하는 것이 특징입니다. 함수를 실행하는 방식은 기존함수랑 동일합니다. 그렇다면 화살표함수를 왜 사용하는 것일까요? 이를 살펴보기 앞서 프로그래밍에서 함수를 사용하는 이유를 알아야합니다.

 

프로그래밍에서 함수를 사용하는 이유는 크게 두 가지입니다.

     ① 여러가지 기능을 하는 코드를 한 가지로 묶고 + 나중에 재사용할 때

     ② 입출력 기능을 만들 때

화살표 함수의 강점이 발휘되는 부분은 ②의 경우입니다. 화살표함수는 시각적으로 직관적이기 때문에 입출력기능을 만들 때 아주 유용합니다. 화살표 함수의 장점은 아래와 같습니다.

#1 parameter가 하나일 때 소괄호 생략이 가능합니다.

const 두배만들기 = (x) => { return x * 2 } 
const 두배만들기 = x => { return x * 2 } 




#2 중괄호 안에 들어가는 내용이 한 줄일 때 중괄호도 생략이 가능합니다.

const 두배만들기 = (x) => { return x * 2 }
const 두배만들기 = (x) => return x * 2




#1과 #2 종합

const 두배만들기 = x => return x * 2

 

⚠️화살표함수를 사용할 때 주의점 : this

화살표함수의 특징은 어디서 쓰든 기존에 사용된 this의 값을 바꾸지 않는다는 것입니다. 즉 바깥에서 this를 한 번 사용하고 이것의 의미를 계속 사용하고 싶을 때는 함수를 선언할 때 화살표함수를 사용하는 것이 바람직합니다.

const object1 = {
  exFunc : function(){ console.log(this); }
}

object1.exFunc();

이런 경우에는 this가 object1을 의미합니다. method에서 사용되었기 때문이죠.

 

const object1 = {
  exFunc : () => { console.log(this); }
}

object1.exFunc();

그러면 이런 경우에는 어떻게 될까요? 화살표함수 안의 this는 전에 사용한 this의 의미를 그대로 사용한다고 했습니다. 그런데 이 코드에선 this가 처음 사용되었죠? 따라서 이런 경우에는 object1 이전에 this가 사용된 것처럼 간주해서(다짜고짜 this를 선언한 case) this의 의미가 window가 됩니다.

 

화살표함수를 사용하면 편리한 점도 있지만 this를 사용할 때는 그 의미를 어떻게 사용하고 싶느냐에 따라서 신중하게 사용할 필요성이 있습니다.