[Function] varient using function

js에서 함수가 어떻게 쓰이는지 알아보자.

1. call back function

내가 요청한 페이지 로딩이 끝났을 때 알람을 띄어주는 것을 해보자.

 

window.onload = function(){

                          alert("call back funtion!");

                        };

이렇게 하면 새로고침 할 때마다 call back function이 팝업으로 뜬다.

위와 같은 방식으로 이벤트 별로 원하는 코드를 실행하도록 등록해둘 수 있다. 클릭이나 드래그나 스크롤 등 다 가능하다. 이런 것을 이벤트 핸들러에 콜백 함수를 등록해서 사용한다고 한다.

 

2. immediate function

싱글턴 패턴처럼 프로그램에서 한 번만 수행하는 함수를 선언후 실행하는 방식이다. 예를 들면 다음과 같다.

(function (name){

    alert(name);

})('bob');

 

무슨 짓인가 하겠지만 함수를 선언함과 동시에 바로 호출하는 형식이다. 별도로 함수의 이름을 지정하지 않아서 호출할 방법이 없게 된다. jQuery에서 이런 방식의 코드가 있다고 하니 알아두자.

 

3. inner function

function A(){

  var a = 999;

  var b = 999;

  function B(){

    var b = 0;

    console.log(a);

    console.log(b);

  }

  B();

}

 

구조를 살펴보면 함수 A를 만들었다.

함수 A 안에는 a와 b변수, B함수 만드는 코드, B호출이 있다.

함수 B 안에는 b 변수, a와 b 로그 남기는 함수 호출이 있다.

 

자, 여기서 A함수를 호출하면 어떤 결과가 나올까? 

A();

 

답은 999(a)와 0(b)이 출력된다. 함수에서 사용하는 변수는 가장 가까운 레벨의 변수를 사용한다. 쉽게 말하면 함수 B에서 변수 b를 사용할 때 자기가 선언한 변수가 있기 때문에 b를 사용한다. 만약 b를 자기가 안 만들었다면 바깥에서 가장 가까운 레벨에서 찾으서 썼을 것이다. c의 block 레벨에서 scope, life cycle 방식과 유사하다.

 

B(); 을 호출할 수 있을까?

A함수의 inner function인 B는 호출할 수 없다. B를 호출해서 쓰려면 A함수에서 return B를 하는 식으로 사용해야 한다. 일종의 캡슐화 개념이 적용된 것으로 보인다.

 

4. 함수 참조값을 리턴하는 함수

function A(){

   alert('function A!');

   return function(){

     alert('return function!');

  }

}

 

우선 A의 구조는 "function A!"를 팝업으로 띄어준다. 그리고 함수 참조값을 리턴한다. expression으로 쓰인 function(){ alert('return function!');}은 이 함수를 찾아갈 수 있는 참조 값이다. 다시 말해 function(){}을 리턴하는 것은 이 함수 객체의 참조값을 리턴하는 것이다. return 1; 과 다를 바가 없다. 

 

var f1 = A();

이 코드를 실행하면 어떻게 동작할까?

우선 A 함수가 실행된다. 그러면 function A의 코드가 실행된다. A 함수 호출이 완료되고 A의 리턴 값이 f1에 저장된다. 리턴 값은 함수객체의 참조 값이다. 이 때 저장된 참조 값인 객체는 alert('return function')을 실행하는 함수이다. 주의할 것은 이 때 return function이 팝업으로 나오지 않는 것이다. 단지 함수를 가리키는 값이 저장되는 것 뿐이다. 함수를 실행하려면 '함수객체참조값 + ( )' 과 같이 써야만 한다.

 

이후 f1(); 코드를 실행해보자.

f1()을 하면 return function을 팝업으로 띄어주는 함수를 실행한다. 

함수를 리턴하는 방식은 생소하겠지만 단지 함수의 참조값을 리턴하는 것이라는 것을 알고 있으면 된다.