화살표 함수 예시

아래 함수와 같이 괄호가 있는 경우도 있고 return이 없는 형태도 있고 약간씩 다른 형태로 존해하고 있습니다.

// 예 1
const addTwo = (num) => {return num + 2;};

// 예 2
const addTwo = (num) => num + 2;

// 예 3
const addTwo = num => num + 2;
 
// 예 4
const addTwo = a => {
 const newValue = a + 2;
 return newValue;
};

가장 큰 차이점

화살표 함수가 간결한 대신 this 키워드에 대한 바인딩은 사용할 수 없습니다.

// 함수 표현식
const addNumbers = function(number1, number2) {
   return number1 + number2;
};

// 화살표 함수 표현식 
const addNumbers = (number1, number2) => number1 + number2;

// 실행 시 위 두 함수의 결과는 동일합니다.
console.log(addNumbers(1, 2));
// 결과 : 3

괄호(Parentheses)

변수가 1개인 경우는 괄호를 생략 할 수 있습니다. (있어도 됨)

// 예 - 괄호 있는경우 
const addNums = (num1, num2) => num1 + num2;

// 예 - 괄호 없는 경우
const addTwo = num => num + 2;

단, 변수가 없는 경우에는 괄호를 써야 됨.

const hello = () => "hello";
console.log(hello());
// 결과 : "hello"

화살표 기능은 나머지(rest) 매개 변수 및 destructing을(파괴) 지원하며, 두 기능 모두 괄호가 필요합니다.

• 나머지 연산자 예시

const nums = (first, ...rest) => rest;
console.log(nums(1, 2, 3, 4));
// 결과 : [ 2, 3, 4 ]

• destructing 예시

const location = {
   country: "Greece",
   city: "Athens"
};

const travel = ({city}) => city;

console.log(travel(location));
// 결고 : "Athens"

요약 - 매개 변수가 하나만 있는 경우 괄호는 옵션이지만 그 외의 경우에는 필수사항 입니다.

함수 몸체

• 간결한 ( concise body ) 문법

return 은 사용하지 않으며, 값은 반드시 return 되어야 됨

const addTwo = a => a + 2;

• 블록 ( block body ) 문법

중괄호와 return 키워드를 모두 사용하며, return 키워드를 명시 적으로 사용해야 합니다.

const multiNums = (a, b) => {return a * b;};

여러줄의 화살표 함수

아래와 같이 화살표 함수는 여러줄일 경우에도 사용할 수 있습니다.

const totalDistance = miles => {
 if (miles < 15) {
   return "Short distance";
 } else {
   return "Long distance";
 }
};

Object (개체) 와 화살표 함수

알아야 할 미묘한 구문의 차이가 하나 더 있습니다. 객체 리터럴 표현식을 반환하려는 경우 함수 본문을 괄호로 묶습니다.

const f = () => ({
 city:"Boston"
})
console.log(f().city)

아래와 같은 방법으로 사용하면 오류를 발생 시킵니다.

const f = () => {
   city:"Boston"
}
// 결과 : 오류 

맺음말

화살표 함수가 첨에는 정말 적응하기 애매 한데 나중에 적응되면 정말 편하게 사용할 수 있습니다. 하지만 실무에서 사용하는 경우에는 협업 과정에서 다른 사람들이 못알아 듣거나 grunt 에서 uglify 등을 수행할 때 정상적으로 동작하지 않는 경우도 있기 때문에 사용상에 유의를 하긴 해야 될 것 같기는 합니다.

test