[번외] 자바스크립트 #2 - 함수

자바스크립트에서 함수는 객체로 간주

다음과 같이 이용될 수 있다.

. 변수에 할당

. 객체의 프로퍼티에 할당

. 매개변수로 전달

. 함수의 결과값으로 반환

. 리터럴을 이용해서 생성

 

요롷게 코딩을 하지만

function doSomethingWonderful() {

  alert('!!!');

}

 

function 키워드는 자동으로 Function 인스턴스를 생성하고

가짜 함수 '이름'을 사용해서 생성한 window 프로퍼티에 할당한다.

 

doSomethingWonderful = function() {

  alert('!!!');

}

실제로는 요롷게 처리되고 있다.

 

function hello() { alert('hi'); } 또는

hello = function() { alert('hi'); } 또는

window.hello = function() { alert('hi'); }

 

 

function hello() { alert('hi'); }

setTimeout( hello, 5000 );

함수가 페이지의 여기저기에서 사용될 게 아니라면

매개변수로 전달할 Function 인스턴스를 굳이 생성하지 않아도 된다.

요롷게

setTimeout( function() { alert('hi'); }, 5000 );

 

 

. 함수에서의 this

  일반적으로는 함수를 소유한 객체를 가르키지만

  - 함수가 (객체에 포함되지 않은 채) 최상위 레벨에서 바로 호출되면,

     this가 가르키는 함수컨텍스트는 window 인스턴스이다.

  - Function의 call() 메서드에 첫 번째 매개변수로 전달된 어떤 객체라도 함수콘텍스트로 설정된다.

  - Function의 apply() 메서드도 call()과 마찬가지지만,

    두 메서드는 추가 매개변수가 함수로 전달될 때만 차이를 가진다.  어떤?

 

  function whoAmI() { return this.xxx; }

  alert( whoAmI() );  ← 이때, this는 window

  alert( o1.identifyMe() );  ← 이때, this는 o1, o1.identifyMe = whoAmI; 처리 후

  alert( whoAmI.call(o2) );  ← 이때, this는 o2

  alert( whoAmI.apply(o3) );  ← 이때, this는 o3

 

  "함수 F를 호출할 때, 함수 콘텍스트로 객체 O가 제공되면, F는 O의 메서드 역할을 한다."

  alert( o1.identifyMe.call(o3) );

 

 

. 클로저(closure)

  함수를 실행하는 데 필요한 지역변수와 결합된 Function 인스턴스

  function이 만들어질 때, function 안에서 사용된 지역변수는

  지역변수/function 선언등의 처리 Block이 실행되 버린 후에라도

  function이 수행되고 있다면

  이미 소멸되어 버렸을 것 같은 지역변수라도

  수행되고 있는 function에서 값을 정상적으로 참조할 수 있다.

  (메모리에서 해제되지 않는다.) ← 순환 참조일 경우 메모리 누수의 원인이 되기도 한다.

 

  $( function(){  ← DOM이 로드된 후 실행되는 준비핸들러
     var local = 1;
     window.setInterval( function(){
        $('#display')
        .append('<div>At '+new Date()+' local='+local+'</div>');
        local++;
     }, 3000 );
  } );
  local이 function()위에서 선언되어 function() 안에서 실행되는 데는 문제가 없어보이지만

  function()를 모두 실행한 이후에는 소멸될 것 같지만

  3초의 Interval마다 실행되도록 정의한 function()이 실행되는 동안에는

  local이 계속 살아있게 되는 것이다.

 

  이렇듯, 자바스크립트에서 클로저는 별도의 특별한 문법을 쓰지 않고도 암묵적으로 생긴다.

 

  비동기 콜백을 활용하는 jQuery 커맨드를 이용할 때 클로저가 절대적으로 필요하고

  특히 Ajax요청이나 이벤트 처리에서 중요하다.