#18 - arrow function (복습)

arrow function

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법

// Before Arrow
let sum1 = function(a, b) {
    return a + b;
};
console.log(sum1(10, 20));

// With Arrow Function:
let sum2 = (a, b) => a+b;
console.log(sum2(10, 20));

(a, b) => a + b는 인수 a와 b를 받는 함수입니다.

(a, b) => a + b는 실행되는 순간 표현식 a + b를 평가하고 그 결과를 반환합니다.

 

인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다.

괄호를 생략하면 코드 길이를 더 줄일 수 있습니다.

let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일합니다.
console.log( double(3) ); // 6

 

인수가 하나도 없을 땐 괄호를 비워놓으면 됩니다. 다만, 이 때 괄호는 생략할 수 없습니다.

let sayHi = () => console.log("안녕하세요!");
sayHi();

 

화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있습니다.

아래 예시와 같이 함수를 동적으로 만들 수 있습니다.

let age = 14;
let welcome = (age < 18) ?
  () => console.log('안녕') :
  () => console.log("안녕하세요!");

welcome();

화살표 함수를 처음 접하면 가독성이 떨어집니다. 익숙지 않기 때문입니다.

하지만 문법이 눈에 익기 시작하면 적응은 식은 죽 먹기가 됩니다.

함수 본문이 한 줄인 간단한 함수는 화살표 함수를 사용해서 만드는 게 편리합니다.

타이핑을 적게 해도 함수를 만들 수 있다는 장점이 있습니다.

 

본문이 여러 줄인 화살표 함수

위에서 소개해 드린 화살표 함수들은 => 왼쪽에 있는 인수를 이용해 => 오른쪽에 있는 표현식을 평가하는 함수들이었습니다.

그런데 평가해야 할 표현식이나 구문이 여러 개인 함수가 있을 수도 있습니다. 이 경우 역시 화살표 함수 문법을 사용해 함수를 만들 수 있습니다. 다만, 이때는 중괄호 안에 평가해야 할 코드를 넣어주어야 합니다. 그리고 return 지시자를 사용해 명시적으로 결괏값을 반환해 주어야 합니다.

아래와 같이 말이죠.

 

let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

console.log( sum(1, 2) ); // 3

 

요약

화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용합니다. 본문이 한 줄이 아니라면 다른 방법으로 화살표 함수를 작성해야 합니다.

1. 중괄호 없이 작성: (...args) => expression – 화살표 오른쪽에 표현식을 둡니다. 함수는 이 표현식을 평가하고, 평가 결과를 반환합니다.
2. 중괄호와 함께 작성: (...args) => { body } – 본문이 여러 줄로 구성되었다면 중괄호를 사용해야 합니다. 다만, 이 경우는 반드시 return 지시자를 사용해 반환 값을 명기해 주어야 합니다.