[JavaScript] 화살표 함수 (arrow function)

화살표 함수 (ES6 이상 사용)

• 함수 표현식(익명 함수)에서만 사용 가능
• this, arguments, new 키워드 (생성자) 사용 어려움
• 함수 본문이 여러 줄인 경우 {} 사용 권장, {} 사용시 반드시 return 키워드를 통해 반환
• 실행문이 한 줄일 경우 return은 생략 가능.

변수명 = () => 실행문. // 매개변수가 없는 경우 반드시 () 작성

변수명 = para1 => 실행문. // 매개변수가 하나인 경우 () 생략 가능

변수명 = para1, para2 => { //매개변수가 있는 경우 () 생략 가능
 실행문;
 return 반환값;
}

 

아래의 두 식의 작동 방법은 동일하다.

 

function arrow(a, b) {
  return a + b;
}
alert(arrow(3, 7));

// 10 출력

함수 표현식을 화살표 함수로 작성할 때 return은 생략이 가능하다.

let arrow = (a, b) => a + b;
alert(arrow(3, 7));

// 10 출력

만약 인수가 존재하면 괄호 생략이 가능하지만 2개 이상이라면 가독성을 위해 괄호를 작성하는 것을 권장.

let alone = c => c *= 3;
alert(alone(3));

인수가 없으면 괄호만 작성.

  let empty = () => alert(`yes`);
  empty();

함수 본문이 한 줄로 짧다면 화살표 함수로 작성하는 것을 추천.

 

화살표 함수를 함수 표현식과 같은 방법으로 사용하는 것도 가능하다.

  let age = prompt("나이가 어떻게 됩니까", "");

  let friends = (age < 20) ? // 
  () => alert("19살 이하") :
  () => alert("20살 이상");

    //위 함수를 뜯어보면 아래와 같다.

  /* age의 값이 19 이하라면
    let friends = () => alert("19살 이하");
  */
  /* age의 값이 20 이상이라면
    let friends = () => alert("20살 이상");
  */

  friends();

---

함수 본문이 여러줄이라면 대괄호{} 안에 함수 본문을 작성하고 return을 작성해 값을 직접 반환해줘야 한다.