[모던JS] 021. [기본] 화살표 함수 기본

원문

화살표 함수(arrow function)란?

화살표 함수는 익명 함수를 사용하여, 함수 표현식에서 함수를 => 기호를 활용하여 간단하게 만드는 방법이다.
함수 선언문에서는 익명 함수를 사용할 수 없기 때문에 화살표 함수를 사용할 수 없다.

화살표 함수 기본형

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

let 변수명 = (매개변수) => 표현식

// 원래 함수
let func = function(arg1, arg2, ...) {
    return expression;
};

// 화살표 함수 적용
let func = (arg1, arg2, ...) => {
    return expression;
};

1. 인수가 하나밖에 없다면 소괄호를 생략해도 된다. 소괄호를 생략하면 코드의 길이가 더 짧아진다.

2. 인수가 아예 없다면 소괄호 생략이 아니라 소괄호를 비워두면 된다.

let double = n => n * 2; // 소괄호 생략

let sayHi = () => alert('안녕하세요'); // 인수없음

3. 실행할 표현식(body)가 한 줄인 경우에는 중괄호를 사용하지 않아도 된다.

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

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

welcome();

4. 실행할 표현식(body)가 여러줄인 경우에는 중괄호를 사용한다.

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

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

연습문제

1. 함수 표현식을 사용해 아래 함수를 화살표 함수로 바꿔보시오.

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

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

해답

let ask = (question, yes, no) => {
    (confirm(question)) ?
    yes() :
    no ()
}

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

코드 해석

1. 위의 코드를 보면 ask 함수를 함수 표현식으로 작성했기 때문에 화살표 함수 사용이 가능하다.
2. 함수 명을 없애고, 화살표를 넣어준다. 그런데 ask 함수의 표현식이 여러줄이기 때문에 중괄호는 생략할 수 없다.
3. 안에 if문이 쓰였는데 ? 연산자로 축약할 수 있다. 단, 물음표 연산자는 if...else문에 비해 가독성이 떨어진다는 단점이 있다.
4. ask 함수를 호출하는데 콜백 함수를 사용했다. 콜백 함수는 외부에서 호출하는 함수가 아니라 함수를 호출하는 ask에서만 사용되는 함수이기 때문에 익명 함수로 작성한다. 익명 함수가 가능하다는 이야기는 함수 표현식이라는 이야기이다. 즉 매개변수로 함수를 변수처럼 값으로 담았기 때문에 함수 표현식이 되는 것이고 이것도 화살표 함수로 축약할 수 있다.
5. 콜백 함수의 매개 변수의 함수 body가 alert 한 줄이기 때문에 중괄호까지 생략 가능하다.