유블로그

자바스크립트 콜백함수, 즉시 실행 함수, 내부 함수 등 본문

JavaScript & jQuery

자바스크립트 콜백함수, 즉시 실행 함수, 내부 함수 등

yujeong kang 2021. 6. 18. 21:10

콜백 함수

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

콜백 함수란 특정 이벤트 발생 혹은 시점에 도달했을 때 시스템에서 호출하는 함수이다.

자바스크립트의 이벤트 핸들러 처리가 대표적이다.


즉시 실행 함수

함수를 정의함과 동시에 실행되는 함수다.

함수 리터럴을 괄호 ( ) 로 싸고, 그 뒤에 괄호 ( )를 또 넣어서 안에 인자를 전달하면 된다.

(function (x) {
	console.log(x);
})(5);

// 출력: 5

 즉시 실행 함수는 한 번만 호출가능하다.

그래서 최초 한 번 실행만 필요한 초기화 코드를 실행하는데 쓰면 좋다.


내부 함수

함수 내부에 정의된 함수를 내부 함수라고 한다.

클로저 생성, 부모 함수에서 외부에서의 접근을 막고 독립적인 함수 구현 용도로 쓴다.

function parent() {
	var a = 100;
    var b = 200;
    function child() {
    	var b = 300;
    	console.log(a);
        console.log(b);
    };

	child();
};

parent();	// 출력 : 100 300
child();	// 에러 !

이렇게 child 함수는 parent 함수의 내부 함수이므로 바깥에선 사용할 수 없다.

내부 함수에서는 부모 함수의 변수에 접근 가능하다.

child 내부에는 b 변수가 있어서 console.log(b) 는 parent의 b 가 아닌 child 의 b가 출력된다.

 

함수 스코프 외부에서 내부 함수를 호출하는 방법

function parent() {
	var a = 100;
    
    var child = function () {
    	console.log(a);
    };

	return child;
};

var inner = parent();
inner();

// 출력 : 100

부모 함수가 내부 함수를 return 해서 외부 변수에 부모 함수를 할당하여 호출하면

inner 변수가 child 내부 함수를 참조한다.

여기서도 child 내에 a 변수가 없으니 스코프 체이닝으로 parent 의 변수 a를 찾아 출력한다.

 

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


함수를 리턴하는 함수

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

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

self 변수에 익명함수를 참조했다가

self()로 리턴된 다른 익명함수를 참조하여

위같은 결과가 나온다.