[자바스크립트] 8. JSON

JSON이란?

• JavaScript Obejct Notation
• JavaScript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 경량 표준 포맷
• 웹 어플리케이션에서 데이터를 전송할 때 주로 사용

특징

• Object에서 영감을 받아 만들어진 개념으로 key : value 의 형태로 이루어져 있다.
• 언어, 플랫폼에 상관 없이 사용할 수 있다.

1. Object to JSON

JSON.stringify() : JavaScript 값이나 객체를 JSON 문자열로 반환한다.

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

replacer 파라미터를 통해 변환 전 값의 변형이 가능하다.

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

json = JSON.stringify(rabbit);
console.log(json);
// {"name":"tori","color":"white","size":null,"birthDate":"2021-01-25T06:27:43.109Z"}
// 함수 jump는 변환이 생략된다.(예외)

json = JSON.stringify(rabbit, ["name", "color"]);
console.log(json); // {"name":"tori","color":"white"}
---------------------------------------------
json = JSON.stringify(rabbit, (key, value) => {
    console.log(key, value);
    return key === 'name' ? 'kim' : value;
});
console.log(json);
// {"name":"kim","color":"white","size":null,"birthDate":"2021-01-25T06:21:44.680Z"}
// name이 kim으로 바뀐 것을 확인할 수 있다.

예외

• Boolean, Number, String 객체들은 문자열화 될 때 전통적인 변환 의미에 따라 연관된 기본형(primitive) 값으로 변환된다.

• undefined, 함수, 심볼(symbol)은 변환될 때 생략되거나(객체 안에 있을 경우) null 로 변환된다(배열 안에 있을 경우).

2. JSON to Object

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

json = JSON.stringify(rabbit);
console.log(JSON.parse(json));

reviver 파라미터를 통해 반환 전 결과를 변형할 수 있다.

const obj = JSON.parse(json, (key, value) => {
    console.log(`key : ${key}, value : ${value}`);
    return key === 'birthDate' ? new Date(value) : value;
});
// 반환 시 birthDate의 형식을 Date로 변환함으로서
// 반환된 obj에서 자바스크립트 메소드를 사용할 수 있다.

console.log(obj.birthDate);
// Mon Jan 25 2021 15:30:50 GMT+0900 (대한민국 표준시)
console.log(obj.birthDate.getDate());
// 25