신기한 연구소

여러분들이 자바스크립트를 공부하면 다양한 용어들을 만나게 되는데요.

가끔은 이해하기 힘든 어려운 의미를 가진 용어들을 만나게 됩니다.

그럴 땐 가끔 의욕이 상실되기도 하는데요. 하지만 걱정 마세요.

tiBoy도 자바스크립트를 공부하면서 간혹 어렵고 이해하기 힘든 용어들이 있거든요.

자바스크립트에서 클로저(closure)도 어려운 용어 중 하나입니다.

그럼 최대한 쉽게 이해할 수 있도록 같이 공부해보겠습니다.

클로저(closure)먼저 클로저의 정의를 찾아보겠습니다.

사전적 의미는 폐쇄입니다. 

없애거나 막거나 기능을 정지시킨다는 의미인데요.자바스크립트에서 클로저는 어떤 의미를 가지고 있을까요?

아마 폐쇄라는 의미를 활용한 기능을 의미한다고 추측해 볼 수 있겠네요.

"클로저는 어휘 환경 상태(Lexical Scoping)에 대한 참조와 함께 포함된 함수의 조합이다"

음, 무슨 의미인지 어렵네요.

먼저 Lexical Scoping(어휘 범위)라는 어려운 말이 있네요.

이 의미를 이해하는데 좀 시간이 걸렸답니다.

그럼 클로저를 이해하기 위해 필요한 용어를 하나씩 알아보겠습니다.

스코프(Scope, 범위) 란?

함수 또는 변수가 살아있는 시간으로 생각할 수 있습니다.

또는 메모리에 세팅되어 프로그램 내에서 아직은 접근해서 사용할 수 있는 상황도 됩니다.

함수가 선언되면 메모리에 세팅이 되고 아직은 살아있습니다.

그 뒤로 함수를 호출하고 난 뒤 남은 실행 범위 또는 종료되기 전까지 호출되지 않는다면 사라지게 됩니다.

어떤 함수 내부에 다시 함수를 선언할 수 있습니다.

내부에 선언된 함수는 내부 함수이며 이 함수의 범위(스코프)는 이를 포함하고 있는 외부 함수입니다.

외부 함수 밖 범위에는 내부 함수의 범위가 아니므로 호출할 수 없다는 의미입니다. 

렉시컬 스코프(Lexical Scope, 어휘적 범위)란?

사실 어휘적 범위? 이 말 자체가 이해하기 힘들 수 있습니다.

어휘적(lexical)은 단어들의 관계 또는 어떤 범위 안에서 쓰이는 단어들로 범위와 관계에 대한 의미가 있습니다.

즉 변수든 함수든, 함수에 대한 포스팅이니 함수를 기준으로 이야기 하자면,

자바스크립트에서 함수 function의 단어를 사용함에 그 범위는 (=어휘적 범위) 선언된 위치에 의해 결정됩니다.

전역에 function 단어로 함수를 선언하면 그 범위(렉시컬 스코프)는 전역이 될 것입니다.

외부 함수 내 선언된 내부 함수도 위치가 외부 함수 내이므로 그 어휘적 범위는 외부 함수 내부가 됩니다.

클로저(closure) 만드는 방법

사전적으로 폐쇄인데 이를 자바스크립트 클로저로 활용한다면,

어떤 무엇인가를 잡고 잡아둔다는 의미로도 해석할 수 있겠네요.

슬슬 자바스크립트 클로저의 의미에 근접하고 있습니다.

실제 자바스크립트 소스를 가지고 설명한다면 더 이해가 빠를 겁니다.

내부 함수에 대해 알아봤습니다.

내부 함수의 스코프는 그 함수가 선언된 범위까지입니다.

재귀는 당연히 가능할 것이며

내부 함수가 선언된 외부 함수에서도 호출할 수 있습니다.

또한 내부 함수에서는 자신을 선언한 외부 함수의 변수와 인수에도 접근이 가능합니다.

그 반대인 외부 함수에서는 내부 함수의 변수나 인수에 접근할 수 없습니다.

만약,

내부 함수에서 외부 함수의 변수 또는 인수를 사용해서 어떤 식을 완성했다고 가정합니다.

그리고 외부 함수는 내부 함수를 return으로 넘기게 됩니다.

이제 외부 함수를 실행하면

외부 함수의 변수를 물고 있는(연결되어 사용하고 있는) 내부 함수를 받게 됩니다.

여기서 주의하면서 생각할 부분은

자바스크립트에서 함수를 실행할 때마다 새로운 실행 콘텍스트(실행환경)를 생성합니다.

처음 실행한 외부 함수와 다시 실행한 외부 함수는 같은 함수를 호출했어도 다른 공간에 있으며

return 된 내부 함수도 전혀 다른 상관없는 함수가 됩니다.

다시 돌아와서 이렇게 외부 함수를 실행해서 내부 함수를 받았습니다.

이제 외부 함수의 수명은 끝났습니다.

내부 함수는 어떤 변수에 표현식으로 받았다고 치면,

그 변수를 함수 스타일로 () 실행한다면 작동을 할 것입니다.

이제 다시 생각해 봅니다.

방금 호출했던 외부 함수의 수명은 다했습니다. (물론 다시 호출하면 새로운 실행 콘텍스트에서 생성되고 수명을 다하겠지요?)

