[Javascript] 화살표 함수 기본

📌 참고 사이트

화살표 함수 기본 (javascript.info)

화살표 함수 기본

 

 

 

📋 화살표 함수 (arrow function)

📍 문법

 

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

 

위는 인자 arg1, arg2, ... , argN을 받는 함수 func를 만든 것이다.

함수 func는 화살표인 => 우측의 표현식을 평가하고 평가 결과를 반환한다.

앞서 배웠던 함수 표현식보다 더 간결하게 함수 작성이 가능하다.

 

* 인수가 하나밖에 없으면 인수를 감싸는 괄호를 생략 가능하고, 인수가 하나도 없을 때에는 괄호 안에 아무것도 적지 않으면 된다.

 

<ex 1>

 

// 인수가 여러개일 때
let sum = (a, b) => a + b;
alert(sum(1, 2));     // 3

// 인수가 하나일 때
let double = n => n * 2;
alert(double(3));     // 6

// 인수가 없을 때
let sayHi = () => alert("안녕하세요!");
sayHi();     // 안녕하세요!

 

<ex 2>

화살표 함수를 사용해서도 함수 표현식 때와 같이 함수를 동적으로 만들 수 있다.

 

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

let welcome = (age < 18) ?
  () => alert("안녕") :     // 화살표 함수 사용
  () => alert("안녕하세요!");     // 화살표 함수 사용
  
welcome();

 

 

 

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

평가해야 할 표현식이나 구문이 여러 개인 경우에도 화살표 함수 문법을 사용해 함수를 만드는 것이 가능하다. 이럴 때는 중괄호 한에 코드를 넣어주고, return 지시자를 사용해 명시적으로 결괏값을 반환해 주어야 한다.

 

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

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

 

 

 

✏️ 과제

📍 화살표 함수로 변경하기

함수 표현식을 사용해 만든 아래 함수를 화살표 함수로 바꿔 보자.

 

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

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

 

🅰️

 

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