[JavaScript] 화살표 함수

이 글은 ko.javascript.io의 화살표함수 기본 편을 참고하였습니다.

 

 

화살표 함수

 

함수 표현식으로 완벽하게 함수를 표현할 수도 있지만, 화살표 함수를 사용하면 더욱 간결하고 단순한 문법으로 함수를 표현할 수 있다.

 

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

위와 같이 표현하면 sum 이라는 함수는 a와 b를 인자로 받고, a + b 라는 표현식을 평가하고 그 결과를 반환한다.

위의 화살표 함수를 원래 함수 표현식으로 나타내면 아래와 같다.

 

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

 

인수가 하나밖에 없으면 인수를 감싸는 소괄호를 생략할 수도 있다. 위의 경우에는 a, b의 두 인자를 가지고 있어 생략할 수 없지만 아래와 같은 예를 보자.

 

let double = n => n * 2;

// let double = function(n) { return n * 2 }; 와 유사

 

만약, 인자가 하나도 없을 경우에는 괄호를 비워놓으면 된다. 다만, 괄호를 생략할 수는 없다.

 

let printHi = () => alert("Hi");

 

화살표 함수를 처음 접하면 가독성이 떨어지는 것이 사실이다.

하지만 익숙해지면 타이핑을 적게 해도 함수를 만들 수 있어 편리하다.

 

 

본문이 여러 줄일 경우

 

평가해야 할 표현식이 여러 개인 함수가 있을 수 있다.

이 때는 중괄호 안에 expression을 넣어주어야 한다.

또한, return 을 사용해  결괏값으로 무엇을 반환해 줄 것인지 명시적으로 표현해야 한다.

 

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

 

함수 표현식으로 만든 아래 함수를 화살표 함수로 바꾸어보자.

 

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

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

위에서 함수 표현식으로 작성된 코드는 아래의 ask함수 호출 부분이다.

 

따라서 

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

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

이처럼 표현할 수 있다.

 

//문제제기 및 피드백 언제든지 감사히 받겠습니다.​