노트 #58 | JSON.stringify

개요

JSON.stringify 하면 무엇이 떠오르시나요?

• JSON.parse
• JSON 은 API, 자바스크립트 객체와 연관이 많다?
• JSON 이 재귀 함수와 연관이 있나?

---

JSON (JavaScript Object Notation)

JSON이 뭔가요?

• 이름에서 알 수 있듯이, JavaScript 객체 문법으로 구조화된 데이터를 표현하기 위한 포맷입니다.
• 데이터 교환을 위해 만들어졌습니다.

데이터 교환을 위해 만들어졌다는 게 무슨 뜻 인가요?

• 객체 데이터를 전송으로 교환하려면 문자열처럼 범용적으로 읽을 수 있어야합니다.
• 하지만 객체를 toString()이나 String() 으로 바꾸면 제대로 적용되지 않습니다.

문자열로 교환해야 하는건 알겠는데... 객체를 어떻게 문자열로 만들죠...?!

• 객체를 JSON 형태로 변환하거나 JSON을 객체의 형태로 변환합니다.
• 객체, JSON 상호 변환 메서드
  • JSON.stringify : 객체를 JSON으로 변환합니다.
  • JSON.parse : JSON을 객체로 변환합니다.

음... JSON.parse, JSON.stringify 걔네는 원리가 어떻게 되는데요? 😅

• stringify 과정 : 직렬화(serialize) 한다고 합니다.
• 코드조각

const obj = {
  name: "박연우",
  job: "Programmer",
  company: "codestates",
}

const jsonObj = JSON.stringify(obj);

console.log(jsonObj);
// '{"name":"박연우","job":"Programmer","company":"codestates"}'

• parse 과정 : 역직렬화(deserialize)한다고 합니다.
• 코드 조각

const parsedObj = JSON.parse(jsonObj);

console.log(parsedObj);
/*
 * {
 *   name: "박연우", 
 *   job: "Programmer",
 *   company: "codestates",
 * }
 */

잘 설명해주셔서 여기까지 알겠는데 좀 더 한번에 이해할 수 있을까요?

트리 구조인 객체 데이터를 문자열로 직렬화(stringify)하여 전달하고

전달받은 직렬화된 문자열을 역직렬화(parse)하여 트리 구조 객체 데이터로 사용합니다.

감사합니다! 그럼 마지막으로 JSON의 기본 규칙 좀 알려주세요!

	자바스크립트 객체	JSON
키	키는 다옴표 없이 쓸 수 있음	반드시 쌍따옴표를 붙여야 함
문자열 값	작은따옴표도 사용 가능	반드시 큰따옴표로 감싸야 함
키와 값 사이 공백	사용 가능	사용 불가능
키-값 쌍 사이 공백	사용 가능	사용 불가능

---

참조

코드스테이츠 프론트엔드 부트캠프
MoDerN Web Docs