자바스크립트 - 02.함수(내부함수, 콜백, 클로저, setTimeout과 setInterval )

자바스크립트 함수

var f = function(d){

return d*d;

}

var val = f(3);

alert(val);

d는 매개변수를 값으로 받으려면 쓰고,

아니면 비워두어도 괜찮습니다.

-------------------------------------------------------

var f = function(d){

  alert(arguments.length); // 호출되고 있는 현재함수가 받은 매개변수들에 대한 정보를  담고있는 객체

return d*d;

}

var val = f(2,3,4);

alert(val);

여기서 val = f(2,3,4) 중 매개변수 2는 d로 값이 전달되고 

3, 4도 함수값이 전달되기는 했음 ( 확인 하고싶으면 (arguments.length)로 확인가능 )

접근하려면 인덱스로 접근하면됨.

--------------------------------------------------------------

// 누적 곱 계산

var mul = function(){

var m=1;

for(var i=0; i<arguments.length; i++)   // arguments.length 까지 탐색!

m = m*arguments[i];

return m;

}

alert(mul(1,2,3,4));

-----------------------------------------------------------------

함수안에 함수도 넣을수가 있음

function outer(){

function inner(x){

return x * x;

}

alert( inner(3));

}

outer();

outer()함수안에 inner을 넣어서 

ourer함수에서 매개변수 값을 넣어주고

outer()함수를 출력

출력값은 9 가 나와요.

----------------------------------------------------------------------

function callThreeTimes(callBack){  // 전달되는 매개변수 받아내기 ( 6가지 자료형 아무거나 매개변수에 들어올수 있음)

for(vai i=0; i<3; i++)

callBack;  // 매개변수로 전달받은 함수를 호출

} 

var callBack = function(){  // 함수도 6가지 자료형 중  하나이고 변수에 담길수 있음

alert('함수호출');

}

callThreeTimes(CallBack); // 매개변수에 함수를 전달

----------------------------------------------------------------------

function callThreeTimes(myFunc){  // 전달되는 매개변수 받아내기 ( 6가지 자료형 아무거나 매개변수에 들어올수 있음)

for(var i=0; i<3; i++)

myFunc();  // 매개변수로 전달받은 함수를 호출

} 

var myFunc = function(){  // 함수도 6가지 자료형 중  하나이고 변수에 담길수 있음

alert('함수호출');

}

callThreeTimes(myFunc); // 매개변수에 함수를 전달

//매개변수로 전달되는 함수를 콜백함수라고 부름

// 다른함수로 전달되어지는 함수 = 콜백함수

----------------------------------------------------------------------------

//두수를 매개변수로 받하서 합을 리턴하는 함수

var addFunc = function(a,b){

return a+b;

}

//두수를 매개변수로 받하서 곱을 리턴하는 함수

var mulFunc = function(a,b){

return a*b;

}

//함수를 매개변수로 받아 그 함수에 두개의 숫자를 넘겨주고

//호출한 함수가 리턴하는 값을 출력하는 함수 작성

var printFunc = function(func){

alert( func(3,2) );

}

printFunc( addFunc );

printFunc( mulFunc );

--------------------------------------------------------------------------------

var misA = function(){

alert("미사일공격!");

}

var punA = function(){

alert("펀치공격!");

}

var flyM = function(){

alert("날아가기!");

} 

var wolkM= function(){

alert("걸어가기!!");

}

fight = function(attack ,move){

attack();

move();

attack();

}

fight(punA,flyM)

-------------------------------------------------------------------------------------------------------------

var myFunc = function(){

alert('나는 함수를 리턴할거임ㅋ');

return function(){

alert('반환된 함수임ㅋ');

}

}

1번방법

var result = myFunc();

result();

// function(){  //자기호출함수

// alert('바로호출해줘');

// }();

2번방법

myFunc()(); //myFunc() 반환값(반환된함수) 호출

---------------------------------------------------------------------------------------------------------

클로저 현상 예제

-> 함수내의 지역변수는 함수가 종료될때 메모리가 해제되야 되는데

반환값으로 사용한 내부함수에서 지역변수를 사용하고있어서 

해제되지 못하고 남아있는 현상

ex1 )

var myFunc = function(){

var hello = "hello world";      

var inner = function() {

alert(hello);

}

return inner;

}

var a = myFunc();

var b = myFunc();

a();

b();

ex2 )

var makeIntroduce = function(name){

var intro='안녕하세요. 제 이름은' + name + '입니다.';

return function(){

alert(intro);

}

}

var hongIntro= makeIntroduce('Hong')

var kimIntro= makeIntroduce('Kim')

hongIntro();

kimIntro();

--------------------------------------------------------------------------------------------

내부함수 : 함수안에 함수를 정의할수있음

1. 원래 선언함수는 처음실행시 모두 읽어서 메모리에 로드 하는데

내부함수는 선언함수여도 속한 함수가 호출될때 로드됨

2.각자 이름공간을 갖음

자바스크립트에서는 함수도 하나의 자료형이므로

변수에 담길수 있고, 당연히 매개변수로 전달도 가능

콜백함수 : 다른함수에게 전달되어지는 함수

내부함수는 자신이 속한 함수의 지역변수에 접근가능

내부함수를 리턴으로 돌려줄수있음

클로저! -> 내부함수가

자신이 속한 함수의 지역변수를 물고있어서

속한 함수가 종료됐음에도 지역변수가 해제되지못하고 메모리 남아있는현상

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.

-----------------------------------------------------------------------------------------------

몇초 후에 기능을 하고싶다.

setTimeout( callBack, time);

ex1 )

setTimeout(function(){

alert('3초지남');}

, 3000);

ex2 )

setTimeout(function(){

location.href='http://www.naver.com';

},3000);

-----------------------------------------------------------------------------------------------------

var id = serInterVal(function()){

alert('인터벌은 주기마다 계속 실행');   //조심해야됨

}, 1000);

setTimeout(function(){

clearInertval(id);

},5000);

-------------------------------------------------------------------------------------------------

alert('a');

setTimeout(function(){

alert('b')}, 0);  //남은명령코드 다실행 후 0초후에 alert('b')수행

alert('c');

--------------------------------------------------------------------------------------------------

ex 클로저를 이용해 0,1,2찍기

for(var i = 0; i<3; i++)

{

(function(a){

setTimeout(function(){

alert(a);

},0)

})(i);

}

-------------------------------------------------------------------------------------------------------------

함수를 매개변수로...콜백

함수에 함수를 ... 내부함수-사용이유 용도;

함수를 반환.. 내부함수반환 ->클로저개념

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.

setTimeout과 setInterval메소드에 대해

setTimeout & setInterval &clearInterval  이것은 window 객체에서 사용하는 메소드이다.

==> 실행되는 함수를 시간이 지난 후에 한번 실행한다.

객체이름 = setTimeout("함수호출", 시간);

setTimeout을 해제하기 위한 메소드

==> clearTimeout("객체이름");

==> 반복적으로 실행하기 위해서는

setInterval("함수호출", 시간);

이것을 해제하기 위해서는

==> clearInterval(객체이름);