JavaScript/Vanilla JS

함수를 리턴하는 함수 , 클로저

유혁스쿨 2022. 1. 18. 09:31
728x90
반응형

함수를 리턴하는 함수

지난 포스팅에서 함수를 매개변수로 전달하는 콜백함수에 대해 살펴보았다.

함수를 매개변수로 전달할 수 있다는 것은 함수를 리턴하는 함수도 만들수 있지 않을까

 

function retufnFunction() {
    return function() {
        alert("Hello Function");    
    }
}
returnFunction()();

retufnFunction() 함수를 호출하면 함수가 리턴되기 때문에 괄호를 한 번 더 사용하여 리턴되는 함수를 한번 더 호출한다.

 

다음과 같이 자기 호출 함수 형태로 바꿀수 있다.

(function() {
    alert("Hello Function");
    }) ();
function returnFunction() {
    return (function() {
        alert("Hello world");
    })();
}
returnFunction();

 

 

함수를 리턴하는 함수를 사용하는 이유는 클로저때문이다.

 

 

클로저

function test(value){
    var output = 'Hello ' + value + ' ~!'; 
}
alert(output);

위 코드를 실행하면 오류가 발생하거나 alert경고창을 출력하지 않는다.

함수 안에 선언된 변수 output은 지역변수 이므로 함수 외부에서 사용할 수 없다.

지역 변수는 함수가 실행될 때 생성되고 함수가 종료될 때 사라진다.

 

하지만 클로저를 사용하면 이러한 규칙을 위반할 수 있다.

function test(value){
    var output = 'Hello ' + value + ' ~!'; 
    return function () {
        alert(output);
    }
}
test('javascript')();

test함수의 변수 output은 test함수의 지역변수이므로 test함수가 종료되었을 때 사라져야 한다.

하지만 해당 변수가 이후에도 활용 될 가능성이 있기 때문에 자바스크립트는 변수를 제거하지 않고 남겨둔다.

이러한 현상을 클로저 라고 하며 클로저는 함수를 리턴하는 함수에서만 작동된다.

 

 클로저의 정의는 다양하다.

1. 지역변수 output을 남겨두는 현상을 클로저라고 부른다

2. test()함수 내부의 변수들이 살아있는 것이므로 test()함수를 호출하며 생성된 공간을 클로저라고 부르기도 한다.

3. 리턴된 함수 자체를 클로저라고 부르기도 한다

4. 살아남은 변수 output을 클로저라고 부르기도 한다.

 

추가적으로 output 변수를 남겨둔다고 외부에서 마음대로 사용할 수 있는것은아니다.

반드시 리턴된 클로저 함수를 사용해야 지역변수 output을 사용할 수 있다.

클로저 함수로 인해 남은 지역변수는 각각의 클로저 함수의 고유한 변수이다.

 

function test(value) {
    var output = 'Hello ' + value + ' ~!';
    return function() {
        alert(output);
    }
}

var test_1 = test('Web');
var test_2 = test('JavaScript');

test_1();
test_2();

함수 test_1() 과 test_2()를 호출하면 각 함수가고유한 지역변수 output이 있다는 것을 확인할 수 있다.

 

 

728x90
반응형