minzzl
[Javascript] JSON 본문
728x90
반응형
이 글에서는 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)
728x90
반응형
'프로젝트 > 자바스크립트' 카테고리의 다른 글
[Javascript] this (0) | 2022.10.09 |
---|---|
[Javascript] 비동기처리 callback, promise, aync/await (0) | 2022.10.09 |
[Javascript] Array (0) | 2022.10.09 |
[Javascript] Class vs Object (0) | 2022.10.08 |