JSON.parse()와 JSON.stringify()

JSON 이란?

JSON은 JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용된다. JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포맷입니다.

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

예를 들어, 한 사람의 데이터를 JSON 포맷으로 나타내보겠다. 한눈에 알아볼수가 있다.

{
  "name": "박xx",
  "age": 27,
  "married": false,
  "family": { "father": "박xx", "mother": "김xx" },
  "hobbies": ["독서", " 운동"],
  "jobs": null
}

JSON으로는 객체, 배열, 숫자, 문자열, 불리언(boolean), 널(null)과 같은 다양한 데이터를 나타낼 수 있다.

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

JSON 문자열을 JavaScript 객체로 변환할 때는 JSON 객체의 parse() 메서드를 사용한다.
parse() 메서드는 JSON 문자열을 인자로 받고 결과값으로 JavaScript 객체를 반환한다.

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

const str = `{
  "name": "박xx",
  "age": 27,
  "married": false,
  "family": { "father": "박xx", "mother": "김xx" },
  "hobbies": ["독서", " 운동"],
  "jobs": null
}`;

그 다음, JSON.parse() 메서드에 str을 인자로 넘겨 호출해보겠습니다. 결과값을 obj라는 변수에 저장하겠습니다.

const obj = JSON.parse(str);

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

{
    name: "박xx",
    age: 27,
    married: false,
    family: {
        father: "박xx",
        mother: "김xx"
    },
    hobbies: [
        "독서",
        "운동"
    ],
    jobs: null
}

출력 결과를 자세히 관찰해보시면 . JSON 문자열에서는 키(key)를 나타낼 때 반드시 쌍따옴표로 감싸줘야 하는 반면에, JavaScript 객체에서는 쌍따옴표를 꼭 사용할 필요가 없다.

이렇게 JavaScript 객체로 변환된 데이터는 .나 [] 기호를 사용하여 각 속성에 접근할 수 있습니다.

> obj.name
< '박xx'
> obj.age
< 27

이렇게 외부에서 문자열의 형태로 주어진 데이터를 해당 언어에서 다루기 용이하도록 내장 데이터 타입으로 변환하는 과정을 CS(Computer Science)에서는 소위 역직렬화(deserialization)이라고 부른다.

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

역으로 JavaScript 객체를 JSON 문자열로 변환할 때는 JSON 객체의 stringify() 메서드를 사용합니다. stringify() 메서드는 JavaScript 객체를 인자로 받고 JSON 문자열을 반환합니다.

예를 들어, 위에서 parse() 메서드의 호출 결과로 얻은 JavaScript 객체를 obj이라는 변수에 저장하겠다.

const obj = {
  name: "빅xx",
  age: 27,
  married: false,
  family: {
    father: "박xx",
    mother: "김xx",
  },
  hobbies: ["독서", "운동"],
  jobs: null,
};

그 다음, JSON.stringify() 메서드에 obj를 인자로 넘겨 호출하여 결과값을 str라는 변수에 저장하겠다.

const str = JSON.stringify(obj);

str에 저장된 값을 콘솔에 출력해보면 JavaScript 객체의 형태였던 데이터가 JSON 형식의 문자열로 변환되어 출력된다.

console.log(str);
'{"name":"박xx","age":27,"married":false,"family":{"father":"박xx","mother":"춘김xx"},"hobbies":["독서","운동"],"jobs":null}'

당연한 얘기이겠지만 이렇게 JSON 형식의 문자열로 변환된 데이터는 더 이상 .나 [] 기호를 사용하여 각 속성에 접근할 수 없게 됩니다.

> str.name
< undefined

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