[Javascript] 사용자 정의 함수 4 - 애로우 함수

사용자 정의 함수의 정의법 그 마지막 애로우 함수입니다.

애로우함수는 ES2015부터 추가된 새로운 기능입니다.

---

애로우 함수는 완전히 새로운 방법은 아니고 함수 리터럴을 간단하게 표현하게 할 수 있도록 만들어준 방식입니다.

 

애로우 함수의 기본적인 구문은 다음과 같습니다.

(인수)=> { 함수 본체 }

익명 함수에서 비롯되었기 때문에 마찬가지로 함수명이 따로 없고 function명령 대신 =>(애로우)를 통해 인수와 함수의 본체를 이어줍니다.

 

---

let addNumber = function(num1, num2) {
    return num1 + num2;
}

console.log("합계: " + addNumber(1, 2));

이렇게 표현되던 익명 함수 리터럴을

let addNumber = (num1, num2) => {
    return num1 + num2;
}

console.log("합계: " + addNumber(1, 2));

이렇게 애로우 함수로 표현이 가능합니다.

 

앞에서 애로우 함수는 간결한 표현이 가능하다고 했는데 그 이유는 다음과 같습니다.

1. 함수 표현에서 중괄호({})생략은 불가능 했으나 애로우 함수에서 한 줄 명령인 경우에 중괄호 생략이 가능하다.

2. 문장의 반환값이 함수의 반환값으로 인정되어 return 명령도 생략이 가능하다.

3. 인수가 한개인 경우에는 인수를 감싼 괄호도 생략이 가능하다. 단, 인수가 없을때 괄호 생략은 불가능

 

그래서 위의 애로우 함수 addNumber 정의 함수를 다음과 같이 더욱 간결하게 표현이 가능합니다.

let addNumber = (num1, num2) => num1 + num2;

console.log("합계: " + addNumber(1, 2));

결과도 같다.

 

---

+ 주의점

애로우 함수가 편리하긴 하지만 객체(연관 배열) 리터럴을 반환할때는 유의해야합니다.

다음과 같이 소괄호로 객체 리터럴을 반환해주어야합니다.

let student = () => ({name : 'bam'});

괄호로 감싸지 않는다면 중괄호가 함수 블록 판정을 받게되어 name은 레이블을 의미하게 되버리기 때문에 프로그램상의 문제가 발생합니다.

---