Languages/Java Script

[Js] 클로저 | 외부함수, 내부함수

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

클로저

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.

클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다.

내부함수

자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있다.

아래의 예제를 보자. 결과는 경고창에 coding everybody가 출력될 것이다.

<script>
    function outter(){
        function inner(){
            var title = 'coding everybody'; 
            alert(title);
        }
        inner();
    }
    outter();
</script>

위 예제에서 inner()는 내부함수, outter()는 외부함수이다.

즉 inner()는 var inner = function(){} 과 같은 의미로, 외부함수outter()의 지역변수라고 할 수 있다.

이렇게 사용하는 이유는 함수 내부에서만 사용되야 하는 함수를, 함수 밖에 선언하게 되면 응집성이 떨어지기 떄문이다.

내부함수는 외부함수의 지역변수에 접근할 수 있다.

아래의 예제를 보자. 결과는 coding everybody이다.

<script>
    function outter(){
        var title = 'coding everybody';  
        function inner(){        
            alert(title);
        }
        inner();
    }
    outter();
</script>

위 코드를 보면, title이라는 변수는 외부함수(outter()함수)에 지역변수이다.

inner()즉 내부함수는 title이라는 지역변수를 가지고 있지 않지만, 자신의 외부함수인 outter()의 지역변수에 접근이 가능하기 때문에 title이라는 변수를 알아보고, coding everybody를 출력하게 된다.

이렇게 내부함수에서 외부함수에 지역변수에 접근 할 수 있는 것을 클로저 라고 한다.

위에서 클로저의 개념을 이해하기 위해 내부, 외부 함수의 개념을 알아보았다.

흥미로운 사실은 외부함수가 더이상 사용되지 않는 경우에도, 내부 함수가 외부함수에 접근할 수 있다는 점이다.

클로저

클로저(closure)는 내부함수와 밀접한 관계를 가지고 있는 주제다. 내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저라고 한다.

아래 예제는 이전의 예제를 조금 변형한 것이다.

<script>
    function outter(){ // 외부함수
        var title = 'coding everybody';  
        return function(){// 내부함수        
            alert(title);
        }
    }
    inner = outter();//내부함수를 inner에 넣음 
    inner();
</script>

/*
return했다는 것은 함수가 종료 되었다는 뜻이다.

하지만 inner를 호출한 순간, outter함수가 이미 종료되었음에도 불구하고, 외부함수에서 파생된 내부 함수에서 

외부함수로 접근을 시도하고 있고, 이 접근이 이루어졌다는 것이다.
*/

결과는 경고창으로 coding everybody를 출력할 것이다.

예제의 실행순서를 주의깊게 살펴보자. 8행에서 함수 outter를 호출하고 있다. 그 결과가 변수 inner에 담긴다.

결과는 이름이 없는 함수다. 실행이 9행으로 넘어오면 outter 함수는 실행이 끝났기 때문에 이 함수의 지역변수는 소멸되는 것이 자연스럽다. 하지만 9행에서 함수 inner를 실행했을 때 coding everybody가 출력된 것은 외부함수의 지역변수 title이 소멸되지 않았다는 것을 의미한다.

클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.

그렇다면 이러한 기능 즉 '클로저'는 도대체 어느 곳에서 사용되는 것일까?

이전에 미리 알아야 할 것은, 프라이빗 변수(private variable : 비밀 변수)라는 것인데, 이 변수는 소프트웨어가 커지는 과정에서 어떠한 정보가 있을 때, 이 정보를 아무나 수정하지 못하도록 수정 방지를 하는 변수이다.

클로저의 기능을 알아보기 위해조금 더 복잡한 아래 예제를 살펴보자.

<!DOCTYPE html>
<html>
<head>
	<title>haha</title>
</head>
<body>
<script type="text/javascript">
	function factory_movie(title){//외부함수
		return {//return 값으로 객체를 줌.
			get_title : function () {//객체 안에 있는 함수, 즉 메소드라고 한다.
			//소속이 객체일뿐, 내부함수 이므로 외부함수의 지역변수 접근 ok
				return title;
			},
			set_title : function(_title){
				title = _title
			}
		}
	}
	ghost = factory_movie('Ghost in the shell'); //return뒤 객체가 모두 들어가는 것.
	matrix =factory_movie('Matrix')
//즉 factory_movie를 통해 위의 ghost,matrix라는 두개의 객체를 만든 것.

	alert(ghost.get_title()); //여기서는 Ghost in the shell출력
	alert(matrix.get_title()); // 여기서는 Matrix출력

	ghost.set_title('값 바꾸기');//ghost객체의 값이 "값 바꾸기"로 바뀜

	alert(ghost.get_title()); //바뀐 값인 '값 바꾸기'출력
	alert(matrix.get_title());//원래 값인 Matrix출력
</script>


</body>
</html>

아래 예제는 클로저를 이용해서 영화의 제목을 저장하고 있는 객체를 정의하고 있다.

실행결과는 Ghost in the shell -> Matrix -> 값 바꾸기 -> Matrix 이다.

