JSON : JavaScript Object Notation

JSON은 자바스크립트의 언어적인 측면에서 상당히 핵심적인 기능 가운데 하나이다. JSON을 활용하면 객체나 배열 등을 만들어 내는 코드를 굉장히 깔끔하게 작성할 수 있다. JSON이 어떻게 동작하는지를 살표보려면, 먼저 자바스크립트에서 배열이 어떤 구조로 동작하는지 이해해야 한다.

자바스크립트에는 Array라는 배열 클래스가 내장돼있으며, new 라는 키워드를 사용해 아래와 같이 배열을 생성할 수 있다.

myLibrary.books = new Array();

이와 같이 배열을 생성하고 나면 C나 자바에서와 비슷하게 배열의 항목마다 번호를 지정해 배열 값을 지정할 수 있다.

myLibrary.books[4] = somePredefinedBook;

배열의 값은 이와 같이 번호를 사용해 지정할 수 도 있지만, 자바의 Map클래스, 파이썬 Directory, 자바스크립트의 모든 객체와 같이 숫자가 아닌 문자열을 사용해 각 속성을 지정하는 방법도 있다.

myLibrary.books["BestSeller"] = somePredefinedBook;

이런 형태의 문법으로 배열을 활용하면 각각의 값을 세밀하게 지정할 수 있다는 장점이 있지만, 배열이나 객체에 다량의 속성 값을 넣어야 하는 등의 경우에는 아주 귀찮아진다.
각 항목을 숫자 법호로 지정하는 배열은 대괄호 안에 각 번호에 해당하는 값을 쉼표(,)로 구분해 순서대로 넣어주면 한번에 배열값을 모두 설정할 수 있다.

myLibrary.books = [PredefinedBook1, PredefinedBook2, PredefinedBook3];

그리고 자바 스크립트 객체는 중괄호를 사용하고, 각각의 속성과 값을 키:값의 형태로 나열해 만들수 있다.

myLibrary.books = {
  bestSeller : PredefinedBook1,
  cookbook : PredefinedBook2,
  spaceFiller : PredefinedBook3
};

번호건 문자열이건 어떤 방법을 사용하더라도 값 양쪽 공백은 모두 무시하기 때문에, 코드를 읽기 쉽게 위와 같이 여러줄에 나눠 작성할 수 있다. 물론 키로 사용할 문자열 가운데에 공백을 넣을 수는 있는데, 문자열에 공백이 들어가다면, 다음과 같이 양쪽에 따옴표를 찍어줘야 한다.

"best Seller" : PredefinedBook1,


JSON으로 객체를 생성할 때에는, 여러개의 JSON 생성 부분을 계층 구조로 연결해 복잡한 구조의 객체를 한번에 만들어 낼 수 있다.

var myLibrary = {
  location : "my house",
  keywords : ["root vegetables", "turnip", "tedium"],
  books : [
  {
       title : "Turnip Cultivation through the Ages",
       authors : [
                     { name : "Jim Brown", age : 9 }
                     { name : "Jim Brown", age : 9 }
                     ],
        publicationDate : "long ago"
    },
  {
       title : "Turnip Cultivation through the Ages",
       authors : [
                     { name : "Jim Brown", age : 9 }
                     { name : "Jim Brown", age : 9 }
                     ],
        publica
tionDate : new Date(1605, 11, 05);
    }
  ]
};

위의 코드를 보면 myLibrary 객체에 속성 3개를 추가했다. location은 단순한 문자열 값이고, keywords는 여러 개의 문자열에 각각 번호를 붙인 배열객체이고, books역시 번호가 붙여진 배열인데 배열의 항목으로는 제목(문자열), 출판일자(한군데는 자바스크립트의 Date객체를 사용했고, 나머지는 그냥 문자열을 사용), 저자 목록(배열) 등의 값을 갖는 객체가 들어있다. 각각의 저자는 name과 age값을 갖고 있다. 이처럼 일반적인 객체 생성 방법을 사용했을 때 수십 줄의 코드를 사용했어야 할 만한 부분이지만, JSON을 활용하면 단 한번의 단계에 정보를 모두 넘겨주면서 똑같은 객체를 생성할 수 있다. (물론 이 프로그램을 네크윅으로 전송하는 경우 전송량도 줄어든다.)

위에 예제에서 보면 Date객체를 사용했는데 어떤 형의 자바스크립트 코드를 사용해도 무방하며, Date객체 대신 날짜를 생성하는 함수를 지정해도 된다.

function getpowderPlot() {
  return new Date(1605, 11, 05);
}



var volNum=2;

var turnipVol2= {
       title : "Turnip Cultivation through the Ages" + volNum,
       authors : [
                     { name : "Jim Brown", age : 9 }
                     ],
       publicationDate : getpowderPlot()
    }
  ]
};


이번 코드에서는 책의 제목에 표현식과 동적인 변수를 사용했는데 표현식을 계산한 결과가 실제로 책의 제목으로 지정되고, publicationDAte속성에는 미리 정의돼있는 getpowderPlot() 함수의 실행 결과를 설정하도록 되어있다.

앞에서 소개한 예제를 보면 getpowderPlot()함수를 미리 구한한 다음, trunipVol2객체를 생성하는 순간 getpowderPlot() 함수를 호출하도록 만들어져있다. 이렇게 JSON으로 객체를 생성할 때 속성과 함수를 모두 지정할 수 있고, 객체를 생성한 이후에도 아래와 같이 함수나 속성을 얼마든지 추가할 수 있다.

var turnipVol2= {
       title : "Turnip Cultivation through the Ages" + volNum,
       authors : [
                     { name : "Jim Brown", age : 9 }
                     ],
       publicationDate : getpowderPlot()
    }
  ],
  summarize:function(len) {
       if (!len) { len=7; }
       var summary = this.title + " by "
                         + this.authors[0].name
                         + " and his cronues is boring. Z";
       for (var i=0;i<len;i++) {
           summary+="z";
       }
       alert(summay);
  }
};

turnipVol2.summarize(6);

위에 소개한 summarize()함수는 인자를 넘겨받고, this라는 키워드로 현재 실행중인 객체 컨텍스를 참조하는 등 일반적인 자바스크립트 함수가 가질 수 있는 대부분의 기능을 활용하고 있다. 어쨌거나 객체를 생성하고 나면 그저 똑같은 객체일 뿐이기 때문에 자바스크립의 기본적인 방법과 함께 JSON도 얼마든지 섞어서 편한대로 활용할 수 있다. JSON으로 생성한 자바스크립트 객체의 내용을 일부 수정해야 할 필요가 있다면, 자바스크립트의 기본적인 방법을 활용하는것도 좋다.

var members = { one:1 , two:2, three:3 };
memebrs.five = 5;

보다시피 최초에 객체를 생성할 때에는 JSON을 활용했고, 객체에 속성을 하나 추가할때에는 일반적인 자바스크립의 속성 추가방법을 사용했다. 물론 거꾸로 자바스크립트 일반 방법으로 생성한 객체에 JSON을 사용해 속성이나 함수를 추가할 수도 있다.

var members = new Object();
members.five = 5;
members = { one:1 , two:2, three:3 };

==================================================================================

출처 : Ajax in Action