[JavaScript] 콜백함수(Callback Function) / 클로저함수(Closure Function)

콜백함수(Callback Function)

콜백함수는 함수를 활용하는 방법 중 하나로, 매개변수로 전달받은 함수를 뜻한다.
매개변수로 함수를 전달받아서 함수 내부에서 필요할 때 콜백함수를 호출할 수 있다.

---

함수명은 함수를 구분하기 위한 식별자로, 내부적으로 함수변수처럼 함수를 저장하여 사용한다.

 

함수명을 사용하여 함수 선언 (선언함수)

function display1() {
	alert("display1 함수의 명령 실행");
}

alert(display1);//변수에 저장된 값 출력 - 선언함수 출력 
display1();//[display1 함수의 명령 실행] - 함수명을 이용하여 함수 호출

 

함수명 없이 함수 선언(익명함수) 하여 익명함수를 변수에 저장 

var display2=function() {
	alert("display2 함수의 명령 실행");
}

//변수에 함수를 저장하여 사용 가능 - 함수변수
alert(display2);//변수에 저장된 값 출력 - 익명함수 출력 
display2();//[display2 함수의 명령 실행] - 함수변수를 이용하여 함수 호출

 

함수 호출 

display(display1);//함수명을 전달하여 함수 호출 - 매개변수는 함수를 전달받아 저장
display(display2);//함수변수에 저장된 함수를 전달하여 함수 호출 - 매개변수는 함수를 전달받아 저장

 

함수 호출시 익명함수를 생성하여 매개변수에 전달해 함수 내부에서 호출할 수 있다.

display(function() {
	alert("익명함수의 명령 실행");
});

 

 

함수 호출시 화살표함수를 생성하여 매개변수에 전달해 함수 내부에서 호출할 수 있다.

display(() => alert("화살표함수의 명령 실행"));

 

 

---

클로저함수(Closure Function)

 

클로저함수는 함수 내부에 선언된 함수(내부함수)를 반환받아 함수 외부에서 호출하는 함수이다. 

내부함수를 외부에서 호출하고 싶은 경우에 클로저 함수를 사용한다.

---

 

내부함수는 선언된 함수 내부에서만 호출이 가능하다. 따라서 내부함수를 함수 외부에서 호출한 경우 에러가 발생한다.

function outer() {
	//내부함수 선언
	function inner() {
		alert("내부함수의 명령 실행");
	}
		
	//inner();//내부함수는 선언된 함수 내부에서만 호출 가능
		
	//함수명은 변수와 같고 함수는 값이므로 반환 가능
	return inner;//함수 반환
}
	
//inner();//내부함수를 함수 외부에서 호출한 경우 에러 발생

 

 

함수명은 변수와 같고 함수는 값과 같으므로 반환이 가능하다. 함수를 반환받아 변수에 저장하고, 변수에 저장된 내부함수를 함수 외부에서 호출할 수 있는데 이를 클로저 함수라고 한다.

 

function outer() {
	function inner() {
		alert("내부함수의 명령 실행");
        }
        return inner;
}

//클로저 함수 호출

var closure = outer();//함수를 반환받아 변수에 저장 가능
closure();//변수에 저장된 내부함수를 함수 외부에서 호출 가능 - 클로저함수

 

 

내부함수를 한번만 호출하고 싶은 경우에는 내부함수를 반환받아 변수에 저장하지 않고 직접 호출한다.

outer()();

---

내부함수에서는 외부함수의 변수 사용이 가능하다.

function display(name) {
//익명함수를 생성하여 반환 
	return function() {
		alert(name+"님, 안녕하세요.");
    }
}
    
display("김민지")();//김민지님, 안녕하세요.
display("강해린")();//강해린님, 안녕하세요.