2.3 함수 중급

변수에 함수 저장하기

/////////////////////////////////////////////////

function hello(name){

  document.write(name+"님 환영합니다.");

}

hello("Rose");

var func = hello;

func("tulip");

///////////////////////////////////////////////

function hello1(){

  alert("hello.");

}

function hello2(){

  alert("안녕하세요");

}

function execute(func){

func();

}

execute(hello1);

execute(hello2);

///////////////////////////////////////////////

함수를 만드는 방식 

1. 리터럴방식

2. 일반적인 방식

3. 객체방식

//////////1번방식////////////////////////////////////

var hello = function(name){

  alert(name+"님 환영합니다.");

}

hello("Rose");

/////////2번 방식////////////////////////////////////

function hello(name){

  alert(name+"님 환영합니다.");

}

hello("Rose");

///////////3번 방식/////////////////////////////////

var hello = new Function("name", "alert(name+'님 환영합니다.');");

hello("Rose");

//////////////////////////////////////////////////////

익명함수

함수 리터럴 방식으로 만들어진 이름 없는 함수

함수를 재사용 하지 않는 경우 익명함수를 많이 씁니다.

//////////익명함수 사용하기 전////////////////////

function hello(){

  alert(" 미스터 로즈 입니다");

}

$("#btnStart").click(hello);

/////////////익명함수 사용한 후//////////////////

$("#btnStart").click(function(){

  alert(" 미스터 로즈 입니다.");

});

/////////////////////////////////////////////////////

- 사용자 정의 함수

사용자가 필요한 기능을 직접 만든 함수

 

-자바스크립트 코어 함수

자바스크립트가 기본적으로 제공하는 함수

 

콜백 함수

함수 내부의 처리 결과값을 함수 외부로 내보낼 때 사용 

 

return vs 콜백 함수

둘다 동일한 방법이지만, 단순한 처리는 리턴을 이용하는게 더 효율적이다.  

 

//////////////리턴을 사용하는 경우////////////////////////////

function sum(num1,num2){

  return num1+num2;

}

var result = sum(10,20);

document.write("두수의 합은 = "+ result+"입니다.");

 

//////////////콜백을 사용하는 경우///////////////////////

function sum(num1,num2,callback){

  var temp = num1 + num2;

  callback(temp);

}

function result(value){

  document.write("두 수의 합은 = " + value + "입니다.");
}

sum(10,20,result);

 

동기

함수가 호출된 후 끝날 때까지 다음 구문을 실행하지 않고 대기하고 있는 경우

 

alert("안녕하세요");

document.write("alert() 동작이 끝나야 이 내용은 실행됩니다.);

//위에 alert가 작업을 해야지 밑에 있는 코드가 작동을 하게 된다.

 

비동기

함수가 호출된 후 끝날 때까지 기다리지 않고 바로 다음 구문을 실행하는 경우

 

var count =1;

 

setInterval(function(){

  document.wrtie("2. count = " + count);

} , 3000);

 

document.write("1. ajax() 동작이 모두 끝나지 않았어도 바로 실행됩니다.");

 

콜백함수의 실무적용

1. 이벤트 리스너로 사용

$("#btnStart").click(function(){

  alert("클릭되었습니다.");

});

 

2. 타이머 실행 함수로 사용

setInterval(function(){

  alert("1초마다 한 번씩 실행되요");

}, 1000);

 

3. Ajax 결과값을 받을 때 사용

$.getr("http://www.webdongne.com/test.php", function(){

  alert("정상적으로 서버 통신이 이뤄졌습니다");

});

 

4. jQuery 애니메이션 완료

  $("#target").animate({

    left:100

    opacity:1

}, 2000,"easeOutQuint", function(){

  alert("애니메이션이 완료되었습니다.");

});

 

클로저 함수

함수 내부에 만든 지역변수가 사라지지 않고 계속해서 값을 유지하고 있는 상태

 

function 외부 함수(){

 var 변수A:

  function 내부 함수(){

    변수A 사용;

  }

}

////////////////일반적인 경우///////////////////////////////

function addCount(){

  var count=0;

  count++;

  return count;

}

 

document.write("1. count = " + addCount(),"<br>");

document.write("2. count = " + addCount(),"<br>");

document.write("3. count = " + addCount(),"<br>");

//결과

//1. count = 1

//2. count = 1

//3. count = 1

///////////////클로저 함수를 사용한 경우/////////////////////////

function createCounter(){

  var count = 0;

  function addCount(){

    count++;

    return count;

  }

  return addCount;

}

 

var counter = createCounter();

 

document.write("2. count = " + counter(),"<br>");

document.write("2. count = " + counter(),"<br>");

dcument.write("3. count = " + counter(),"<br>");

// 결과

// 1. count = 1

// 2. count = 2

// 3. count = 3