javascript JSON.parse() / JSON.stringify() 사용법

JSON 내장 객체

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

JSON 내장 객체는 JavaScript 객체와 JSON 문자열 간의 상호 변환을 수행해주는 두 개의 메서드를 제공합니다.

 

JSON.parse() - JSON으로받은 것을 “구문 분석”하기위한 것입니다. 
JSON.stringify() - 객체 / 배열에서 JSON 문자열을 만드는 것입니다.

 

 

 

JSON.parse - JSON 텍스트 문자열을 JavaScript 객체로 변환합니다.

JSON.stringify - JavaScript 객체를 JSON 텍스트로 바꾸고 해당 JSON 텍스트를 문자열에 저장합니다.

 

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

JSON 문자열을 JavaScript 객체로 변환할 때는 JSON 객체의 parse() 메서드를 사용합니다.

parse() 메서드는 JSON 문자열을 인자로 받고 결과값으로 JavaScript 객체를 반환합니다.

 

JSON.parse()메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다.

 

 

JSON 의 일반적인 용도는 웹 서버와 데이터를 주고 받는 것 입니다. 웹 서버로 데이터를 보낼 때 데이터는 문자열이여야 하며, JSON.parse()로 데이터를 구문 분석하며, 데이터가 Javascript 객체로 변환됩니다.

AJAX 요청을 사용하여 서버에서 JSON을 요청할 수 있습니다.

서버의 응답이 JSON 형식으로 작성되는 한 문자열을 JavaScript 객체로 구문 분석 할 수 있습니다.

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

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

const obj = JSON.parse(str);

obj에 저장된 값을 콘솔에 출력해보면

JSON 문자열 형태의 데이터가 JavaScript 객체의 형태로 변환되어 출력되는 것을 확인할 수 있습니다.

console.log(obj);

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

출력 결과를 자세히 관찰해보시면 JavaScript 객체와 JSON 문자열 간에는 아주 미묘한 차이가 있는 것을 알 수 있습니다.

JSON 문자열에서는 키(key)를 나타낼 때 반드시 쌍따옴표로 감싸줘야 하는 반면에,

JavaScript 객체에서는 쌍따옴표를 꼭 사용할 필요는 없습니다.

(특수 문자나 영어 외의 언어와 같이 키로 허용되지 않는 문자를 키로 사용해야하는 경우에는 쌍따옴표를 사용해야 합니다.)

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

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

이렇게 외부에서 문자열의 형태로 주어진 데이터를 해당 언어에서 다루기 용이하도록

내장 데이터 타입으로 변환하는 과정을 CS(Computer Science)에서는 소위 역직렬화(deserialization)이라고 부릅니다.

대표적인 사례로 클라이언트에서 JSON 포멧으로 데이터를 보내면,

서버에서 우선 JavaScript 객체로 변환한 후에 데이터를 처리하게 되는 것을 들 수 있습니다.

 

 

 

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

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

stringify() 메서드는 JavaScript 객체를 인자로 받고 JSON 문자열을 반환합니다.

 

JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다.

 

 

JSON 의 일반적인 용도는 웹 서버와 데이터를 주고 받는 것 입니다. 

웹 서버로 데이터를 보낼 때 데이터는 문자열이여야 하며, 

JSON.stringify()를 사용해서 Javascript 객체를 문자열로 변환 할 수 있습니다.

 

 

JSON에서는 날짜 객체가 허용되지 않습니다. JSON.stringify () 함수는 모든 날짜를 문자열로 변환합니다.

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

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

 

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

const str = JSON.stringify(obj);

str에 저장된 값을 콘솔에 출력해보면

JavaScript 객체의 형태였던 데이터가 JSON 형식의 문자열로 변환되어 출력되는 것을 확인할 수 있습니다.

console.log(str);

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

여기서 약간의 팁을 드리자면

변환해야하는 JavaScript 객체가 많은 양의 데이터를 담고 있는 경우에는

이렇게 한 줄의 문자열로 변환되면 알아보기 힘들어지는데요.

 

이럴 때는 stringify()메서드의 3번째 인자로 들여쓰기할 공백의 크기를 지정해줄 수 있습니다.

예를 들어, 변환된 JSON 문자열이 2개의 공백으로 들여쓰기가 되도록 해보겠습니다.

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

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

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

> str.name
< undefined

이렇게 특정 언어의 내장 타입의 데이터를 외부에 전송하기 용이하도록 문자열로 변환하는 과정을

CS(Computer Science)에서는 소위 직렬화(serialization)이라고 부릅니다.

대표적인 사례로 서버에서 클라이언트의 요청을 처리 후에

JavaScript 객체 형태의 데이터를 JSON 형태의 문자열로 변환하여 응답하는 것을 들 수 있습니다.

 

 

 

 

참고자료https://en.wikipedia.org/wiki/JSON

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

https://www.daleseo.com/js-json/

https://ithub.tistory.com/54

http://daplus.net/javascript-json-stringify와-json-parse의-차이점/