함수와 이벤트 7 - 함수 표현식

함수 표현식은 따로 함수 이름을 지정하지 않고 사용하거나, 함수를 호출하지 않고 바로 실행하는 방법이다.

---

 

 

 

익명 함수

익명 함수는 이름이 없는 함수를 말한다. 즉, 익명 함수를 선언할 때는 이름을 붙이지 않는다. 예를 들어 앞에서 살펴봤던 addNumber() 함수를 다음과 같이 이름 없이 선언할 수 있다.

 

익명 함수 선언하기

function(a, b) {	// 익명 함수 선언
	return a + b;
}

 

익명 함수는 이름이 없는데 어떻게 실행해야 할까? 익명 함수는 함수 자체가 식이므로 함수를 변수에 할당할 수 있으며, 다른 함수의 매개변수로 사용할 수도 있다.

다음은 두 수를 더하는 익명 함수를 변수 sum에 할당하는 예제이다. 이렇게 변수에 저장된 익명 함수는 함수 이름 대신 변수를 이용해 함수를 실행한다.

 

익명 함수 실행하기

 

---

 

 

 

 

즉시 실행 함수

일반적으로 함수는 선언하고 필요할 때마다 호출해서 실행하는 방법을 많이 사용한다. 하지만 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있다. 바로 즉시 실행 함 수이다. 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석한다.

 

즉시 실행 함수의 기본 형식은 다음과 같다. 함수를 식 형태로 선언하므로 마지막에 세미콜론을 붙인다.

(function() {
	명령
}());

 

(function(매개변수) {
	명령
}(인수));

 

 

예를 들어 사용자에게 이름을 받아서 인사말을 표시하는 함수는 다음과 같이 작성할 수 있다. 이 예제 소스는 따로 호출하지 않았지만 바로 실행된다.

 

즉시 실행 함수 만들기

 

 

---

 

 

 

만약 매개변수를 사용하는 함수라면 선언 부분 끝에 함수 실행을 위한 인수를 넣어 준다. 예를 들어 두 수를 더하는 함수는 다음과 같이 작성할 수 있다.

 

매개변수가 있는 즉시 실행 함수 만들기

 

---

 

 

 

 

 

화살표 함수

ES6 버전부터는 => 표기법(화살표 표기법)을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있다. 이 방법은 간단히 화살표 함수라고 하는데 익명 함수에서만 사용할 수 있다. 화살표 함수의 기본 형식은 다음과 같이 매개변수와 함수 내용으로 구성된다.

(매개변수) => { 함수 내용 }

 

지금부터 매개변수의 개수에 따라 함수를 작성하는 방법과 화살표 함수의 표기법을 간단히 살펴보겠다.

---

 

 

 

1. 매개변수가 없을 경우

매개변수가 없을 경우에는 매개변수를 넣는 괄호 안은 비워둔다. 예를 들어 매개변수 없이 간단한 인사말을 화면에 표시하는 함수는 다음과 같이 작성할 수 있다.

 

매개변수가 없는 함수

 

이 함수를 화살표 함수로 작성하면 다음과 같다.

---

 

 

 

매개변수가 없는 화살표 함수

 

 

중괄호 안에 함수 내용이 한 줄 하나뿐이라면 중괄호를 생략해서 다음과 같이 작성할 수 있다. 이때 return 문은 생략된 것으로 간주한다.

 

 

---

 

 

 

 

2. 매개변수가 1개인 경우

매개변수가 하나인 경우 매개변수의 괄호는 생략할 수 있다.

 

 

매개변수가 1개인 화살표 함수

 

---

 

 

 

 

3. 매개변수가 2개 이상인 경우

매개변수가 둘 이상인 경우 화살표 함수는 (매개변수) => { ... } 처럼 사용한다. 다음은 매개변수가 2개인 경우에 사용하는 함수이다. 매개변수를 추가하려면 괄호 안에 쉼표로 구분한다.

 

매개변수가 2개인 함수

---

 

 

 

매개변수가 2개인 화살표 함수

---

 

 

 

 

학습을 마치고

함수의 표현식에 대해서 공부해보았다. 익명함수에 대해서도 자세한 내용을 배울 수 있었다.