S3. JSON.stringify

Haizel·2023년 2월 13일
0

Front-End Developer 되기

목록 보기
46/70
post-thumbnail

01. JSON의 탄생 배경


JSON(JavaScript Object Notation)은 데이터 교환을 위해 만들어진 객체 형태의 포맷이다

💡 객체 : 객체는 타입 변환을 이용해 String으로 변환할 경우 → 객체 내용을 포함하지 않는다.
따라서 Javascript에서 객체를 문자열로 변환하기 위해 메서드(message.toString())나 형변환(String(message))을 시도하면
[object Object]라는 결과를 리턴하게 된다.

☝️ 이런 문제를 해결하기 위해, 1) 객체를 → JSON 형태로 변환하거나, 2)JSON을 → 객체형태로 변환하는 방법을 사용한다.

JSON.stringify : 객체 → JSON으로 변환한다.
JSON.parse : JSON → 객체로 변환한다.

let transferableMessage = Json.stringify(message) //message 객체를 -> JSON으로 변환

console.log(transferableMessage) 
// `{"sender":"김코딩","receiver":"박해커","message":"해커야 오늘 저녁 같이 먹을래?","createdAt":"2021-01-12 10:10:10"}`

console.log(typeof(transferableMessage))
// `string`

→ 이처럼 stringify하는 과정을 직렬화(serialize)한다고 한다.

✌️ JSon으로 변환한 객체의 타입은 문자열이다.

  • 메세지로 예를 든다면, 발신자는 **객체를 직렬화한 문자열**을 통해 누군가에게 **객체**의 내용을 보낼 수 있다.
  • 그리고 수신자는 이 문자열을 다시 객체의 형태로 만들어 읽는다. 어떻게? → JSON.parse을 통해!
//let packet : message 객체를 -> JSON으로 변환한 결과
let packet = `{"sender":"김코딩","receiver":"박해커","message":"해커야 오늘 저녁 같이 먹을래?","createdAt":"2021-01-12 10:10:10"}` 
let obj = JSON.parse(packet)

onsole.log(obj)
/*
 * {
 * sender: "김코딩",
 * receiver: "박해커",
 * message: "해커야 오늘 저녁 같이 먹을래?",
 * createdAt: "2021-01-12 10:10:10"
 * }
 */

console.log(typeof(obj))
 // `object`
  • 직렬화(serialize)된 JSON에서 메서드 JSON.parse 를 적용하면 → 다시 객체 형태로 변환할 수 있다.

→ 그리고 JSON.parse 를 적용하는 과정을 역직렬화(serialize)한다고 한다.

02. JSON의 기본규칙


  • 얼핏 보기엔 자바스크립트의 객체와 별반 다를 바가 없어 보이지만, 자바스크립트의 객체와 다른 규칙들이 존재한다.
구분자바스크립트 객체JSON
키는 따옴표 없이 쓸 수 있음{ key : "property" }반드시 쌍따옴표를 붙여야 함 '{"key":"property"}'
문자열 값작은따옴표도 사용 가능{ "key" : 'property' }반드시 큰따옴표로 감싸야 함 '{"key":"property"}'
키와 값 사이 공백사용 가능{"key" : 'property'}사용 불가능 '{"key":"property"}’
키-값 쌍 사이 공백사용 가능{ "key":'property', num:1 }사용 불가능 '{"key":"property","num":1}’
profile
한입 크기로 베어먹는 개발지식 🍰

0개의 댓글