JavaScript 공부 [9. 오브젝트와 JSON 다루기]

HTTP (Hypertext Transfer Protocol)

Client가 Server에 데이터를 request 하면, Server는 Client에 데이터를 response한다.

이 작업을 AJAX(Asynchronous JavaScript And XML)과 XHR(XML Http Request)가 주로 해왔다.

XML을 주고 받게 되면, 가독성도 좋지 않고, 불필요한 태그들로 인하여 데이터 크기도 커지는 단점이 있다.
따라서 최근에는 JSON을 많이 쓰고 있다.

JSON (JavaScript Object Notation)

Object {key: value} 형태.

가장 큰 장점은, 프로그램 언어나 플랫폼에 상관없이 쓰일 수 있다는 것이다!

Object to JSON

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

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

const rabbit = {
    name: 'toto',
    color: 'white',
    size: null,
    birthDate: new Date(),
    jump: function() {
        console.log(`${this.name} can jump~!!`)
    }
}
json = JSON.stringify(rabbit)
console.log(json)
// {"name":"toto","color":"white","size":null,"birthDate":"2021-07-28T05:42:06.191Z"}
여기서 함수는 JSON에 포함되지 않는다는것을 알 수 있다! 추가적으로 symbol도 안된다.

json = JSON.stringify(rabbit, (key, value) => {
    return key === 'name' ? 'minbro' : value
})
console.log(json)
// {"name":"minbro","color":"white","size":null,"birthDate":"2021-07-28T05:46:21.930Z"}
콜백함수를 통해 조금더 세부적으로 통제가 가능하다.

JSON to Object

json = JSON.stringify(rabbit)
const obj = JSON.parse(json)
console.log(obj)
// {name: "toto", color: "white", size: null, birthDate: "2021-07-28T05:49:39.931Z"}

rabbit.jump()	// toto can jump~!!
obj.jump()	// Uncaught TypeError: obj.jump is not a function

rabbit이라는 object가 JSON으로 stringify될 때, 데이터만 변환하고 함수는 변환하지 않기 때문!
따라서 jump라는 함수는 애초에 json에 들어가있지 않다!

추가적으로 rabbit에 있는 birthDate는 또 다른 object이기 때문에 관련된 함수(getYear, getDate 등...)을 사용할 수 있다.
하지만 rabbit이 stringify된 json은, 이미 birthDate가 string의 데이터로 변환이 되어있기 때문에, object가 아니다!

console.log(rabbit.birthDate.getDate())		// 28
console.log(obj.birthDate.getDate())
// Uncaught TypeError: obj.birthDate.getDate is not a function

하지만 parse를 할때 처리를 잘 한다면 사용이 가능하다!

const obj = JSON.parse(json, (key, value) => {
    return key === 'birthDate' ? new Date(value) : value
})
console.log(obj)
// {name: "toto", color: "white", size: null, birthDate: Wed Jul 28 2021 16:34:48 GMT+0900 (한국 표준시)}
console.log(obj.brithDate.getDate()) 		// 28
// key가 birthDate일 경우 new Date(value)를 통해 새로 Date객체가 할당되었기 때문!

JSON Diff : JSON 파일이 어떤게 다른지 비교할때 유용
JSON Beautifier : JSON 포멧 예쁘게 변경
JSON Parser : JSON이 Object로 변경되었을때 어떻게 될 것인지 확인 가능
JSON Validator : JSON의 유효성 검증. 틀린부분을 알려줌