JSON.parse() & JSON.stringify()

앙두·2023년 1월 21일

JavsScript json stringify()

JavaScript

목록 보기

9/21

⭐️ JSON 내장 객체

자바스크립트에서는,
JSON 포맷의 데이터를 간편하게 다룰 수 있도록 JSON이라는 객체를 내장하고 있다. 전역(global)접근이 가능하다.

JSON 내장 객체는
JavaScript 객체와 JSON 문자열 간의 상호 변환을 수행해주는 두 개의 메서드를 제공한다.

JSON.parse()

: JSON 문자열을 JavaScript 객체로 변환

인자로 JSON 문자열을 받고,
반환은 JavaScript 로 해준다.

👇🏻 예시 )

const jsonStr = `{
  "name": "앙두",
  "age": 30,
  "married": false,
  "favorite": { "food": "sushi", "beverage": "latte" },
  "hobbies": ["운동", "도예"],
  "jobs": "Front-end Developer"
}`

console.log(JSON.parse(jsonStr))

JSON 형식의 객체를 jsonStr 에 담아주고, JSON.parse() 메서드를 사용하여 js 형식으로 변환해주면 ?

{
  name: '앙두',
  age: 30,
  married: false,
  favorite: { food: 'sushi', beverage: 'latte' },
  hobbies: [ '운동', '도예' ],
  jobs: 'Front-end Developer'
}

이렇게 변환된다!
JSON 과 js가 무엇이 다르냐 ~ 하면!
JSON 에서는 key를 나타낼 때 반드시 쌍따옴표로 감싸줘야 한다.
그러나 JavaScript 객체에서는 쌍따옴표를 꼭 사용할 필요는 없다.

🐥 대표적인 사례

서버에서 JSON 포맷으로 데이터를 보내면, 클라이언트에서 JavaScript 객체로 변환한 후에 데이터를 처리

JSON.stringify()

: JavaScript 객체를 JSON 문자열로 변환

인자를 JavaScript 객체로 받고,
반환은 JSON 문자열을 반환해준다.

👩🏻‍💻 JSON.stringify()의 문법

JSON.stringify(value, [replacer, space])

value
: 인코딩 하려는 값 ( 객체, 배열, 문자열, 숫자, 불리언 등 )
replacer
: JSON 으로 인코딩 하길 원하는 프로퍼티가 담긴 배열. 또는 mapping 함수.
space
: 공백 문자 수 (가독성을 높이기 위한 서식 변경 목적)

( 다 완벽히 이해는 안되지만, 문법에 익숙해지자 ! )

👇🏻 예시 )

const jsStr = {
  name: '앙두',
  age: 30,
  married: false,
  favorite: { food: 'sushi', beverage: 'latte' },
  hobbies: [ '운동', '도예' ],
  jobs: 'Front-end Developer'
}

console.log(JSON.stringify(jsStr))

반대로 jsStr 에 JavaScript 형식으로 담아준 뒤, JSON.stringify() 메서드를 사용하여 JSON 문자열로 변환한다면 ?

'{"name":"앙두","age":30,"married":false,"favorite":{"food":"sushi","beverage":"latte"},"hobbies":["운동","도예"],"jobs":"Front-end Developer"}'

이렇게 반환된다 !!
말그대로 JSON 문자열이기때문에, 따옴표로 전체가 감싸져 있다.
한줄로 모든 데이터가 표현된다. 아주 복잡하고 가독성이 떨어진다.

그래서 stringify 메서드 문법을 사용하여, 인자를 주어 지정해줄 수 있다. 👇🏻

const jsStrStringify = JSON.stringify(jsStr, null, 2);

console.log(jsStrStringify);

'{
  "name": "앙두",
  "age": 30,
  "married": false,
  "favorite": {
    "food": "sushi",
    "beverage": "latte"
  },
  "hobbies": [
    "운동",
    "도예"
  ],
  "jobs": "Front-end Developer"
}'

2칸씩 들여쓰기가 돼어 한눈에 보기 편하게 출력된다 !

이렇게 JSON 문자열 형태로 변환된 데이터에는, JavaScript 객체에 접근하는 것처럼 (. , []) 속성에 접근할 수 없다. (typeof 가 걍 string 임)