15. Javascript 함수형 프로그래밍 적용(4) - each

 

 

함수형 프로그래밍의 특성을 통해 구현하는 반복 함수에 대해서 살펴보도록 하겠습니다. 우선 가장 먼저 알아볼 반복 함수는 each( )입니다. 주로 프로그래밍 언어들에서 each, forEach로 제공되는 함수입니다. each( ) 함수는 배열의 각 요소 또는 객체의 각 프로퍼티를 하나씩 꺼낸 다음, 순서대로 특정 함수에 인자로 전달해 실행시키는 역할을 하게 됩니다. 

 

each함수의 예제를 살펴보도록 하겠습니다. 여기서 소개하는 예제는 jQuery 1.0의 each( ) 함수를 기준으로 합니다. 

 

function each(obj, fn, args) {
    if(obj.length == undefined) {
        for(var i in obj){
            fn.apply(obj[i], args || [i, obj[i]]);
        }
    } else {
        for(var i = 0; i < obj.length; i++) {
            fn.apply(obj[i], args || [i, obj[i]]);
        }
    }

    return obj;
}

each([1,2,3], function(idx, num){
    console.log(idx + ": " + num);
});

var rapper = {
    name : "SWINGS",
    age : 30,
    lable : "IMJMWDP"
};

each(rapper, function(idx, value){
    console.log(idx + ": " + value);
});

/* 출력
0: 1
1: 2
2: 3
name: SWINGS
age: 30
lable: IMJMWDP
*/

 

복잡해 보이지만, 사실 그렇게 어려운 함수는 아닙니다. 하나씩 살펴볼까요? 우선 each의 첫 번째 파라미터는 obj입니다. 이때 이 obj에 length가 있는지 여부를 확인하여 처리에 분기를 제공합니다. 즉, '객체냐 배열이냐'를 판단하여 따로 구분한다는 의미가 되겠죠? 배열일 경우에는 length를 이용해 for문을 실행하고 객체일 경우에는 length를 사용하지 않고 반복문을 실행하게 됩니다. 

 

사용자가 원하는 함수를 fn으로 전달하고 있는데요(예제에서는 익명함수를 전달)이 fn에 apply를 통해 this에 obj의 요소를 하나씩 바인딩하고, 익명함수에서 정의된 두 개의 파라미터 idx / value에 전달할 값들을 인자로 전달합니다. 이 예제에서는 별도의 args 인자는 사용하지 않았으며, 더불어 라이브러리에 따라 each 함수에서 인자를 전달하는 순서나 방식은 조금씩 차이가 있을 수 있습니다. 이 점을 기억하고 본인이 사용하는 환경에서의 작동 방식을 잘 확인하기를 바랍니다.