Object에 동적으로 Property 추가

javascript에서 동적으로  Object에 Property를 추가할 일이 생겼다.

총 3가지 방법을 생각해봤는데 하나씩 살펴보면,

1. 스크립틀릿(Scriptlets) 사용

var scritletObj = {

    "key_1": {

     "name": "jimmy",

     "msg": "hello world"

    },

    "key_2": {

     "name": "billy",

     "msg": "foo equals bar"

    },

    <% for(int i=0; i<3; i++){ %>

    "for_key_<%=i%>" : {

     "name" : "for name <%=i%>",

     "msg" : "for msg <%=i%>"

    }

    <%if(i<=2){%>,<%}%>

    <%}%>

}

2. JSTL 사용

var jstlObj = {

    "key_1": {

     "name": "jimmy",

     "msg": "hello world"

    },

    "key_2": {

     "name": "billy",

     "msg": "foo equals bar"

    },

    <c:forEach begin="0" end="2" varStatus="i">

    "for_key_${i.index}" : {    

     "name" : "for name ${i.index}",

     "msg" : "for msg ${i.index}"

    }

    <c:if test="${i.index le 2}">,</c:if>

    </c:forEach>

}

3. 순수 javascript 사용

var javascriptObj = {

    "key_1": {

     "name": "jimmy",

     "msg": "hello world"

    },

    "key_2": {

     "name": "billy",

     "msg": "foo equals bar"

    }

}

for(var i=0; i<3; i++){

javascriptObj['key'+i] = {};

javascriptObj['key'+i].name = "for name "+i;

javascriptObj['key'+i].msg = "for msg "+i;

}

alert(JSON.stringify(javascriptObj));

다른 방법도 있을까?

일단 세가지 중에서는 1번이 성능상으로는 가장 좋지 않을까 싶은데, 가독성이 너무 떨어지는 것 같다. 

그렇다고 다른 소스가 가독성이 좋은 건 또 아니지만;;

참고로 3번으로 한 경우 소스보기로는 확인이 안된다는 단점(?)이 있다.