/ JAVASCRIPT

JavaScript(8) - JSON

JavaScript 관련 포스팅

JSON

  • JavaScript Object Notation
  • ECMAScript 3rd 1999 Object { key : value } 에서 영감 받은 data format
  • data를 주고 받을 수 있는 가장 간단한 file format
  • text를 기반으로 해서 가벼움
  • 읽기 쉬움
  • key와 value로 이루어진 file format
  • 서버와 data를 주고 받을 때, data의 serialization과 전송을 위해 사용
  • 프로그래밍 언어와 플랫폼에 상관 없이 사용 가능

parse();

parse(text: string, reviver?: (this: any, key: string, value: any) => any): any;
  • string data를 받아 object type으로 변환함
  • optional type의 reviver이라는 callbackfn을 이용하면 보다 세밀한 조건을 적용해 data를 object로 바꿀 수 있음

stringify();

stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;
  • object를 받아 string으로 변환함
  • optional type의 replacer이라는 callbackfn을 이용하면 보다 세밀한 조건을 적용해 object를 string으로 바꿀 수 있음

Object to JSON

stringify(obj)

  1. boolean / array를 JSON으로 변환

     // boolean to JSON
 let json = JSON.stringify(true); 
 console.log(json);

 // array to JSON
 json = JSON.stringify(['apple', 'banana']); 
 console.log(json);
    Console

    true [“apple”, “banana”]

    ※ array의 경우, [" "] 형태로 출력

  2. object를 JSON으로 변환

     // object to JSON
 const rabbit = { 
     name: 'tokki',
     color: 'white',
     size: null,
     birthDate: new Date(),
     symbol: Symbol('id'), 
     jump: () => { 
         console.log(`${this.name} can jump!`);
     },
 };

 json = JSON.stringify(rabbit);
 console.log(json);
    Console
    {“name”:”tokki”,”color”:”white”,”size”:null,”birthDate”:”2021-08-11T08:11:16.785Z”}

    ※ console에서 null은 출력되지만, Symbol과 function은 누락됨.
    즉, JSON으로 변환 불가!

    ⇒ boolean, array, object는 JSON으로 변환(serialize)가능
    Symbol이나 함수는 JSON으로 변환 불가

  3. (array 형태 callbackfn 사용) 원하는 property를 JSON으로 변환

     json = JSON.stringify(rabbit, ['name', 'color']);
 console.log(json);
    Console
    {“name”:”tokki”,”color”:”white”}

  4. (함수 형태 callbackfn 사용) property를 JSON으로 변환 + 조건 추가

     json = JSON.stringify(rabbit, (key, value) => {
     console.log(`key: ${key}, value: ${value}`);
     return key === 'name' ? 'minji' : value; // 조건 추가
 });
 console.log(json);
    Console
    key: , value: [object Object]
    key: name, value: tokki
    key: color, value: white
    key: size, value: null
    key: birthDate, value: 2021-08-11T08:11:16.785Z
    key: jump, value: () => {console.log(${this.name} can jump!);}
    {“name”:”minji”,”color”:”white”,”size”:null,”birthDate”:”2021-08-11T08:11:16.785Z”}

JSON to Object

parse(json)

  • object를 JSON으로 변환하면 string type이 됨

    json = JSON.stringify(rabbit);
console.log(json);
console.log(typeof json);
    Console
    {“name”:”tokki”,”color”:”white”,”size”:null,”birthDate”:”2021-08-11T08:11:16.785Z”}
    string

※주의※
JSON을 다시 object로 만들 때 역시 함수가 포함되지 않는다!
(serialize 할 때(object to JSON), 함수는 포함되지 않았음)

json = JSON.stringify(rabbit);
const obj = JSON.parse(json); 
console.log(obj);
console.log(obj.birthDate.getDate()); // error!
Console
{“name”:”tokki”,”color”:”white”,”size”:null,”birthDate”:”2021-08-11T08:11:16.785Z”}

※ object의 birthDate에 있던 Date()는 JSON으로 바뀌면서 string type이 되어 더이상 getDate();를 호출할 수 없게 됨

  • callbackfn을 이용해 object를 유의미하게 사용하기

    const obj = JSON.parse(json, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj);
console.log(obj.birthDate.getDate());
    Console
    {name: ‘tokki’, color: ‘white’, size: null, birthDate: Thu Aug 12 2021 17:01:29 GMT+0900 (한국 표준시)}
    12

tip) 유용한 사이트

JSON Diff checker: http://www.jsondiff.com/

JSON Beautifier/editor: https://jsonbeautifier.org/
→ 정렬이 어그러진 JSON파일을 읽기 쉽게 정렬해줌

JSON Parser: https://jsonparser.org/
→ JSON을 object type으로 변환시켜 보여줌

JSON Validator: https://tools.learningcontainer.com/j…
→ JSON data 유효성 검사기

< 출처 >

“자바스크립트 10. JSON 개념 정리 와 활용방법 및 유용한 사이트 공유 JavaScript JSON | 프론트엔드 개발자 입문편 (JavaScript ES6),” 유튜브 비디오, 22:36, 게시자 “드림코딩 by 엘리,” 2020년 5월 31일, https://youtu.be/tJieVCgGzhs