[생활코딩]함수와 콜백

값으로서의 함수

자바스크립트에서는 함수는 객체다. 다시말해 일종의 값이다(객체=값)

값의 특징 = 변수에 담을 수 있다. ex) var a = 'value'

함수는 값이기 때문에 함수는 객체안에 저장될 수 있다.

a = {

b:function(){//b(key)가 값을 담고 있기 때문에 변수의 역할을 하고있음/속성이 담고있는 값의 정의(객체안에 담겨있는 함수) = 메서드

}

} 

 

함수는 값이기 때문에 인자로 전달 가능

function cal(func,num){

return func(num)

}

function increase(num){

return num+1

}

function decrease(num){

return num-1

}

console.log(increase,1);//2

console.log(decrease,1);//0

 

함수는 함수의 리턴 값으로도 사용할 수 있다. 

function cal(name){

 var funcs = {

  'plus':function(left,right){return left+right};

  'minus':function(left,right){return left-right};

 }

  return funcs[name];//반환값으로도 함수를 사용 가능

}

 

alert(cal('plus'){2,1});//3

alert(cal('minus'){2,1});//1

 

당연히 배열의 값으로 사용할 수 있다.

var process = [

function(input){return input + 10;},

function(input){return input * input;},

function(input){return input/2}

]

var input = 1;

for(var i = 0; i<process.length; i++){

input = process[i](input);

}

alert(input);

->함수는 값이기 때문에 배열에도 저장이 가능한 것

 

*함수는 변수,매개변수,리턴값 형태로 사용가능한데, 이러한 형태로 사용가능한 것을 프로그래밍에서는 first-class citizen/first-class object(1급 객체) 라고 불린다.

 

콜백

함수는 값으로 사용될수있기때문에 함수를 인자로 전달할 수 있다. 값으로 전달된 함수는 호출될 수 있고 인자로 전달된 함수의 구현에 따라 동작방법이 바뀌게 된다.

 

function sortNumber(a,b){

// 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.

    return b-a;

}

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];

alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

 

비동기처리

글작성->이메일 발송->작성완료하는 과정을 순차적으로 진행해서 3시간이 걸린다면? 동기적처리라고 한다.

글작성->이메일발송(예약)->작성완료하면 빠른시간에 끝낼 수 있다. 또한 내부적으로 사용자 발송예약이 반복되면서 이메일 발송예약이 되어있다면 혼자 돌아가는 프로그램이 3시간동안 백그라운드에서 하면 된다.

이는, todo와 비슷하다. 할일을 적어놓고 지금 할일을 미리 끝내놓고 나중에 해도 되는 일은 나중에 처리한다. 이것을 비동기처리라고 한다.

 

Ajax(asynchronous Javascirpt and XML )

만약 동기적 처리로 한다면? 서버가 외국서버일 경우 서버에서 정보를 전달해줄때까지 자바스크립트는 그대로 기다리고 있어야한다 이땐 흰창으로 멈춘다.

하지만 비동기적 처리를 한다면, 서버와 웹브라우저는 내부적으로 통신을 진행하고 있고 그동안 스크롤,클릭 등의 작업이 가능하다.

jQuery로 Ajax를 사용할 수 있다.

$.get('url','서버와 통신이 끝났을때 호출되도록 기대하는 함수/이함수를 사용할때 인자값을 가져오도록 해야하는데 서버에 있는 정보를 인자로 받아와야함')

ex)

$.get('./datasource.json.js', function(result){

console.log(result);

}, 'json');