콜백 함수, 즉시 실행 함수, 내부 함수

콜백 함수

자바스크립트 함수 표현식에서 함수 이름은 선택 사항이다.

함수의 이름을 지정하지 않은 것을 익명 함수라고한다.

이러한 익명 함수의 대표적인 용도가 콜백 함수이다.

 

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

 

<script>
	//페이지 로드 시 호출될 콜백 함수
    window.onload = function(){
    	alert('hi');
    }
</script>

 

즉시 실행 함수

함수를 정의함과 동시에 실행되는 함수를 즉시 실행 함수라고 한다.

이 함수도 익명 함수를 응용한 형태이다.

(function (name) {
	console.log('즉시 실행 함수' + name);
})('foo');

최초 한번만 실행해야 하는 초기화 코드 부분 등에 사용할 수 있다.

즉시 실행 함수의 또다른 용도는 jQuery와 같은 자바스크립트 라이브러리나 프레임워크 소스들에 사용된다는 것이다.

jQuery의 소스들을 살펴보면 소스의 시작과 끝에 즉시 실햄 함수 형태로 ()가 감싸져있다.

(function (window, undefined) {
	...
})(window);

이러한 즉시 실행 함수를 사용하는 이유는 변수의 유효 범위 특성 때문이다.

자바스크립트에서는 함수 유효 범위를 지원한다.

따라서 함수 코드 내부에서 정의된 매개변수와 변수들은 함수 코드 내부에서만 유효하다.

즉, 다른 자바스크립트 라이브러리들이 동시에 로드가 되더라도 변수 이름 충돌 같은 문제를 방지할 수 있다.

 

내부 함수

자바스크립트에서는 함수 코드 내부에서도 다시 함수 정의가 가능하다. 이렇게 함수 내부에 정의된 함수를 내부 함수라고 부른다.

내부 함수는 클로저를 생성하거나 부모 함수 코드에서 외부에서의 접근을 막고 독립적인 헬퍼 함수를 구현하는 용도 등으로 사용한다.

// parent() 함수 정의
function parent() {
	var a = 100;
    var b = 200;
    
    // child() 내부 함수 정의
    function child() {
    	var b = 300;
    	console.log(a);
    	console.log(b);
    }
    child();
}
parent();
child(); 

// 100
// 300
// Uncaught ReferenceError: child is not defined

내부 함수에서는 자신을 둘러싼 부모 함수의 변수에 접근이 가능하다.

이것이 가능한 이유는 자바스크립트의 스코프 체이닝 때문이다.

 

일반적으로는 내부 함수의 호출은 부모 함수 내부에서만 가능하다. 하지만 내부 함수를 외부 함수로 리턴하면, 부모 함수 밖에서도 내부 함수를 호출하는 것이 가능하다.

function parent() {
	var a = 100;
    // child() 내부 함수
    var child = function(){
    	console.log(a);
    }
    
    // child() 함수 반환
    return child;
}

var inner = parent();
inner();

이와 같이 실행이 끝난 parent()와 같은 부모 함수 스코프의 변수를 참조하는 inner()와 같은 함수를 클로저라고 한다.

 

함수를 리턴하는 함수

자바스크립트에서는 함수도 일급 객체이므로 일반 값처럼 함수 자체를 리턴할 수 있다.

함수를 호출함과 동시에 다른 함수로 바꾸거나, 자기 자신을 재정의하는 함수를 구현할 수 있다.

//self() 함수
var self = function() {
	console.log('a');
   	return function(){
    	console.log('b');
    }
}

self = self(); // a
self(); // b