(JavaScript) JSON

JSON(JavaScript Object Notation)

• simplest data interchange format
• lightweight text-based structure
• easy to read
• key-value pairs
• used for serialization and transmission of data between the network the network connection
• independent programming language and platform
• object --> string (serialize)
• string --> object (deserialize)

Object to JSON

• stringify(obj)

let json = JSON.stringify(true); // boolean type의 primitive type도 json으로 변환 가능
console.log(json); // true

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

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    // symbol: Symbol('id'), // javascript 자체에 들어있는 특별한 data도 json에 포함되지 않음
    jump: () => {
        console.log(`${this.name} can jump!`);
    }, // 함수는 object에 있는 data가 아님. 제외됨
};

json = JSON.stringify(rabbit, ['name']); // rabbit object에서 name만 JSON으로 변환 {"name":"tori"}
console.log(json);

json = JSON.stringify(rabbit, ['name', 'color']); // {"name":"tori","color":"white"}
console.log(json);

object 안의 함수나, javascript 자체에 들어있는 특별한 data도 json에 포함되지 않는다. 또한 stringify의 두 번째 파라미터로 다음과 같이 JSON으로 변환하고 싶은 것들만 지정해줄 수 있다.

 

// 세밀하게 통제하고 싶을 때 콜백함수를 이용해서 쓸 수 있음
json = JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'jiwon' : value;
});

console.log(json); //{"name":"jiwon","color":"white","size":null,"birthDate":"2021-05-04T15:24:05.198Z"}

또한 세밀하게 통제하고 싶을 경우 이처럼 콜백함수를 이용해서 조작이 가능하다.

 

JSON to Object

• parse(json)

json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);
rabbit.jump();
// obj.jump(); // error
// 변환한 object는 serialize가 됨. 즉 string으로 만들어진 json으로 부터 다시 object를 만들었기 때문에
// 함수는 serialize 될 때 포함되어있지 않았음

rabbit object에 잇는 jump()를 호출할 경우에는 에러가 발생하지 않지만, JSON에서 변환된 object에서 jump()를 호출할 경우에는 에러가 발생한다. 변환한 object는 serialize가 된다. 즉 string으로 만들어진 json으로 부터 다시 object를 만들었으며 함수는 serialize될 때 포함되어 있지않다.

 

console.log(rabbit.birthDate.getDate()); // 5
// console.log(obj.birthDate.getDate()); // error --> birthDate는 string 형태
console.log(obj.birthDate);

const obj2 = JSON.parse(json, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj2.birthDate.getDate()); // no error

마찬가지로 rabbit 객체에 있는 birthDate는 new Date()로 값이 정의되어있다. 따라서 getDate() 호출이 가능하다. 그러나 JSON에서 변환된 obj는 birthDate는 string 형태이다. 따라서 getDate()를 호출하면 에러가 발생한다. 좀 더 세밀하게 통제하고 싶을 경우에 parse()의 두 번째 파라미터로 콜백함수를 전달한다. 위처럼 콜백함수를 작성하게 되면 변환된 object에서 getDate()를 호출해도 에러가 발생하지 않는다.

 

 

JSON 관련 유용한 사이트

• JSON Diff(www.jsondiff.com/)  
  • 서버에게 요청했을 때 첫 번째로 받아온 데이터와 두 번째로 받아온 데이터 비교 가능
  • 디버깅할 때 유용
• JSON Beautifier(jsonbeautifier.org/)
  • 서버에서 받아온 JSON을 붙여넣으면 포맷 망가지는 경우 유용
    
• JSON Parser(json.parser.online.fr/)
  • JSON을 Object 형태로 확인 가능
• JSON Validator(jsonformatter.curiousconcept.com/)
  • 유효한 JSON data인지 확인 가능