[JS] JSON.stringify()와 JSON.parse()

 

JSON(JavaScript Object Notation)은 JS에서 객체를 만들 때 사용하는 표현식과 동일한 문법을 갖는 데이터 포맷이다. 이 표현식은 사람과 기계가 이해하기 쉬우며 데이터의 용량이 적어 XML을 대체해 데이터 전송 등에 많이 사용된다.

 

변환 시에는 두가지 API가 있다.

• JSON.stringify : JS object를 json의 문자열 데이터로 변환하는 함수 stringify
• JSON.parse : json의 문자열 데이터를 JS object 로 변환하는 함수 parse가 있다.

 

직렬화(serialize)와 역직렬화(deserialize)

웹 어플리케이션에서 서버에 특정 object를 서버에 전송할 때 { key : value }의 string 타입으로 변환해서 서버에 전송한다. 이때 JSON 객체의 stringify 메서드는 JS object를 문자열로 반환한다. 특정 언어의 내장 타입의 데이터를 외부에 전송하기 용이하도록 문자열로 변환하는 과정을 직렬화(serialize)라 한다.

서버에서 다시 이 object를 받아올 때도  { key : value }의 string 타입으로 json 데이터를 받아와서 다시 JS object 로 변환해서 브라우저에 표기하게 된다. 이렇게 외부에서 문자열의 형태로 주어진 데이터를 내장 데이터 타입으로 변환하는 과정을 역직렬화(deserialize)라 한다. 

 

어떻게 object를 직렬화(serialize)해서 JSON으로 변환할지, 직렬화 된 JSON을 다시 deserialize 해서 object로 변환할 건지를 알아보자.

 

• Object to JSON : JSON.stringify()
  • JSON.stringify( boolean )
  • JSON.stringify( [ array ] )
    • JSON.stringify( ['sander', 'mumu'] )
  • JSON.stringify( object )
    • let sander = { 
        name: 'sander',
        age: '29',
        sayHi: () => { console.log(`${name} , Hi ), // * 주의 : 메서드는 전달되지 않음!
        symbol: Symbol('id'), // * 심볼 타입도 전달되지 않음!
      }
    • JSON.stringify(sander);
  • JSON.stringify( object, ['name'] )
    
    • 첫번째 매개변수: 객체명/ 두번째 매개변수에 배열안에 전달하고 싶은 프로퍼티의 key값만 전달하면, 해당하는 property만 JSON으로 변환됨.
  • JSON.stringify( ojbect, callback function)
    • 전달할 오브젝트를 세밀하게 통제하고 싶을 때 콜백 함수를 사용하여 리턴할 수 있다.
    • JSON.stringify(sander, (key, value) => {
        console.log(`key: ${key}, value: ${value}`);
        return key === 'name' ? 'mumu' : value;
      });

 

• JSON to Object : JSON.pasre()
  • JSON.parse( object ) 

 

 

* 유용한 사이트:
JSON Diff checker: http://www.jsondiff.com/
JSON Beautifier/editor: https://jsonbeautifier.org/
JSON Parser: https://jsonparser.org/
JSON Validator: https://tools.learningcontainer.com/j...