내부 함수가 외부 함수의 변수를 물고 있으면서 내부 로직에 사용하고 있다고 했습니다.

외부 함수는 이미 수명을 다했는데 말이죠.

그럼 알 수 없는 또는 선언되지 않은 변수라는 오류 메시지가 나올까요?

오류는 나지 않습니다.~

이렇게 내부 함수가 외부 함수의 변수 또는 인수를 사용해서 구현이 되어 있고

외부 함수의 수명은 다 했지만 내부 함수가 외부 함수의 return 값으로 사용되면서

외부 함수의 값을 오류 없이 사용할 수 있도록 가둬둔 의미를 클로저(closure)라고 합니다.

외부 함수의 변수를 잡아 두고 있다는 의미에서 폐쇄로 생각할 수 있겠네요.

결론.

이렇게 자바스크립트의 클로저는 정말 중요하고 잘 활용한다면 멋진 코드가 만들어질 수 있습니다.

공통에서 중요한 함수를 다룰 때도 클로저는 필요한 기능이랍니다.

이제는 클로저를 이해했으니 소스를 보면 클로저의 특징을 잘 분석할 수 있을 거라 생각해봅니다.

안녕하세요. 신기한 연구소입니다.

이번 포스팅은 함수 중첩에 대한 이야기입니다.

자바스크립트는 함수를 만들 때 함수 내 함수를 또 선언할 수 있습니다.

이를 함수를 중첩할 수 있다고 표현하는데요.

어떤 함수를 선언하고 그 내부에 다른 함수를 선언한다는 의미로 외부 함수, 내부 함수라는 용어를 사용합니다.

중첩된 함수

내부 함수는 외부 함수내 포함이 되며 외부 함수 내에서만 사용이 가능합니다.

즉 폐쇄된 함수인데 자바스크립트에서 클로저(closure)를 형성하는 구조입니다.

내부 함수는 외부 함수에서만 호출할 수 있습니다.

이 내부 함수는 외부 함수의 블록 범위의 변수와 결합해서 클로저(closure)를 

형성할 수 있는데 클로저는 다시 자세히 포스팅하겠습니다.

쉽게 이해하자면 내부 함수가 자신을 포함(관리)하는 외부 함수의 인수나 변수를

물고 외부 함수의 수명이 끝났음에도 물고 있는 외부 함수의 변수를 내부 함수가

반환하지 않고 가지고 있으면서 폐쇄시킨다는 의미입니다.

중요한 것은 내부 함수는 자신을 품고 있는 외부 함수의 인수나 변수에 

접근해서 사용할 수 있지만,

외부 함수는 내부 함수의 인수나 변수에 접근할 수 없다는 것입니다.

이번 예제를 보면 외부 함수 outer와 내부 함수 inner를 선언하고 활용하는 것을 볼 수 있습니다.

하지만 이 예제는 오류가 납니다.

이유는 8번 라인이 문제입니다.

외부 함수 outer에서 내부 함수 inner의 변수인 ia를 사용했기 때문입니다. 내부 함수는 외부 함수의 변수인 oa를 사용할 수 있지만 외부 함수는 내부 함수의 변수에 접근할 수 없기에 8번 라인처럼 사용하면 오류가 발생하게 됩니다. 정의되지 않은 변수라는 오류가 발생하는데 외부 함수에서는 없는 변수를 사용했기 때문에 일어나게 됩니다.

그럼 내부 함수 내부에는 또 다른 함수를 만들 수 있을까요?

자바스크립트는 내부 함수 내에도 다시 함수를 정의할 수 있습니다. 중첩이 여러 번 되는 다중 중첩이 가능하다는 의미입니다. 하지만 너무 깊은 단계로 중첩이 이루어진다면 관리하기 불편할 수도 있답니다. 그래서 꼭 필요한 경우에만 이해하기 쉽도록 잘 정리해서 구현해야 하겠지요.

 이 결과는 10이 나옵니다.

이렇게 함수 내부에 함수를 선언하고 또다시 그 내부에 함수를 선언할 수 있습니다.

이를 다중 중첩이라고 합니다.

주의할 점은 접근할 수 있는 범위(스코프, scope)입니다.

stepThree는 그 상위인 stepTwo, stepOne의 범위 내 모두 접근이 가능합니다.

이것을 체이닝 한다고 합니다. 체인처럼 연결된 고리를 따라서

위로 접근할 수 있다는 의미입니다.

하지만 stepOne은 stepTwo와 stepThree에 접근할 수 없습니다.

stepTwo는 stepOne은 접근 가능하지만 stepThree는 접근할 수 없습니다.

stepThree는 stepTwo와 stepThree를 폐쇄하게 됩니다.

즉 클로저를 형성한다는 의미입니다.

클로저라는 용어가 자주 나오는데 

다음 포스팅에서 클로저에 대해 자세히 다뤄보겠습니다.

자바스크립트는 함수 언어라 해도 무방할 정도로

함수가 중요한 역할을 합니다.

일급객체이기도 한 함수는

자바스크립트로 프로그래밍하는데

정말 중요한 역할을 하기 때문에

다양한 기능과 특징을 잘 이해해서

실제 코딩 시 멋지게 사용하면 좋겠네요.

함수 이야기로 6탄을 만들었지만 아직도 

함수에 대한 이야기는 남아있습니다.

모두 즐 코딩하세요.