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

*개인적인 공부 내용을 기록하는 용도로 작성한 글 이기에 잘못된 내용을 포함하고 있을 수 있습니다.

*지속적으로 내용을 추가 및 수정할 예정이며, 잘못된 내용에 대한 지적은 언제나 환영합니다!

---

#관련 포스팅

_함수 선언문

_익명함수

_콜백함수

---

#화살표 함수

---

#화살표 함수

앞선 포스팅에서 함수표현식과 함수선언문을 이용해 함수를 선언하는 방법에 대해 정리했다. 이번 포스팅에서는 ES6버전부터 지원하는 =>표기법(화살표 표기법)을 사용해 함수선언을 더욱 간단하게 작성하는 화살표 함수의 기본적인 사용법에 대해 정리해 보고자 한다.

화살표 함수의 기본형은 다음과 같다.

// 매개변수가 없는 경우
var/let/const 함수명 = () => { 실행문 };
// 매개변수가 있는 경우
var/let/const 함수명 = (파라미터1, 파라미터2, .. ) => { 실행문 };

 

파라미터 a, b를 받아 a와 b의 합을 리턴하는 sum 함수를 선언했다.

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

[출력결과] 3

 

위 코드를 화살표 함수로 표현하면 아래와 같이 치환할 수 있다.

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

[출력결과] 3

 

만약 중괄호 안에 함수 내용이 한 줄 뿐이라면 중괄호를 생략할 수 있다. 이 때 return문은 생략된 것으로 간주한다.

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

[출력결과] 3

 

화살표 함수는 함수 표현식과 같이 사용해 함수를 동적으로 만들 수 있다. 다음 코드는 question 질문을 받아 confirm을 이용해 yes or no 를 판별한 후 그에 맞는 콜백함수(yes, no)를 호출하는 예제이다.

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

ask(
  "동의하십니까?",
  function() { alert("YES!"); },
  function() { alert("NO,,"); }
);

 

화살표 함수를 사용하면 콜백함수 부분을 아래처럼 간결하게 바꿔 줄 수 있다.

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

ask(
  "동의하십니까?",
  () => { alert("YES!"); },
  () => { alert("NO,,"); }
);

---

이상으로 화살표 함수의 사용법에 대해 간략하게 공부했다. 사실 화살표 함수는 단순히 코드를 간결하게 작성하기 위해서만 사용되지는 않는다. 화살표 함수의 심화적인 내용에 대해선 추후에 따로 정리할 예정이다.