본문 바로가기

Programming

(465)
12. Javascript 클로저(Closure)(3) - 클로저 주의사항 이번 아티클에서는 이제까지 살펴본 클로저의 기본 특성 이외에, 주의하거나 기억해야 할 예외적인 상황들에 대해서 하나씩 살펴보도록 하겠습니다. 우선, 클로저의 프로퍼티 값 - 즉 클로저가 참조하게 되는 자유 변수는 무의식적으로 '읽기'를 통한 참조만 가능하다고 생각하기 쉽습니다. 하지만 이 자유 변수는 클로저(함수)를 통해서 쓰기도 가능하다는 특징을 갖고 있습니다. 만일 클로저 함수를 반복해서 호출하여 실행할 경우에는 그 값이 바뀔 수 있다는 점을 기억해야 합니다. 예제를 통해서 살펴보겠습니다. function outerFunc(argNum) { var num = argNum; return function(x) { num += x; console.log('num: ' + num); } } var resul..
12. Javascript 클로저(Closure)(2) - 클로저의 활용 3 지금까지 배운 클로저 함수 활용 예제의 마지막입니다. 이번에는 흔히 사용하게 되는 setTimeout( ) 함수와 연계하여, 클로저를 활용하는 예제를 살펴보도록 하겠습니다. 우선 setTimeout( ) 함수의 가장 기본적인 사용 형태인 두 개의 인자 - 즉 function / delay만을 사용하는 상황을 가정해 봅시다. 첫 번째 인자 function은 말 그대로 함수를 입력하게 됩니다. 이 함수의 실행을 통제하려는 목적을 갖게 되지요. 이번 아티클에서는 함수 변수 형태로 전달해 보겠습니다. 두 번째 인자 delay에는 밀리 초 단위 숫자의 시간 간격으로 해당 함수를 호출하게 됩니다. 5000을 입력하면 5초 후에 function으로 전달한 함수가 실행되지요. 그리고, 여기서 인자로 사용할 functi..
12. Javascript 클로저(Closure)(2) - 클로저의 활용 2 앞서 살펴본 클로저의 활용 예제 첫 번째는, 사용자가 정의한 함수나 이벤트를 특정 함수의 실행과 연결할 수 있는 수단으로써 사용한 케이스를 다룬 내용입니다. 이번 아티클에서 다룰 클로저의 예제는 함수의 캡슐화를 목적으로 사용하는 예시입니다. 객체지향 언어를 공부하신 분들이라면, 캡슐화의 목적은 잘 알고 계실 것입니다. 쉽게 말해, Javascript에서 중요한 변수나 데이터가 전역 변수로 선언되어 손쉽게 접근해 수정이 발생하거나 다른 라이브러리와 충돌하는 현상을 방지하기 위해 해당 변수의 스코프를 변환하는 등의 방식을 취하는 것을 의미합니다. 한 가지 예제를 생각해 보겠습니다. 어떤 문장을 가진 배열이 있고, 비어있는 인덱스에 사용자로부터 파라미터 값을 받아 해당 인자를 채워 넣는 함수를 작성한다고 가정..
12. Javascript 클로저(Closure)(2) - 클로저의 활용 1 지금까지 알아본 클로저의 개념을 잘 이해하고 따라오셨나요? 그렇다면 이제 이 클로저라는 특별한 함수를 어떻게 사용하는지, 그 예제를 함께 확인해 볼 차례입니다. 우선, 아래와 같은 예제 코드가 있다고 해봅시다. function HelloFunc() { this.greeting = "hello_World!"; } HelloFunc.prototype.call = function(func) { func ? func(this.greeting) : this.func(this.greeting); }; var userFunc = function(greeting) { console.log(greeting); }; var ojbHello = new HelloFunc(); ojbHello.func = userFunc; o..
12. Javascript 클로저(Closure)(1) - 클로저의 정의 3 이제 앞서 살펴본 클로저의 정의와 기본 예제를 바탕으로 조금 더 복잡한(?) 예시를 살펴보도록 하겠습니다. 파라미터 값 등이 추가된 예제이지만, 본질적으로는 앞에서 배우며 살펴본 클로저의 원칙에서 벗어나지 않기 때문에 반복해서 코드를 작성해보시면 금방 익숙해질 수 있는 내용입니다. function outerFunc(arg1, arg2) { var local = 8; function innerFunc(innerArg) { console.log( (arg1 + arg2) / (innerArg + local) ); } return innerFunc; } var exam1 = outerFunc(2, 4); exam1(2); 우선 위 예제를 잘 읽어봅시다. outerFunc( )라는 함수 내부에 내부 함수 inn..
12. Javascript 클로저(Closure)(1) - 클로저의 정의 2 이번 아티클에서는 앞서 살펴본 클로저의 정의에 해당하는 예제를 살펴보도록 하겠습니다. 우선, 아래의 예제 코드를 살펴보고 결과 값을 예측해보도록 합시다. function outerFunc() { var x = 10; var innerFunc = function() { console.log(x); }; return innerFunc; } var inner = outerFunc(); inner(); 앞서 살펴본 클로저 예제 유형과 비슷하면서도, 함수를 리턴하는 형식이 추가되었기 때문에 조금 어렵게 느껴집니다. 위 예제를 실행 컨텍스트와 변수 객체의 도식화를 통해서 표현하면 다음과 같습니다. 도식에 대한 설명은 차근차근 짚어나갈 테니, 바로 이해가 가지 않는다고 너무 걱정하지 맙시다. 간단하지만, 개념이 아직..
12. Javascript 클로저(Closure)(1) - 클로저의 정의 1 Javascript에서 클로저는 나름대로 중,고급(?)단계로 진입하기 위한 가장 큰 장벽이자 숙제인 개념입니다. 만일 프로그래밍 언어에 익숙하신 분들이라면 다른 언어와 조금 차별화되는 개념일지라도 이 개념의 맥락과 용도만 이해한다면 어렵지 않게 학습할 수 있는 내용이지만, Javascript를 통해 프로그래밍 언어를 처음 접하신 분들이라면 다소 어렵게 느껴질 수 있는 개념입니다. (지금까지도 그래왔지만) 이번 아티클에서는 Javascript를 첫 프로그래밍 언어로 학습하고 계신 분들이 읽고 있다고 가정하고 가능한 자세히 차근차근 설명을 진행해 보도록 하겠습니다. 클로저(Closure)의 개념 우선은 클로저가 무엇인지, 간단히 정의를 내려보고 설명을 진행해 보도록 하겠습니다. 우선, 단어만 듣고 보면 왜 ..
11. Javascript 실행 컨텍스트(4) - 스코프 체인 3 앞서 살펴본 예제 코드의 구성과 거의 동일하지만, 약간의 선언 구조만 다른 예제를 통해 스코프 체인의 중요한 성질 하나를 더 살펴보도록 하겠습니다. 우선, 결론만 요약하여 설명하면 아래와 같습니다. * 실행 컨텍스트는 함수의 실행 시점에 생성된다. * 단, 변수 객체의 스코프 체인은 해당 함수 객체의 생성(선언) 시점에 따라 형성된다. 문장만 봐서는 무슨 의미인지 선뜻 감이 오지 않으실 겁니다. 이제 앞에서 살펴본 예제와 새로운 예제를 비교해 실행해 보겠습니다. 아래 코드는 바로 직전 아티클에서 실행 컨텍스트와 변수 객체의 구조를 알아보기 위해 작성했던 코드입니다. 여기서 함수 printValue( )는 printFunc( ) 함수의 내부 함수로서 선언되어 있는 구조입니다. var value = "val..