화살표 함수 기본

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

바로 화살표 함수(arrow function)를 사용하는 것이다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌다.이렇게 코드를 작성하면 인자 arg1, ... argN를 받는 함수 func이 만들어진다. 함수 func은 화살표(=>) 우측의 표현식을 평가하고, 평가 결과를 반환한다.

아래 함수의 축약 버전이라 할 수 있다.
좀 더 구체적인 예시를 살펴보자.(a, b) => a + b는 인수 a와 b를 받고, 실행되는 순간 표현식 a+b를 평가하고 그 결과를 반환한다.

• 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다. 괄호를 생략하면 코드 길이를 더 줄일 수 있다.
• 인수가 하나도 없을 땐 괄호를 비워놓으면 된다. 다만, 이 때 괄호는 생략할 수 없다.

화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있다.

아래 예시와 같이 함수를 동적으로 만들 수 있다.
화살표 함수를 처음 접하면 익숙하지 않아 가독성이 떨어질 수 있다. 하지만 문법이 눈에 익기 시작하면 적응은 굉장히 쉽다.

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

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

위에서 소개한 화살표 함수는 '=>' 왼쪽에 있는 인수를 이용해 '=>' 오른쪽에 있는 표현식을 평가하는 함수들이었다.

🤷🏻‍♂️ 근데, 평가해야할 표현식이나 구문이 여러 개면 어떡해?

이 경우 역시 화살표 함수 문법을 사용해 함수를 만들 수 있다. 다만, 이때는 중괄호 안에 평가해야할 코드를 넣어주어야 한다. 그리고 return 지시자를 사용해 명시적으로 결과값을 반환해주어야 한다.

💡 아직 끝이 아니다!

지금까진 간결함이라는 특징을 중심으로 화살표 함수에 대해 알아보았다. 하지만 이게 다가 아니다.
화살표 함수는 여기서 소개한 기능 이외에도 다른 흥미로운 기능을 지원한다. 이 기능에 관한 얘기는 추후에 다시 다루도록 하겠다.

💻 과제

화살표 함수로 변경하기

📌 답

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

이 글은 https://ko.javascript.info/ 를 참고하여 작성하였습니다.