JS_ JSON이란 ?(JSON.stringify & JSON.parse)

처음 JSON을 접했을 때는 JSON 형태가 와닿지를 않았다.
많이 접하고 익숙해지면서 어느 정도 정리가 된 지금 JSON에 대해서 정리해보고자 한다

JSON 형태

JSON(JavaScript Object Notation)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포멧이다.
웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용된다.

JSON은 문자열 형태로 이루어져 있다.
얼핏 보기엔 객체 형태처럼 보일 수 있는 JSON 형태는 이 부분에서 객체와의 차이점을 느낄 수 있다.

JSON 형태와 JavaScript 형태의 차이는 이러하다

	JavaScript 객체	JSON
키	키는 따옴표 없이 쓸 수 있음 { key : "property" }	반드시 쌍 따옴표를 붙여야 함 '{"key":"property"}'
문자열 값	작은 따옴표도 사용 가능  {"key" : 'property'}	반드시 큰 따옴표로 감싸야 함 '{"key":"property"}'
키와 값 사이의 공백	사용 가능  {"key" : 'property'}	사용 불가능 '{"key":"property"}'
키-값 쌍 사이 공백	사용 가능 { "key" : 'property', num:1}	사용 불가능 '{"key":"property","num":1}'

하지만 문자열 형태라고 해서 그냥 message.toString() 이나 String(message) 를 이용해 형변환을 시도하면 [object Object]라는 오류를 확인 할 수 있을 것이다.

이 부분을 해결하기 위해 사용할 수 있는 것이 JSON.stringify 와 JSON.parse 이다. 

const person = {
  phone: "iphone",
  user: "홍길동",
  verson: 2,
  made: "2021-01-12 10:10:10"
}

 

JSON.stringify 

JSON.stringify는 객체를 JSON 형태로 변환한다.

위의 객체를 예시로 JSON 형태로 변환해보자면 

let transferJsonMessage = JSON.stringify(person)

console.log(transferJsonMessage) 
// `{"phone":"iphone","user":"홍길동","verson":2,"made":"2021-01-12 10:10:10"}`
console.log(typeof(transferJsonMessage))
// `string`

이렇게 변환할 수 있으며 type이 string으로 출력 된 것을 확인할 수 있다.

stringify 하는 이 과정을 직렬화(seriallze) 한다고 한다

JSON.parse

JSON.parse는 JSON형태를 객체 형태로 변환한다.

위의 JSON 형태로 바꿨던 예시를 이용해 다시 객체 형태로 변환해봤다.

let jsonToObject =`{"phone":"iphone","user":"홍길동","verson":2,"made":"2021-01-12 10:10:10"}`
let obj = JSON.parse(jsonToObject)

console.log(obj)
/*
 * {
 * phone: 'iphone',
 * user: '홍길동',
 * verson: 2,
 * made: '2021-01-12 10:10:10'
 * }
 */

 console.log(typeof(obj))
 // `object`

이렇게 객체 형태로 변환되고 type도 object로 출력되는 것을 확인할 수 있다

parse 하는 과정을 역직렬화(deseriallze)한다고 한다

 

추가로 json 파일 내의 특정 데이터를 추출하는 과정을 파싱(parsing)이라고 한다

---

참고

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON