값으로서의 함수와 콜백
JavaScript에서는 함수도 객체다. 다시 말해서 일종의 값이다. 거의 모든 언어가 함수를 가지고 있다. JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.
아래의 코드는 함수 a는 변수 a에 담겨진 값이다.
function a() {} // var a = function(){} 와 같다.또한, 값으로서의 함수는 "값(value)"이기 때문에 객체의 값으로 포함될 수도 있다. 이렇게 객체의 속성값으로 담겨진 함수를 메소드(method)라고 부른다.
그리고 객체 안에서 b는 'key', 속성, 'property' 라고 부른다.
//a라는 객체 정의
a {
b:function() {//b라는 key에 함수값이 할당.
}
}함수의 용도1 : 함수의 매개변수
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));//실행결과는 0cal(increase,1) : 첫 번째 매개변수로써 increase 함수가 전달되어, cal 함수 내에서 increase 함수가 호출된다. increase 함수의 매개변수로 num = 1이 전달되어 2라는 값을 리턴한다.
마찬가지로 cal(decrease,1)에서는 첫 번째 매개변수로써 decrease 함수가 전달되어, cal 함수 내에서 decrease 함수가 호출된다. decrease 함수의 매개변수로 num = 1이 전달되어 0라는 값을 리턴한다.
2. 함수의 용도2 : 함수의 리턴 값
cal('plus')(2,1) : plus가 cal함수에 전달되고 cal함수의 리턴 값은 funcs[plus]다. cal함수 내부에는 funcs라는 객체가 생성되어있는데, funcs[plus]라 하면 메소드 plus에 해당하는 function이 실행되어 2+1인 '3'이라는 값을 리턴한다.
cal('minus')(2,1) : plus가 cal함수에 전달되고 cal함수의 리턴 값은 funcs[minus]다. cal함수 내부에는 funcs라는 객체가 생성되어있는데, funcs[minus]라 하면 메소드 minus에 해당하는 function이 실행되어 2-1인 '1'이라는 값을 리턴한다.
3. 콜백
값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 전달할 수 있다. 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다. 인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다.
4. 비동기 콜백
콜백은 비동기처리에서도 유용하게 사용된다. 시간이 오래걸리는 작업이 있을 때 작업이 완료된 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다. (참고:다음 코드에서는 일반 환경에서는 작동하지 않고 서버 환경에서만 동작한다.)
AJAX(Asynchronous Javascript And XML)
사용자가 페이지를 다시 로딩하지 않아도 그 내용을 볼 수 있다. 이것은 내부적으로는 자바스크립트를 통해서 서버에 정보를 요청하기 때문에 가능한 것다.
get이라는 메소드가 서버에 정보를 요청한다. 하지만 정보를 요청하는 중에 사용자에게 어떤 행위를 하는 것을 AJAX로 할 수 있다.콜백함수를 통해서(함수를 매개변수로 전달함으로써) get이 동작하는 것을 완전히 바꿀 수가 있다.
Last updated
Was this helpful?