[Javascript] JSON

이 글에서는 Server와의 통신 시 이루어지는 JSON에 대해서 알아보겠습니다.

 

JSON

• Javascript Object Notation
• ECMAScript 3rd 1999에 발표된 Javascript객체에 큰 영감을 받아서 만들어진 데이터 포멧
• key와 value로 이루어진 모습을 참고
• 모바일이나 파일 object를 파일 시스템에 저장할 때도 JSON을 이용
• 데이터를 서버와 주고 받을 때 serialization을 쓴다.
• 프로그래밍 언어나 platform에 상관없이 사용 가능하다.

 

Stringify()

- JSON.stringify() 메소드는 인수로 전달받은 자바스크립트 객체를 문자열로 변환하여 반환합니다.

 

premitype을 JSON으로 만들경우

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

json = JSON.stringify("apple")
console.log(json);//"apple"

json = JSON.stringify(123)
console.log(json);//123

 

객체를 JSON으로 만들경우

const rabbit = {
    name: 'tory',
    color: 'white',
    size: null,
    birthDate: new Date(),
    jump: () => {
        console.log(`${this.name} can jump!`)
    },
    symbol: Symbol('id')
}
json = JSON.stringify(rabbit);
console.log(json)
// {"name":"tory","color":"white","size":null,"birthDate":"2021-02-22T03:32:07.377Z"}

 

replacer를 통해 문자열을 JSON으로 만들 때 특정 설정 가능

replacer 함수를 적용하지 않는다면 그냥 string으로만 전달되지만 아래와 같이 replacer를 사용하면 특정 객체를 전달 할 수 있습니다.

const obj = JSON.parse(json, (key, value) => {
    console.log(`key: ${key}, value: ${value}`)
    if (key === 'name' ) value = 'jongho'
    return key === 'birthDate' ? new Date(value) : value;
})

Parse()

- JSON.parse() 메소드는 JSON.stringify() 메소드와는 반대로 인수로 전달받은 문자열을 자바스크립트 객체로 변환하여 반환합니다.

 

reviver를 통해 JSON을 문자열로 만들 때  특정 설정 가능

1.  key가 name일 때 값을 Ellie로 변경할 수 있습니다.

json = JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${key}, value: ${value}`)
    return key === 'name' ? 'Ellie' : value;
});
console.log(json)

2. 원하는 property만 뽑아 올 수 있습니다.

json = JSON.stringify(rabbit, ['name']); // 원하는 propery만 출력 가능
console.log(json)