들어가며
프로젝트 진행 중 외부 API를 활용해 정보를 수집해야 할 일이 생기곤 합니다. API 호출을 통해 받은 정보들 중에서 원하는 정보만을 추출하기 위해 파싱 하는 중 Javascript의 Object와 JSON에 대한 개념이 부족함을 느껴 글을 남깁니다.
Javascript Object VS JSON
Javascript Object는 JS Engine 메모리 안에 있는 데이터 구조이고, JSON은 객체의 내용을 기술하기 위한 text파일이다.
JSON은 "파일"이므로 확장자명이. JSON인 파일이 존재합니다. HTTP 통신에서 정보를 주고받을 때 Javascript Object가 아닌 JSON으로 서버와 클라이언트가 데이터를 주고받습니다. 예를 들어 서버로부터 받은 JSON 데이터를 프런트엔드에서 원하는 대로 가공해 활용하기 위해서는 Javascript Object로 변경해주는 메서드가 필요할 것이고, 그 반대로 프런트엔드에서 서버로 데이터를 보내기 위해서 Javascript Object를 JSON 형태로 변경하기 위한 메서드가 필요합니다.
- JSON을 Javascript Object로 파싱하기 위해서 필요한 메서드가 바로 JSON.parse()입니다.
(JSON -> Javascript Object = JSON.parse())
- Javascript Object를 JSON으로 변환해주기 위해 필요한 메서드가 JSON.stringify()입니다.
(Javascript Object -> JSON = JSON.stringify())
//example.js
const str=`{"data":[{"name":"yongseong","info":["student","27"]}]}`;
const obj = {data:[{name:'yongseong',info:['student','27']}]};str 변수에는 JSON 형태의 데이터가 할당되었고, obj 변수에는 Javascript Object가 할당되었습니다. 두 데이터에는 아래와 같은 차이가 있습니다.
- JSON에서는 모든 KEY를 따옴표로 묶어야 하지만 JavaScript object에서는 이것이 필요하지 않습니다.
- JSON의 type 형태는 기본적으로 string입니다.
- JSON은 함수를 값으로 할당할 수 없습니다.
마치며
JSON과 JavaScript object의 차이와 변환 메서드에 대해 알아보았습니다.
아직 JSON으로 정보를 불러와 파싱 하는 것이 익숙지 않습니다. 늘 개발하고 공부하는 습관을 들여 익숙해져야겠다고 다짐하며 글 마무리하겠습니다. 읽어주셔서 감사드립니다:)
References
- https://velog.io/@wong0220/%EA%B0%9D%EC%B2%B4-Object-%EC%99%80-JSON-%EC%B0%A8%EC%9D%B4
제 공부에 도움을 주셔서 감사드립니다:)
댓글