[javascript] 디폴트 값을 이용한 코딩

관련 지식
#javascript #jquery #extend #default-option

자바스크립트 뿐 아니라 모든 프로그래밍 언어는 함수에 정의되는 argument가 primitive type 이 많을수록 유연한 함수에서 멀어집니다. argument의 일부를 옵션값으로 정의하고 싶은 경우에도 파라미터 순서를 지키거나/고려해야 하기 때문입니다.

primitive type 은 객체나 함수가 아닌 원시 데이터 타입을 의미.
참고 : Primitive

function fnCall(n1, o1, o2, o3) {
}
fnCall('필수', null, '옵션2');
fnCall('필수', '옵션1', null, '옵션3');  //옵션값을 넣치 않을때도 순서는 지켜야함

그래서 함수의 인자를 늘리기보다 값을 재 정의한 객체를 넘기는 형태로 함수의 인자 갯수를 조절하는게 확장성이 좋습니다.

function fnCall(n1, o) {
}
fnCall('필수', { o2 :'옵션2' });
fnCall('필수', { o3 :'옵션3', o1:'옵션1' });  //옵션 순서는 의미없음

디폴트 값이 필요한 이유

아래 소스는 ajax() 의 간단한 예제입니다. 실제로 이정도로 간단하게 작성하는 경우는 없겠지만 호출이 가능한 샘플임은 틀림없습니다.

$.ajax({
  url: "test.jsp",
  success: function() {
  }
});

그런데 저 샘플에는 method도 파라미터도 정의되지 않았습니다. 실제로 ajax()함수에 정의할수 있는 값은 20가지가 넘습니다. 즉 ajax() 함수를 호출할때 정의한 두 가지 항목을 제외한 나머지 값은 디폴트 값으로 동작한다는 것입니다. 디폴트 값이 존재할 경우 전체 항목을 반드시 정의할 필요없이 필요한 항목만 정의하면 되므로 함수 호출이 매우 편리해집니다.

그럼 디폴트 옵션값을 내부적으로 정의해두고 함수 호출쪽에서 새롭게 정의한 옵션값이 있으면 그것을 디폴트 값보다 우선 적용하면 될것입니다. 디폴트 값과 사용자 정의 값을 어떻게 합치면 될까요?

$.extend 의 사용

JQuery 에는 extend() 함수가 있고 그 함수를 호출하면 간단하게 옵션을 합칠수 있습니다.

//기본 옵션
var defaultOption = {
  key1 : 'aaa',
  key2 : 'bbb',
  key3 : 82,
  key4 : function defaultFn() {
  },
  key5 : 'ccc'
};
var userOption = {
  key1 : 'AAA',  //문자열 재정의
  key4 : function newFn() {  //함수를 재정의
  },
  key7 : 'dump'  //없는 항목 정의
};
$.extend(defaultOption, userOption);
console.log(defaultOption);

output)

{
  key1: "AAA",
  key2: "bbb",
  key3: 82,
  key4: [Function: newFn],
  key5: "ccc",
  key7: "dump"
}

기대하는 대로 값이 나왔나요? $.extend() 함수는 두 객체의 값을 결합합니다. 정확히 말하면 첫번째 인자의 값에 두번째 인자의 값을 엎어친다고 보는게 맞습니다. defaultOption 변수의 값 자체가 바뀌기 때문입니다.. 만약 이러한 결과를 기대한게 아니라면 기능을 만들어야 합니다.

combine 예제

이것은 $.extend() 함수와는 다른 기능입니다. 직접 구현할 기능은 아래 세 가지 조건을 만족하는 기능입니다.

1. 원본 디폴트 옵션 변수는 변조시키지 않음
2. 디폴트 옵션에 정의되지 않은 항목은 결합되지 않음
3. 사용자 정의값에서 빈값은 정의 불가

$.extend() 와는 다르게 기준이 되는 디폴트 옵션에 정의된 항목만 결합할것. 그리고 디폴트 옵션을 변경 시키지 않고 결합된 객체를 리턴하는 것이 구현 목표 입니다.

function combine(def, usr) {
  var n = {};
  for(var prop in def) {
    n[prop] = usr[prop] || def[prop] ;
  }
  return n;
}
var op = combine(defaultOption, userOption);
console.log(op);

output)

{ 
  key1: 'AAA',
  key2: 'bbb',
  key3: 82,
  key4: [Function: newFn],
  key5: 'ccc' 
}