위의 예제를 통해서 알 수 있는 것들을 정리해보면 아래와 같다.

1. 클로저는 객체의 메소드에서도 사용할 수 있다.

위의 예제는 함수의 리턴값으로 객체를 반환하고 있다. 이 객체는 메소드 get_title과 set_title을 가지고 있다.

이 메소드들은 외부함수인 factory_movie의 인자 값으로 전달된 지역변수 title을 사용하고 있다.

2. 동일한 외부함수 안에서 만들어진 내부함수나 메소드는 외부함수의 지역변수를 공유한다.

26행에서 실행된 set_title은 외부함수 factory_movie의 지역변수 title의 값을 '값 바꾸기'로 변경했다.

28행에서 ghost.get_title();의 값이 '공각기동대'인 것은 set_title와 get_title 함수가 title의 값을 공유하고 있다는 의미다.

3. 그런데 똑같은 외부함수 factory_movie를 공유하고 있는 ghost와 matrix의 get_title의 결과는 서로 각각 다르다.

그것은 외부함수가 실행될 때마다 새로운 지역변수를 포함하는 클로저가 생성되기 때문에 ghost와 matrix는 서로 완전히 독립된 객체가 된다.

4. factory_movie의 지역변수 title은 9행에서 정의된 객체의 메소드에서만 접근 할 수 있는 값이다.

이 말은 title의 값을 읽고 수정 할 수 있는 것은 factory_movie 메소드를 통해서 만들어진 객체 뿐이라는 의미다. JavaScript는 기본적으로 Private한 속성을 지원하지 않는데, 클로저의 이러한 특성을 이용해서 Private한 속성을 사용할 수 있게된다.

클로저는 자바스크립트가 프라이빗 변수를 사용할 수 있게 해주는 아주 좋은 메카니즘이다.

위 예시로만 봤을 때, title이라는 변수의 값을 비밀변수로 숨겨놓고, 이 변수를 수정할 때는 set_title로만 가능하게 하고,

get_title로만 가져올 수 있게 한다면 훨씬 더 안전해지기 때문이다.

참고

Private 속성은 객체의 외부에서는 접근 할 수 없는 외부에 감춰진 속성이나 메소드를 의미한다.
이를 통해서 객체의 내부에서만 사용해야 하는 값이 노출됨으로서 생길 수 있는 오류를 줄일 수 있다.

자바와 같은 언어에서는 이러한 특성을 언어 문법 차원에서 지원하고 있다.

아래의 예제는 클로저와 관련해서 자주 언급되는 예제다.

클로저를 사용할 때, 가장 많이 일어나는 실수이다.

<!DOCTYPE html>
<html>
<head>
	<title>클로저</title>
</head>
<body>
<script type="text/javascript">
	var arr = [];
	for(var i =0; i <5; i++){
		arr[i] = function(){//함수는 i의 값을 알 수 없다. 
			return i;
		}
	}
	for(var index in arr){
		console.log(arr[index]());
	}


</script>
</body>
</html>

함수가 함수 외부의 컨텍스트에 접근할 수 있을 것으로 기대하겠지만 위의 결과는 아래와 같다.

이렇게 되는 이유는 arr[i]에 들어가는 함수가 i라는 값을 알 수 없기 때문이다.

때문에 arr[i]에는 전역변수 i의 값이 들어가 있고,

전역변수 i는 for문을 통해 해당하는 값이 없었기 때문에 4를 돌려준 후 i ++ 즉 변수 i자신은 5가 되어있다.

그렇기 때문에 arr안에 들어가 있는 값은 5이다. for문이 의미가 없어진 것이다.

위의 코드는 아래와 같이 변경해야 한다.

<!DOCTYPE html>
<html>
<head>
	<title>클로저</title>
</head>
<body>
<script type="text/javascript">
	var arr = [];
	for(var i =0; i <5; i++){
		arr[i] = function(id){ 
			return function(){
				return id;//외부함수의 id를 참조, 값 변경이 가능해짐.(id=i임.)
			}
		}(i);
	}
	for(var index in arr){
		console.log(arr[index]());
	}


</script>
</body>
</html>

코드를 변경한 후, 내부함수에서 외부 함수 i 값을 id라는 값으로 참조 할 수가 있어서 arr[]안에 순서대로 값이 들어갈 수 있게 되는 것이다.

'Languages > Java Script' 카테고리의 다른 글

[Js] 함수의 호출 \| 자바스크립트 함수 호출 \| apply (0)	2021.02.04
[Js] arguments \| 배열 \| javascript 배열 \| 매개변수 (0)	2021.02.04
[Js] 값으로서의 함수와 콜백 \| 콜백 \| 비동기 처리 (0)	2021.02.04
[Js] 함수지향 \| javascript 함수 \| 유효범위 \| 지역변수 전역변수 (0)	2021.02.04

Contents

새소식

인기 검색어

[Js] 클로저 | 외부함수, 내부함수

클로저

내부함수

클로저

'Languages > Java Script' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바