모던 javascript 튜토리얼

화살표 함수 기본

crab. 2022. 6. 13. 07:26
  • 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다.
  • 바로 화살표 함수(arrow function)를 사용하는 것입니다.
let func = (arg1, arg2, ...argN) => expression
let func = function(arg1, arg2, ...argN) {
  return expression;
};
let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3
  • 화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있습니다.
  • 아래 예시와 같이 함수를 동적으로 만들 수 있습니다.
let age = prompt("나이를 알려주세요.", 18);

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

welcome();

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

  • 평가해야 할 표현식이나 구문이 여러 개인 함수가 있을 수도 있습니다.
  • 이때는 중괄호 안에 평가해야 할 코드를 넣어주어야 합니다.
let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

alert( sum(1, 2) ); // 3

요약

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

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

'모던 javascript 튜토리얼' 카테고리의 다른 글

Chrome으로 디버깅하기  (0) 2022.06.15
기본 문법 요약  (0) 2022.06.14
함수 표현식  (0) 2022.06.11
함수  (0) 2022.06.10
switch문  (0) 2022.06.09