JSON과 Javascript의 차이
-
JSON은 문자열을 감쌀 때 반드시 "" 따옴표로 감싸야한다.
자바스크립트 객체의 경우 key는 따옴표를 쓰지않고 value가 문자열인 경우에만 "" 혹은 '' 를 쓴다.
(+ 객체 리터럴 문법에서 key에 쓰인 문자 중 단어가 -로 연결된 경우 '' 로 묶어줘야함)
-
JSON은 숫자를 쓸 때 선행 0은 허용하지 않는다. 소숫점 뒤에 적어도 한 자릿수를 써야하며 NaN과 Infinity는 지원하지 않는다.
ex.
- JSON
{
"name": "Sieun Choi",
"status": "Job Seeker",
"favorite-game": "Stardew Valley",
"subscriber": false
}
- Javascript Object
const profile = {
name: 'Sieun Choi',
status: 'Job Seeker',
'favorite-game': 'Stardew Valley',
subscriber: false
}
3. JSON 을 Javascript 에서 활용하려면 메서드를 활용해야한다.
JSON.stringify
Javascript 의 객체를 JSON 형태로 만들어주는 메서드
이렇게 변경된 문자열은 JSON으로
인코딩된(JSON-encoded), 직렬화 처리된(serialized), 문자열로 변환된(stringified), 결집된(marshalled)
객체라고 부르며 이렇게 문자열로 변환된 후에야 비로소 네트워크를 통해 전송하거나 저장소에 저장할 수 있다.
JSON.striongify 는 객체, 배열 뿐만 아니라 원시값에도 적용할 수 있다. (문자형, 숫자형, 불린형 값, null)
또한 중첩 객체도 알아서 문자열로 바꿔준다.
자바스크립트 객체 프로퍼티는 JSON.stringify 가 처리할 수 없다. 때문에 무시된다.
무시되는 프로퍼티는 함수 프로퍼티, 심볼형 프로퍼티 (키가 심볼인 프로퍼티), undefined인 프로퍼티 이다.
추가로 순환참조가 있는 경우 객체를 문자열로 바꾸는 것이 불가능하다.
let user = {
sayHi() { // 무시
alert("Hello");
},
[Symbol("id")]: 123, // 무시
something: undefined // 무시
};
alert( JSON.stringify(user) ); // {} (빈 객체가 출력됨)
//출처 모던자바스크립트 (https://ko.javascript.info/json#ref-2059)replacer를 함수로 전달할 경우 반환 전 값을 변경할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함된다.
JSON.parse
- JSON.parse 는 JSON을 파싱한다.
파싱(Parsing)
파싱은 구문 분석으로 문장이 이루고 있는 구성 성분을 분해하고 분해된 값을 분석하여 구조를 결정한다.
=> JSON.parse 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성한다.
- JSON으로 인코딩된 객체를 다시 객체로 디코딩 할 수 있다.
JSON 문자열을 사용해 Javascript 객체 리터럴 또는 배열로 구문분석을 한다.
const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);
//출처 (MDN JSON.parse https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse 코드)선택적으로, reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있다.
정리
- JSON.stringify를 사용하면 원하는 값을 JSON으로 인코딩 할 수 있고, JSON.parse를 사용하면 JSON을 디코딩 할 수 있다.
- 위 두 메서드에 함수를 인수로 넘겨주면 원하는 값만 읽거나 쓰는 게 가능하다.
- JSON.stringify 메서드의 replacer, space 와 JSON.parse 의 reviver 활용은 내일 다루도록! + toJSON 까지
Ref
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
- http://wiki.hash.kr/index.php/파싱
- https://www.freecodecamp.org/korean/news/javascript-json-parse/
- https://ko.javascript.info/json#ref-2059
사족 설 지나서 걸린 독감이 정말 독하다... 5일을 쉬다니 다시 열심히 공부해야지
