[Javascript] JSON 다루기

 

 

 

이번 글에서는 자바스크립트에서 JSON 내장 객체를 이용하여 JSON 형식으로 표현된 데이터를 다루는 방법에 대해서 알아보려 한다.

 

먼저 JSON이 무엇인지에 대해 간단하게 짚고 넘어가겠다.

 

JSON(JavaScript Object Notation)은 데이터를 문자열의 형태로 나타내기 위해 사용된다. 그 이름이 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리 잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포맷이다. 특히 네트워크를 통해 서로 다른 시스템들이 데이터를 주고받을 때 많이 사용되기 때문에 어렵지 않게 접할 수 있다.

 

JSON이 기존에 사용되던 XML과 같은 데이터 포맷을 빠르게 대체할 수 있었던 이유는 무엇보다도 가독성 때문일 것이다. JSON 포맷의 데이터는 기계뿐 아니라 사람이 읽기에도 크게 무리가 없다.

 

{
  "name": "홍길동",
  "age": 20,
  "married": false,
  "family": { "father": "홍판서", "mother": "춘섬" },
  "hobbies": ["독서", "도술"],
  "jobs": null
}

 

JSON으로는 객체, 배열, 숫자, 문자열, boolean, null과 같은 다양한 데이터를 나타낼 수 있다. JSON의 문법은 매우 간단하고 자바스크립트와 상당히 유사하기 때문에 이 글에서 세세하게 다루지는 않겠다.

 

 

 

JSON 내장 객체

자바스크립트는 JSON 포맷의 데이터를 간편하게 다룰 수 있도록  JSON 이라는 객체를 내장하고 있다. 이 객체는 자바스크립트 코드를 브라우저에서 실행하든 Node.js 런타임에서 실행하든 상관 없이 전역(global)에서 접근이 가능하다.

 

JSON 내장 객체는 Javascript 객체와 JSON 문자열 간의 상호 변환을 수행해 주는 2가지 함수를 제공한다.

 

 

JSON.parse(): JSON 문자열을 Javascript 객체로 변환

JSON 문자열을 자바스크립트 객체로 변환할 때에는 JSON 객체의 parse() 함수를 사용한다. parse() 함수는 JSON 문자열을 인자로 받고 결과값으로 자바스크립트 객체를 반환한다.

 

예를 들기 위해 위에서 들었던 JSON 문자열을 str이라는 변수에 저장해 보겠다.

const str = `{
  "name": "홍길동",
  "age": 20,
  "married": false,
  "family": { "father": "홍판서", "mother": "춘섬" },
  "hobbies": ["독서", "도술"],
  "jobs": null
}`;

 

그리고 나서 JSON.parse() 함수에 str을 인자로 넘겨 호출해 보겠다. 그 다음 결과 값을 obj라는 변수에 저장하겠다.

const obj = JSON.parse(str);

 

obj에 저장된 값을 콘솔에서 출력해 보면 JSON 문자열 형태의 데이터가 자바스크립트 객체의 형태로 변환되어 출력되는 것을 확인할 수 있다.

 

console.log(obj);

// 출력 결과
{
    name: "홍길동",
    age: 20,
    married: false,
    family: {
        father: "홍판서",
        mother: "춘섬"
    },
    hobbies: [
        "독서",
        "도술"
    ],
    jobs: null
}

 

 

출력 결과를 자세히 보면 자바스크립트 객체와 JSON 문자열 간에는 미묘한 차이가 있다는 걸 알 수 있다. JSON 문자열에서는 key를 나타낼 때 반드시 ""(쌍따옴표)로 감싸줘야 하는 반면, 자바스크립트 객체에서는 반드시 쌍따옴표를 사용할 필요는 없다(특수문자나 영어 외의 언어와 같이 키로 허용되지 않는 문자를 키로 사용해야 하는 경우에는 쌍따옴표를 사용해야 한다). 

 

이렇게 자바스크립트 객체로 변환된 데이터는  .  또는  [ ]  기호를 사용해 각 속성에 접근할 수 있다.

obj.name  // '홍길동'
obj['name']  // '홍길동'
obj.age  // 20
obj.married  // false
obj.family  // {father: '홍판서', mother: '춘섬'}
obj.family.mother  // '춘섬'
obj.hobbies  // ['독서', '도술']
obj.hobbies[1]  // '도술'
obj.jobs  // null

 

이렇게 외부에서 문자열의 형태로 주어진 데이터를 해당 언어에서 다루기 용이하도록 내장 데이터 타입으로 변환하는 과정을 CS(Computer Science)에서는 역직렬화(deserialization)이라고 한다. 대표적인 사례로 클라이언트에서 JSON 포맷으로 데이터를 보내면 서버에서 우선 자바스크립트 객체로 변환한 후 데이터를 처리하게 되는 것을 들 수 있다.

 

 

---

 

 

JSON.stringify(): Javascript 객체를 JSON 문자열로 변환

역으로 자바스크립트 객체를 JSON 문자열로 변환할 때에는 JSON 객체의 stringify() 함수를 사용한다. stringify()는 자바스크립트 객체를 인자로 받고 JSON 문자열을 반환한다.

 

예를 들어 위에서 parse()의 호출 결과로 얻은 자바스크립트 객체를 obj라는 변수에 저장했었다. 이제 JSON.stringify() 함수에 obj를 인자로 넘겨 호출한 뒤 str2이라는 변수에 저장하겠다.

 

const str2 = JSON>stringify(obj);

 

str2에 저장된 값을 콘솔에 출력해 보면 자바스크립트 객체 형태였던 데이터가 JSON 형식의 문자열로 변환되어 출력되는 것을 확인할 수 있다.

 

console.log(str2);  // '{"name":"홍길동","age":25,"married":false,"family":{"father":"홍판서","mother":"춘섬"},"hobbies":["독서","도술"],"jobs":null}'

 

 

여기서 소소한 팁이 있다면 반환해야 하는 자바스크립트 객체가 많은 양의 데이터를 담고 있는 경우에는 이처럼 한 줄의 문자열로 변환되면 알아보기 힘들어지는데 이럴 때에는 stringify() 함수의 세 번째 인자로 들여쓰기할 공백의 크기를 지정해 줄 수 있다.

 

예를 들어 JSON 문자열이 2개의 공백으로 들여쓰기가 되도록 하려면,

const str2 = JSON.stringify(obj, null, 2);
console.log(str2);

// 출력 결과
{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": {
    "father": "홍판서",
    "mother": "춘섬"
  },
  "hobbies": [
    "독서",
    "도술"
  ],
  "jobs": null
}

 

당연한 이야기지만 이렇게 JSON 형식의 문자열로 변환된 데이터는 더이상  .  또는  [ ]  기호를 통해 각 속성에 접근할 수 없게 된다.

 

str2.name // undefined

 

이렇게 특정 언어의 내장 타입의 데이터를 외부에 전송하기 용이하도록 문자열로 변환하는 과정을 CS에서는 직렬화(serialization)이라고 부른다. 대표적인 사례로 서버에서 클라이언트의 요청을 처리한 후 자바스크립트 객체 형태의 데이터를 JSON 형태의 문자열로 변환하여 응답하는 것을 들 수 있다.