자바스크립트 화살표 함수

화살표 함수 (arrow function)

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

- ES6에서 추가된 문법

기본구문

- 인자 arg1..argN을  받는 함수 function이 만들어진다 함수는 화살표 ( => ) 우측의 표현식을 평가하고 평가 결과를 반환한다.

let function = (arg1, arg2, ...argN) => expression

- 함수 표현식

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

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

- 화살표 함수

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

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

- 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다. 괄호를 생략하면 코드길이를 더 줄일 수 있다.

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

alert( double(3) ); // 6

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

let sayHi = () => alert("안녕하세요!");

sayHi();

화살표 함수는 함수 표현식과 같은 방법으로 사용가능하다. 함수를 동적으로 만들 수 있다.

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

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

welcome();

함수 본문이 한 줄인 간단한 함수는 화살표 함수를 사용해서 만드는 게 편리하다. 타이핑을 적게 해도 함수를 만들 수 있다는 장점이 있습니다.

본문이 여러 줄인 함수

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

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

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

요약

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

- 중괄호 없이 작성가능하다 (arg) => 표현식  화살표 오른쪽에 표현식을 둔다. 함수는 이 표현식을 평가하고 결과를 반환한다.

- 중괄호와 함께 작성가능 (arg) => { body } 본문이 여러줄로 구성되어 있다면 중괄호를 사용하고 return지시자를 사용해 명시적으로 반환값을 표시해야한다.

혼자해보기

- 아래 함수 표현식을 화살표 함수로 바꿔보기

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  () => alert("동의하셨습니다."),
  () => alert("취소 버튼을 누르셨습니다.")
);

 

과제는 함수 표현식을 사용해 만든 함수를 화살표 함수로 바꾸도록 요구하고 있습니다. ask는 함수 표현식이 아니라 함수 선언문을 통해 만든 함수이기에 ask 함수 자체를 함수 표현식으로 선언하도록 고치는 것은 문제가 요구한 정답은 아닌 것으로 보입니다.

 

참고자료

https://ko.javascript.info/arrow-functions-basics

화살표 함수 기본