이전에 설명드린 논리 연산을 이용하여 간단하게 구현하였습니다. key7은 기본 옵션에는 없는 잘못된 정의이기 때문에 리턴값에 포함되지 않았습니다.

extend 예제

$.extend() 함수는 강력한 기능이지만 JQuery 를 사용하지 않는 환경이라면 사용하지 못하게 됩니다. 이번엔 extend() 함수를 구현하겠습니다. JQuery의 그것과 다른점은 역시 디폴트 옵션값은 변경시키지 않는다는 것입니다.

function extend(def, usr) {
  var n = {};
  for(var prop in def) {
    n[prop] = def[prop];
  }
  for(var prop in usr) {
    n[prop] = usr[prop] || n[prop];
  }
  return n;
}
var op2 = extend(defaultOption, userOption);
console.log(op2);

output)

{
  key1: 'AAA',
  key2: 'bbb',
  key3: 82,
  key4: [Function: newFn],
  key5: 'ccc',
  key7: 'dump'
}

combine (deep copy)

그런데 위 두개의 예제는 depth가 1인 옵션에 대해서만 적용되고 아래 데이터와 같은 2 이상에서는 정상적으로 동작하지 않습니다.

var defaultOption = {
  group1 : {
    key1 : 'aaa',
    key2 : 'bbb'  
  },
  group2 : {
    key3 : 82,
    key4 : function defaultFn() {
    },
    key5 : 'ccc'
  },
  group3 : {
    group4 : {
      key6 : 100,
      key7 : 'ddd'
    }
  }
};

이렇게 depth가 다른 경우엔 deep copy 가 되어야 합니다. 반복 로직을 줄이기 위해 몇 개의 함수가 더 필요하게 되었는데 combine() 함수의 내부에 선언하여 외부 노출을 막았습니다.

function combine(def, usr) {
  function isEnd(v, k) {
    return ((v instanceof Function) || !(v instanceof Object));
  }
  function _(dst, def, usr) {
    for(var prop in def) {
      if(prop == 0) {
        return;
      }
      if(isEnd(def[prop], prop)) {
        dst[prop] = usr[prop] || def[prop];
      }
      else {
        dst[prop] = {};
        _(dst[prop], def[prop], usr[prop]);
      }
    }
  }
  var dst = {};
  _(dst, def, usr);
  return dst;
}
var op = combine(defaultOption, userOption);
console.log(op);

output)

{ 
  group1: { 
    key1: 'AAA', 
    key2: 'bbb' 
  },
  group2: { 
    key3: 180, 
    key4: [Function: newFn], 
    key5: 'ccc' 
  },
  group3: { 
    group4: { 
      key6: 100, 
      key7: 'ddd' 
    } 
  } 
}

이 소스의 완성된 샘플은 맨 밑에 추가하겠습니다.

정리

여기서 선보인 샘플이 정답은 아닙니다. 상황에 따라 다른 기능을 써야 할 수도 있죠. 이러한 코딩 방법이 있다는 것만 참고하시면 될 것 같습니다.

최종 샘플

//기본 옵션
var defaultOption = {
  group1 : {
    key1 : 'aaa',
    key2 : 'bbb'  
  },
  group2 : {
    key3 : 82,
    key4 : function defaultFn() {
    },
    key5 : 'ccc'
  },
  group3 : {
    group4 : {
      key6 : 100,
      key7 : 'ddd'
    }
  }
};
var userOption = {
  group1 : {
    key1 : 'AAA',  //재정의 했음
  },
  group2 : {
    key3 : 180,  //재정의함
    key4 : function newFn() {  //함수를 재정의 함
    },
    key5 : 'ccc'
  },
  group3 : {
    key6 : 200,  //잘못정의했음
    group4 : {
      key8 : 'dump'  //잘못정의했음
    }
  }
};
function combine(def, usr) {
  function isEnd(v, k) {
    return ((v instanceof Function) || !(v instanceof Object));
  }
  function _(dst, def, usr) {
    for(var prop in def) {
      if(prop == 0) {
        return;
      }
      if(isEnd(def[prop], prop)) {
        dst[prop] = usr[prop] || def[prop];
      }
      else {
        dst[prop] = {};
        _(dst[prop], def[prop], usr[prop]);
      }
    }
  }
  var dst = {};
  _(dst, def, usr);
  return dst;
}
var op = combine(defaultOption, userOption);
console.log(op);