[javascript] JSON

JSON(JavaScript Object Notation)

JSON 특징

  • JSON은 자바스크립트를 확장하여 만들어짐
  • JSON은 자바스크립트 객체 표기법을 따름
  • JSON은 사람과 기계가 모두 읽기 편함
  • JSON은 프로그래밍 언어와 운영체제에 독립적

stringify: Object to JSON

  • Object를 JSON으로 serialize
  • 리스트 배열은 ["A", "B"...]
  • 맵 배열은 {"a":"A", "b": "B"...} 형식을 가진다.
  • ['key1', 'key2'..]을 파라미터로 넣으면 해당 키만 stringify 한다.
  • callback함수를 사용할 수 있다.
let json = JSON.stringify(['apple', 'banana']);
console.log(json);
-> ["apple","banana"]

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    jump: () => {
        console.log(`${name} cam jump!`);
    }
};

const jsonRabbit = JSON.stringify(rabbit);
console.log(jsonRabbit);
-> {"name":"tori","color":"white","size":null,"birthDate":"2021-05-30T06:06:55.507Z"}

const jsonRabbitKey = JSON.stringify(rabbit, ['name', 'color']);
console.log(jsonRabbitKey);
-> {"name":"tori","color":"white"}

const jsonRabbitKeyValue = JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    //return key === 'name' ? 'woogie' : value;
    return key === 'name' ? 'woogie' : value, key === 'size' ? 74 : value;
});
console.log(jsonRabbitKeyValue);
-> {"name":"tori","color":"white","size":74,"birthDate":"2021-05-30T06:06:55.507Z"}

parse: JSON to Object

  • JSON을 Object로 unserialize
console.log(rabbit.birthDate.getDate());
-> 30

const jsonRabbit = JSON.stringify(rabbit);

const objectRabbit = JSON.parse(jsonRabbit);
console.log(objectRabbit.birthDate);
-> 2021-05-30T06:21:37.119Z
//Object -> JSON -> Object가 되면 
//Date() 객체였던 birthDate가 평범한 문자열로 취급되어 getDate()를 사용할 수 없게 된다.

const objecgtRabbitPerfect = JSON.parse(jsonRabbit, (key, value) => {
    //console.log(`key: ${key}, value: ${value}`);
    return key === 'birthDate' ? new Date(value) : value;
});
console.log(objecgtRabbitPerfect.birthDate.getDate());
-> 30

links

social