함수 표현식, 화살표 함수(arrow function)

유튜브 코딩앙마 채널의 '자바스크립트 기초 강좌' 를 공부하며 정리한 내용입니다.

함수 선언문과 함수 표현식은 다릅니다. 함수 선언문은 아래처럼 바로 정의를 하지만,

function sayHello(){
	console.log('Hello');
}
sayHello();

함수 표현식은 변수에 함수를 담아주는 느낌입니다.

let sayHello = function(){
	console.log('Hello');
}
sayHello();

동작하는 방법과 결과는 동일하지만 호출하는 타이밍에 차이가 있습니다. 함수선언문은 어디서든 호출이 가능합니다. 아래처럼 순서를 바꾸어도 동작합니다.

sayHello();
function sayHello(){
	console.log('Hello');
}

일반적으로 자바스크립트는 위에서 아래로 차례대로 실행되는 인터프리터 언어(interpreted language)입니다. 그래서 아래와 같은 코드는 실행이 안됩니다.

console.log(num); // Error. num is not defined.
let num = 1;

num 이라는 변수를 정의하기 전이라 이를 불러올 수 없습니다. 하지만 아래 코드는 실행됩니다.

sayHello();
function sayHello(){
	console.log('Hello');
}

이는 자바스크립트의 내부 알고리즘 때문입니다. 자바스크립트는 실행 전 초기화 단계에서 코드의 모든 함수선언문을 찾아 생성해둡니다. 그래서 함수 선언문은 전체 범위에서 호출이 가능합니다. 이를 호이스팅(hoisting) 이라고 합니다.

함수 표현식은 이렇게 동작하지 않습니다. 그래서 함수 선언문을 쓰는 것이 더 자유롭고 편합니다.

---

화살표 함수(arrow function)를 쓰면 지금까지 배운 함수를 보다 간결하게 바꿀 수 있습니다.

let add = function(num1, num2){
	return num1 + num2;
}

이렇게 작성한 함수를 아래처럼 바꿀 수 있습니다.

let add = (num1, num2) => {
	return num1 + num2;
}

function 을 생략하고 인자가 담긴 괄호 다음에 => 화살표를 삽입합니다. 만약 코드 본문이 한줄이고 리턴문이 있다면 아래처럼 바꿀 수 있습니다.

let add = (num1, num2) => (
	num1 + num2;
)

리턴문을 없애고 중괄호를 일반괄호로 바꿉니다. 리턴문이 한 줄이라면 괄호도 생략할 수 있습니다.

let add = (num1, num2) => num1 + num2;

만약 인수가 하나라면 인수 괄호도 생략 가능합니다.

let sayHello = (name) => `Hello, ${name}`;
let sayHello = name => `Hello, ${name}`;

또 인수가 없는 함수라면 괄호를 생략할 수 없습니다.

let showError = () => {
	alert('error!');
}

또 리턴이 있어도 리턴문이 여러줄이면 일반 괄호를 사용할 수 없습니다.

let add = function(num1, num2){
	const result = num1 + num2;
	return result;
}

화살표 함수는 ES6 이후 활발하게 사용되고 있습니다.