[JavaScript] 값으로서의 함수와 콜백

값으로서의 함수

함수는 객체이다. 일종의 값이라고 볼 수 있다. 거의 모든 언어가 함수를 가지고 있다.

But, JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.

※ function a( ){ }를 다른 방식으로 표현

하면 var a = function() {}(변수 a의 값은 함수이다.)이라고 표현할 수 있다.

a = {
  b:function(){
    //여기서 함수는 값이고 객체에 저장될 수 있다.
    /*
    key = b
    ->변수와 같은 역할을 해주고 있다.

    value = function(){}

    key값을 속성,property라 부른다.
    그리고 value값을 메소드라 부른다.
    즉, 객체 안에 정의되어있는 함수를 메소드라 부른다.

    */
  }
}

상단의 코드의 key값을 속성, property라 부른다.
value의 값(함수)은 메서드(method)라 부른다.

+) 함수는 값이기 때문에 다른 인자에 전달될 수 있다.

 

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

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));
//alert(cal('plus')까지 var funcs 부분에 해당된다. 
//이후 괄호( 2,1 )이 나옴으로써 함수가 호출된다.
alert(cal('minus')(2,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);
}
//i의 값이 0일때 배열의 첫번째 함수 1+10 = 11
//i의값이 1일때 배열의 두번째 함수 11* 11 = 121
//i의 값이 2일때 배열의 세번째 함수 121/2 =60.5
alert(input);

함수는 first-class (citizen, object)라 불리며
의미는 다양한 용도로 사용될 수 있는 형태이다.
즉, 함수는 변수, 매개변수, 리턴값와 같이
다양한 용도로 사용될  수 있는 형태이다.

 

콜백이란?

프로그래밍에서 콜백(callback) 또는 콜 애프터 함수(call-after function)는

다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다.

콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행하거나 나중에 실행할 수 있다.

[출처] 위키백과

---

콜백은 값으로써의 함수라는 주제와 밀접하게 연결되어있다.

함수가 수신하는 인자가 함수인 경우를 콜백이라한다.

var numbers = [20,10,9,8,7,6,5,4,3,2,1];
numbers.sort();
//점 앞에는 있는 코드(numbers)는 객체이다. 현재numbers는 배열 객체이다.
//sort는 (내장객체, 내장 메소드 등)메소드이다. 
//내장된 함수를 사용하지 않고 함수를 직접 작성하게된다면, 그것을 우리가 직접 만든 사용자 정의 객체, 사용자 정의 함수라고 부른다.

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
var sortfunc = function (a,b){
    // 정렬의 역순을 원한다면 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
    return b-a;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); 
//sortfunc가 (값으로써 함수를 사용가능)콜백이다.
// array, [20,10,9,8,7,6,5,4,3,2,1]

비동기 처리

콜백은 비동기 처리에서도 유용하게 사용된다. 시간이 올래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당작업이 끝났을 때 미리 등록한 작업을 실행한다.

단, 서버 환경에서만 동작한다.

동기적 처리	비동기적 처리
정해진 순서를 순차적으로 진행하는 것을 의미. 즉, 지금 진행하는 작업이 끝이나면 다른 작업으로 넘어가고 그 작업이 끝이 나면 다른 작업으로 넘어가는 방식이 동기적 처리 방식이라고 한다.	비동기적 처리 작업은 순서대로 진행하는 것일 아니라 한번에 여러개가 진행되는 것을 의미한다. 비동기적 처리는 주로 api요청, 파일읽기, 암호화, 복호화 등에서 자주 사용된다. 비동기적 처리를 사용하는데 주로 사용되는 함수와 문법으로는 callback 함수와 Promise, async/await 문법 등이 존재한다.

 

Ajax란?

Ajax란 [Asynchronous(비동기) JavaScript and XML]의 약자이다.

Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다.

 

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.

즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

 

이때 서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있다.

-> JSON, XML, HTML, 텍스트 파일 등.

 

(우리는 Ajax를 제어할때 비동기적인 제어를 한다.)