애로우 함수

애로우 함수(화살표 함수)는 함수 리터럴방식을 간결하게 표현할 수 있게 해준, 단축 문법입니다.

애로우 함수는 다음과 같이 사용합니다.

const 변수 = (인자) => { 함수 본체 };

함수 리터럴, 즉, 익명 함수를 따르기 때문에 함수명은 따로 없고 변수에 담아서 사용하게됩니다. 그리고 독특하게 인자와 함수 본체를 화살표 =>로 이어서 사용합니다.

다음과 같이 함수 리터럴 방식의 함수를

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

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

애로우 함수로 바꿀 수 있습니다.

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

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

애로우 함수의 특징

애로우 함수는 문법면에서 편리한 몇 가지 특징을 갖습니다.

중괄호 생략이 가능하다.

리터럴 표현에서 중괄호{}의 생략은 불가능했는데요. 애로우 함수에서는 함수 본체가 한 줄일 경우 중괄호를 생략가능합니다.

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

//중괄호 생략가능!!
const addNumber = (num1, num2) => return num1 + num2;

return 명령의 생략

마찬가지로 함수 본체가 한 줄일 경우, 중괄호와 함께 return명령도 생략할 수 있습니다. 이는 한 줄 명령의 경우 해당 라인을 반환값으로 간주하기 때문에 return명령을 생략할 수 있는 것 입니다.

const addNumber = (num1, num2) => return num1 + num2;

// return도 생략
const addNumber = (num1, num2) => num1 + num2;

인자를 감싸는 괄호의 생략

위의 예시에서 인자들을 소괄호()로 감싸주었는데요. 만약, 인자가 한 개라면 인자를 감싸는 소괄호를 생략할 수 있습니다. 그러나 인자가 없거나, 두 개 이상이라면 생략할 수 없습니다.

const showStr = (str) => console.log(str);

//인자가 하나라면 소괄호 생략 가능!

const showStr = str => console.log(str);

애로우 함수의 주의점

애로우 함수는 함수 리터럴처럼 쓰면되기에 주의점은 함수 리터럴 방식과 비슷합니다. 하지만 추가적인 주의점이 있는데요. 바로 객체를 반환하는 경우입니다.

객체가 중괄호{}로 이루어져있기 때문에 본체가 한 줄일 때 다음과 같은 문제가 발생합니다.

const getObj = () => {name: 'Bam', age: 25};

위의 중괄호는 객체를 표현하기 위한 객체 리터럴의 중괄호 입니다. 하지만 브라우저가 스크립트를 해석할 땐 중괄호를 함수 본체를 나타내기 위한 블록으로 인식되어 프로퍼티의 키를 레이블로 인식하는 등의 문제가 발생합니다.

따라서 위와같은 문제를 방지하기 위해 객체 리터럴을 반환하는 경우, 소괄호로 묶어주는 것이 좋습니다.

const getObj = () => ({name: 'Bam', age: 25});