화살표 함수

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

⚠️ 익명 함수에서만 사용 가능

<script>
let func = (arg1, arg2, ...argN) => expression
</script>

• 인자(매개변수) arg1..argN를 받는 익명 함수 func이 만들어집니다.
• 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다.

아래 함수의 축약 버전이라고 할 수 있죠.

<script>
let func = function(arg1, arg2, ...argN) {
  return expression;
};
</script>

---

아래 두 코드는 같은 동작을 합니다.

• 화살표 함수

<script>
let sum = (a, b) => a + b;

alert( sum(1, 2) ); // 3
</script>

• 함수 표현식

<script>
let sum = function(a, b) {
  return a + b;
};

alert( sum(1, 2) ); // 3
</script>

보시는 바와 같이 (a, b) => a + b는 인수 a와 b를 받는 함수입니다. (a, b) => a + b는 실행되는 순간 표현식 a + b를 평가하고 그 결과를 반환합니다.

---

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

(아래 두 코드는 같은 동작을 합니다.)

<script>
let double = n => n * 2;

alert( double(3) ); // 6
</script>

<script>
let double = function(n) { 
return n * 2 
};

alert( double(3) ); // 6
</script>

---

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

<script>
let sayHi = () => alert("안녕하세요!"); // 인수가 없는 익명 함수

sayHi();
</script>

---

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

(아래 두 코드는 같은 동작을 합니다)

<script>
let age = prompt("나이를 알려주세요.", 18);

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

welcome();
</script>

<script>
let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  function() { alert('안녕'); } :
  function() { alert("안녕하세요!"); };

welcome();
</script>

---

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

• 중괄호 안에 평가해야 할 코드를 넣어주어야 합니다.
  그리고 return 지시자를 사용해 명시적으로 결괏값을 반환해 주어야 합니다.

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

alert( sum(1, 2) ); // 3
</script>

---

요약:

• 화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용합니다.

• 본문이 한 줄이 아니라면 다른 방법으로 화살표 함수를 작성해야 합니다.

• 중괄호 없이 작성: (...args) => expression
  화살표 오른쪽에 표현식을 둡니다. 함수는 이 표현식을 평가하고, 평가 결과를 반환합니다.

• 중괄호와 함께 작성: (...args) => { body }
  본문이 여러 줄로 구성되었다면 중괄호를 사용해야 합니다. 다만, 이 경우는 반드시 return 지시자를 사용해 반환 값을 명기해 주어야 합니다.