이 글은 고현준, 송형주 님의 인사이드 자바스크립트를 참조하여 작성한 글입니다.

함수의 다양한 형태

콜백 함수

콜백 함수는 개발자가 단지 함수를 등록하기만 하고, 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 말한다. 또한 특정 함수의 인자로 넘겨서, 코드 내부에서 호출되는 함수 또한 콜백 함수가 될 수 있다.

대표적인 콜백 함수의 사용 예가 JS에서의 이벤트 핸들러 처리이다. 웹페이지가 로드 되거나 키보드가 입력되는 등의 DOM 이벤트가 발생할 경우, 브라우저는 정의된 DOM 이벤트에 해당하는 이벤트 핸들러를 실행시킨다. 이러한 이벤트 핸들러에 콜백 함수가 등록했다면, 콜백 함수는 이벤트가 발생할 때마다 브라우저에 의해 실행되게 된다.

<!DOCTYPE html>
<html>
	<body>
		<script>
			// 페이지 로드 시 호출될 콜백 함수
				window.onload = function() {
					alert('This is the callback function.');
				};
		</script>
	</body>
</html>

즉시 실행 함수

함수를 정의함과 동시에 바로 실행하는 함수를 즉시 실행 함수라 한다.

(function (name) {
	console.log('This is the immediate function -->' + name);
})('foo');

[실행 결과]

This is the immediate function --> foo

즉시 실행 함수는 함수 리터럴을 괄호 () 로 감싼다. 그런 다음 함수가 바로 호출 될 수 있도록 () 괄호 쌍을 추가한다. 이 때 괄호 안에 값을 추가해 인자를 넘겨줄 수 있다.

이렇게 즉시 실행 함수를 만들면, 이후에 같은 함수를 다시 호출할 수 없다. 최초 한 번의 실행만을 필요로 하는 초기화 코드 부분에 사용할 수 있다.

jQuery와 같은 자바스크립트 라이브러리나 프레임워크 소스를 살펴보면, 즉시 실행 함수 형태로 구성되어 있는데 이는 자바스크립트의 변수 유효 범위 특성 때문이다.

자바스크립트에서는 함수 유효 범위를 지원한다. 기본적으로 자바스크립트는 변수를 선언할 때 전역 유효 범위를 가지지만, 함수 내부에서 정의된 매개변수와 변수들은 함수 코드 내부에서만 유효하다. (함수 내에 변수는 var 를 사용해야 전역 유효 범위를 갖지 않는다.) 이것은 달리 말하면 함수 외부의 코드에서 함수 내부의 변수를 액세스하는 게 불가능 하다는 뜻이다.

따라서 라이브러리 코드를 즉시 실행 함수 내부에 정의하면, 라이브러리 내의 변수들은 함수 외부에서 접근할 수 없고, 전역 네임스페이스를 더럽히지 않아 변수 이름 충돌이 발생하지 않는다.