값(value)으로서의 함수
JavaScript에서는 함수는 객체이다. 즉 일종의 값이다. JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.
함수는 변수(+매개변수)에 담겨질 수도 있고, 객체에 담겨질 수도 있다.
- 변수에 담겨진 값으로서의 함수
function a(){}
var a = function(){}
function a(function(){}){} // 매개변수에 담겨짐- 객체에 담겨진 값으로서의 함수(method)
a = {
b:function(){
}
};위 코드에선 함수가 객체 a의 b라는 속성(property)의 값으로 담겨져 있다.
이렇게 객체의 속성값으로 담겨진 함수를 메소드(method)라고 부른다.
함수는 다른 함수의 인자로도 전달될 수 있다.
function cal(func, num){
return func(num) // * ()가 있으면 함수 호출
}
function increase(num){
return num+1
}
function decrease(num){
return num-1
}
alert(cal(increase, 1)); // 2
alert(cal(decrease, 1)); // 0alert(cal(increase, 1))을 실행하면 함수 increase와 값 1이 함수 cal의 인자로 전달된다. 함수 cal은 첫번째 인자로 전달된 increase를 실행하는데 이 때 increase의 인자로 cal의 두번째 인자 1이 전달된다. 함수 increase는 계산된 결과(1+1 = 2)를 리턴하고 cal은 다시 그 값을 리턴한다.
함수는 함수의 리턴값으로도 사용될 수 있다.
function cal(mode){
var funcs = {
'plus' : function(left, right){return left + right},
'minus' : function(left, right){return left - right}
}
return funcs[mode];
}
alert(cal('plus')(2,1)); // 3
alert(cal('minus')(2,1)); // 1alert(cal('plus')(2,1))을 실행하면 먼저 cal('plus') 부분은 cal의 인자로 'plus'를 받고, cal 함수 안의 funcs란 객체의 'plus'의 속성값 function(left, right){return left + right}을 리턴한다.
그리고 cal('plus') 뒤의 (2,1)은 괄호이기에 함수를 호출하므로 function(2,1){return 2 + 1}을 실행해 경고창에 3을 출력한다.
함수는 배열의 값으로도 사용될 수 있다.
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); // 60.5여기서 process[0] = function(input){ return input + 10;},
process[1] = function(input){ return input * input;},
process[2] = function(input){ return input / 2;} 이다.
첫번째 for문 루프 안의 input은 맨처음 선언된 input값 1을 인자로 받아 1 + 10 = 11이고,
두번째 루프 안의 input은 첫번째 루프의 input값 11을 인자로 받아 11 * 11 = 121,
세번째 루프 안의 input은 두번째 루프의 input값 121을 인자로 받아 121 / 2 = 60.5 이다.
따라서 alert(input)를 실행해 출력되는 최종 input값은 60.5이다.
콜백(Callback)
값으로 사용될 수 있는 특성을 통해 함수의 인자로 함수를 전달할 때, 인자로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 원래 함수의 동작을 완전히 바꿀 수 있다. 이를 콜백이라고 한다. 아래 코드에선 인자로 전달된 함수 sortNumber의 구현에 따라서 함수 sort의 동작방법이 완전히 바뀌고 있다. 이러한 콜백이 가능한 이유는 자바스크립트의 함수가 값이기 때문이다.
- 원래 sort의 동작
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
console.log(numbers.sort()); // [1,10,2,20,3,4,5,6,7,8,9]- 콜백 함수 sortNumber로 인해 바뀐 sort의 동작
function sortNumber(a,b){
return a-b;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [1,2,3,4,5,6,7,8,9,10,20]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]비동기 처리
동기와 비동기
동기와 비동기란 무엇일까? 예를 들어 1명에게 이메일을 발송할 때 1초의 시간이 걸리는 시스템이 있다고 치자. 이 시스템을 사용해 1만명에게 메일을 발송할 때에 순서대로 발송해 총 1만초가 걸리게 되는걸 동기적 처리라고 한다. 반대로 이메일을 작성할 때 예약 발송처리를 해놓고 작성이 완료되면 한 번에 1만명에게 발송이 되도록 내부적으로 시스템이 돌아가게 처리하는 것을 비동기적 처리라고 부른다.
웹브라우저를 예로 들면 웹페이지를 불러올 때 새로고침 등으로 브라우저 전체 페이지를 불러오는 것을 동기적 처리라 하고, 웹페이지에서 어떤 버튼을 눌렀을 때에 전체 페이지를 다시 로드하지 않고 내가 원하는 정보만을 불러오는 걸 비동기 처리라고 할 수 있다.
Ajax
Ajax는 asynchronous Javascript and XML의 약자로, asynchronous은 비동기라는 뜻이다. 웹페이지를 다시 로드하지 않고 내부적으로 통신해 데이터를 불러와 처리할 수 있게 해주는 jquery 내부의 기법이다. 이 기술은 웹이 단순한 문서에서 벗어나 동작들을 처리할 수 있는 어플리케이션으로 발전하게 된 결정적인 계기가 되었다.
콜백은 비동기 처리에서도 유용하게 사용된다. 시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다. 다음 코드는 ajax를 이용한 비동기 처리의 예시이다. 일반적인 환경에서는 작동하지 않고 서버 환경에서만 동작한다.
- datasource.json.js
{"title":"JavaScript","author":"egoing"}- demo1.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.get('./datasource.json.js', function(result){
console.log(result);
}, 'json');
</script>
</body>
</html>ajax의 get메소드는 서버에서 json 데이터를 첫번째 인자로 받아 두번째 인자인 함수 function의 인자 result로 넘겨주며, 이 function 함수를 통해 사용자는 인자로 넘겨받은 json 데이터를 원하는 대로 처리할 수 있다.
출처 : 생활코딩 - Javascript
