[Javascript] Arrow function (화살표 함수)

자바스크립트 ES6의 화살표 함수에 대해서 알아보겠습니다.
화살표 함수는 특정한 동작을 수행하는 함수가 아니라 기존에 사용하던 함수의 양식을 함축하여 줄여줄 수 있는 함수입니다.

 

 

기존 방식

var numbers = [3, 56, 2, 48, 5];

const newNumbers = numbers.map(function (x) {
   return x * x;
})

 

기존에 사용하던 방식대로 함수를 사용하게 되면 위와 같은 형식으로 사용할 수 있을 것입니다.
특정 함수에 수행되는 함수를 직접 기입하고 넣어줌으로서 동작되는 형식으로 주로 사용합니다.

화살표 함수를 사용하면 안에 작성된 function 부분을 없애줌으로서 코드의 양을 줄여줄 수 있습니다.

 

 

화살표 함수 적용

var numbers = [3, 56, 2, 48, 5];

const newNumbers = numbers.map( (x) => {
   return x * x;
})

화살표 함수를 적용하면 function 키워드가 사라지고 => 화살표 키워드가 추가되어 사용되게 됩니다.
또한, 매개 변수의 유무와 개수에 따라 약간의 차이가 있습니다.

 

const newNumbers = numbers.map(() => {
   return "매개변수 없음";
})

매개변수가 존재하지 않을 경우 그냥 빈 괄호로 기입하면 됩니다.

 

 

const newNumbers = numbers.map((x, y) => {
   return x + y;
})

매개변수가 다수 존재할 경우에는 , 쉼표 기호로 구분하여 괄호 안에 기입하면 됩니다.

 

 

const newNumbers = numbers.map(x => {
   return x * x;
})

그리고 매개변수가 단 하나일 때는 괄호 자체를 없애서 사용하는 것도 가능합니다.

 

 

const newNumbers = numbers.map(x => x * x);

추가적으로, 함축 시킨 함수 내부에 아무런 로직이 존재하지 않고 return 문 한줄만 존재한다면 위와 같이 중괄호 영역과 return 문 키워드를 없애서 사용이 가능합니다.

 

 

확실히 화살표 함수를 사용하게 되면 코드의 양을 줄일 수 있어 효율적일 수 있지만 처음 자바 스크립트를 접해보거나 처음 다뤄보는 개발자 분과 협업을 하게 되었을 때 이해하기 쉽지 않을 수 있기 때문에 적절하게 상황에 따라 사용하는 것이 좋습니다.