javascript / Chapter4. 함수 2

09 유효범위 (scope)

10 클로저 (closure)

11 콜백

12 모듈

13 연속호출 (Cascade)

14 커링 (Curry)

15 메모이제이션 (memoization)

 

09 유효범위

• 유효범위는 변수와 매개변수의 접근성과 생존 기간을 제어.

  유효범위

  var foo = function () {     var a = 3, b = 5; // a=3, b=5     var bar = function () {         var b = 7, c = 11;  // b=7, c=11         a = a + b + c;  // a=21     };     bar();  //a=21, b=7 };

• 이름 충돌 문제를 덜어주고 자동으로 메모리 관리.
• C언어 유형의 구문을 가진 언어는 모두 블록 유효범위가 있다.
• 블록 내부에서 선언된 변수는 외부에서 접근 불가. 블록이 끝나면 변수 해제
• 하지만 자바스크립트는 블록 유효범위가 없다.
• 함수 유효범위는 있다.

• 자바스크립트는 모든 변수를 함수 첫 부분에 선언하는 것이 가장 최선의 방법이다.
  
  

 

10 클로저

• 내부함수에서는 외부함수의 변수들에 접근 가능하다. (this와 arguments는 예외이다.)

• 외부함수보다 내부함수가 더 오래 유지 될 수 있다. 이것을 클로저라 한다.

  클로저

  var seongtae = (function (scope) {     //...     return someMethod; //외부 문맥을 계속 접근하는 함수 })(); // 이건 함수를 할당하는 것이 아니라 호출한 결과를 할당한다. // 여기서 반환값으로 넘어온 메소드를 계속해서 외부함수 문맥에 접근하고 있다. // 또한  외부함수의 인자값에도 접근 가능하다. // 변수가 만들어지는 시점이 아닌 그냥 변수의 값을 가져오기 때문에 주의

• 내부함수는 외부함수 변수의 복사값을 갖는 것이 아니라 해당 변수 그 자체에 접근 권한을 가진다.
  • 즉 실제 변수에 접근. 주의해야 한다.

   

  클로저 주의점

  var add_the_handlers = function (node) {     var i;        for (i = 0; i < nodes.length; i++) {         node[i].onclick = function (e) {                 alert(i);         };     } }; // 유일한 번호를 전달하고자 했지만 의도대로 동작하지 않는다. // 그 이유는 핸들러 함수 i가 함수가 만들어지는 시점이 아니라 // 그냥 변수 i에 연결됬기 때문이다.    var add_the_handlers = function (node) {     var i;       for (i = 0; i < nodes.length; i++) {         node[i].onclick = function (i) {                 return function (e){                 alert(i);                 };         }(i);     } }; //새로운 함수를 정의하고 i를 넘기며 실행.

 

11 콜백

• 함수는 비연속적인 이벤트를 다루는 것을 좀 더 쉽게 할 수 있는 방법을 제공.
  
  

  콜백

  request = prepare_the_request(); response = send_request_synhronously(request); display(request); // 이 방법은 서버로 응답이 오기 전까지 기다려야한다. // 이런 작업을 비동기로 처리하는게 콜백.    request = prepare_the_request(); response = send_request_synhronously(request, function () { display(request); }); // 비동기 함수는 그 즉시 반환한다.

 

12 모듈

• 함수와 클로저를 사용해 모듈 제작 가능.
• 모듈이란 내부상태나 구현 내용을 숨기고 인터페이스를 제공하는 함수나 객체.
• 모듈을 만들기위해 함수를 사용하면 전역변수 사용을 대부분 제가 가능하다.
• 정보 은닉 가능.
• 어플리케이션이나 싱글톤 패턴들을 효과적으로 캡슐화.

 

13 연속호출

• 자바스크립트의 함수는 this를 반환한다면 연속 호출이 가능하다.
• 같은 객체에 대해 문장 하나로 연속되는 많은 메소드 호출 가능.
• 연속 호출은 매우 표현적인 인터페이스를 제공할 수 있게 한다.
  • 한번에 많은 작업을 할 수 있는 인터페이스.

 

14 커링

• 커링은 함수와 인수를 결합하여 새로운 함수를 만들 수 있게 한다.

  var add1 = add.curry(1); console.log(add(1));    Function.method('curry', function () {     var args = arguments, that = this;        return function () {         return that.apply(null, args.concat(arguments)); }); // 여기서 arguments는 배열이 아니기때문에 concat메소드가 없다.    Function.method('curry', function () {     var slice = Array.prototype.slice,         args = slice.apply(arguments),         that = this;       return function () {         return that.apply(null, args.concat(slice.apply(arguments))); });

 

15 메모이제이션

• 불필요한 작업을 피하기 위해서 이전의 연산한 결과를 저장하고 있는 객체

• 자바스크립트의 객체와 배열은 메모이제이션에 유용하다.

  // 피보나치 수열 var fibonachi = function () {     var memo = [0, 1];     var fib = function (n) {         var result = memo[n];         if(typeof result !== 'number') {                 result = fib(n-1) + fib(n-2);                 memo[n] = result;         }         return result;     };     return fib; }(); // memo 변수가 이전의 계산했던 결과값을 가지고 있다. // 피보나치 특성상 중복된 계산을 하게되는데 그 점을 효과적으로 잡음.    // 위 피보나치 수열 중 메모이제이션 부분 분리 var memoizer = function (memo, fundamental) {     var shell = function (n) {         var result = memo[n];         if(typeof result !== 'number') {             result = fundamental(shell, n);                 memo[n] = result;         }         return result;     };     return shell; };    var fibonachi = memoizer([0,1], function (shell, n) {     return shell(n-1) + shell(n-2); });

• 반복되는 작업의 양을 현저히 줄일 수 있다.
• 연산이 중복으로 일어나는 작업에 좋을 듯.

 

 

참고문헌

1. 더글라스 크락포드, 김명신  『자바스크립트 핵심가이드 javascript The good parts』, 한빛미디어