함수 표현식과 화살표 함수

함수를 만드는 세 가지 방법

앞 단원에서 사용한 function 이름() {} 는 함수 선언문 입니다. 이것 말고 두 가지가 더 있습니다.

• 함수 선언문 — function greet() {}
• 함수 표현식 — 함수를 값처럼 변수에 담습니다.
• 화살표 함수 — 표현식을 더 짧게 적는 방법입니다.

셋 다 하는 일은 같습니다. 요즘 코드에서는 화살표 함수를 가장 많이 봅니다.

같은 함수를 세 가지로

function add1(a, b) {
	return a + b;
}

const add2 = function (a, b) {
	return a + b;
};

const add3 = (a, b) => a + b;

console.log(add1(1, 2), add2(1, 2), add3(1, 2));

표현식과 화살표 함수는 값을 변수에 담는 문장이라 끝에 세미콜론이 붙습니다. 선언문에는 붙이지 않습니다.

화살표 함수를 줄여 적기

화살표 함수는 모양에 따라 더 줄일 수 있습니다. 중괄호를 빼면 그 식의 결과를 그대로 돌려줍니다 — return 을 적지 않습니다.

const double = n => n * 2;
const greet = () => "안녕하세요";
const sum = (a, b) => {
	const total = a + b;
	return total;
};

console.log(double(5));
console.log(greet());
console.log(sum(3, 4));

• 매개 변수가 하나면 괄호를 빼도 됩니다 — n => n * 2
• 매개 변수가 없거나 둘 이상이면 괄호가 필요합니다 — () =>, (a, b) =>
• 중괄호를 쓰면 return 을 적어야 합니다

선언문만 미리 부를 수 있습니다

함수 선언문은 아래에 적어도 위에서 부를 수 있습니다. 표현식과 화살표 함수는 그럴 수 없습니다. 변수에 담기 전에는 아직 값이 없기 때문입니다.

console.log(declared());

function declared() {
	return "선언문은 먼저 부를 수 있습니다";
}

console.log(assigned());

const assigned = () => "화살표 함수입니다";

왜 그런지는 다음다음 단원(2.4)에서 다룹니다. 지금은 함수를 위에 두고 아래에서 부르는 차례로 적으면 어느 방법이든 문제가 없습니다.

무엇을 선택할까

• 화살표 함수 — 짧은 함수, 그리고 다른 함수에 넘길 함수(2.6)
• 함수 선언문 — 이름이 뚜렷해야 하는 함수. 오류 메시지에도 이름이 나옵니다
• 함수 표현식 — 요즘은 화살표 함수로 대체되어 새로 작성할 일이 적습니다

화살표 함수에는 한 가지 차이가 더 있는데, this 를 다루는 방식입니다. 6.3 에서 다룹니다.

처음에 자주 걸리는 것

const add = (a, b) => { a + b; };   // undefined 를 돌려줍니다
const add = (a, b) => a + b;        // 이렇게 적습니다

ReferenceError: Cannot access 'assigned' before initialization

직접 해보기

이 단원의 정리