자바스크립트 개념 정리(3)

출처 : 생활코딩 자바스크립트 강의 정리

 

1. 값으로서의 함수

자바스크립트의 특징 : 함수 자체가 값이 될 수 있다.

function a() {

}

var a = function(){

}

 

함수는 값이고, 객체 안에 담길 수 있다.

a = {
	b:function(){
   //b는 key,속성(property)
   //value는 함수, 이것은 메소드(method)라고 한다.
	}
}

 

1-2. 값으로서의 함수와 콜백

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)); // 결과값 1 

// cal('plus') ==> function(left, right){return left + right} 을 의미한다.

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);
// i = 0 , input = 1
// process[0] = function(input){ return input + 10;}, // 결과값 11
// i = 1, input = 11
// process[1]= function(input){ return input * input;}, // 결과값 121
// i = 2, input = 121
// process[2] = function(input){ return input / 2;}    // 결과값 121 / 2 = 60.5

 

1-3. 콜백

어떠한 함수가 수신한 인자가 함수

function sortNumber(a,b){
    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
    return b-a;
}


function sortNumber(a,b){
	//if(a>b){
    //	return 1
    //} else if(b>a){
    //	return -1
    //} else {
    //	return 0 
    //}
    // 위의 예제와 비교해서 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-4.비동기 처리와 콜백

비동기처리 

글 작성 -> 이메일 발송(시간소요) ->  작성완료  : 동기적

글 작성 -> 이메일 발송 예약 -> 작성완료 : 비동기

그 일을 지금 처리 할 순 없지만 나중에 처리하는 방식에 대한 이해를 위한 예시

 

자바스크립트에서는 Ajax로 비동기적인 처리를 함 

어떠한 정보를 보고 싶을 때 새로운 정보를 로드해서 봄

웹 페이지에 존재하지 않는 정보를 페이지를 리로드 하지 않고 서버에 요청해서 로드함.