[🐱 자바스크립트] JSON과 JSON.stringify / JSON.parse

자바스크립트 JSON 이란?

🍎 Javascript Object Notation, 문자 기반의 데이터 포맷

서로 다른 프로그램 사이에서 데이터를 교환하기 위한 포맷

• 자바스크립트 뿐만 아니라, 데이터를 사용해야하는 다른 언어, 루비, C# 등과 통신을 하기위해 자주 사용되는 객체이다.
• 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용한다.
• 확장자 .json

---

1. JSON 객체 구조

아래와 같이 데이터 계층을 구축하며, js의 데이터 타입 숫자, 배열, 문자열, 객체를 포함한다.
객체 { } 내부에서 : 를 기준으로 왼쪽은 key(키)에 해당하고, 오른쪽은 value(키 값)에 해당한다.

{
  "name" : "apple",
  "color": "red",
  "weight" : 300,
  "selling" : false
}

2. JSON 문자열

{"name" : "apple","color": "red","weight" : 300,"selling" : false}

---

JSON 사용 규정

JSON은 다음과 같은 사용 규정을 따른다.

1. 키는 문자열로만 작성

2. 문자열은 반드시 큰 따옴표

( 아래는 작은 따옴표로 작성하지 않아 ) 올바르지 않은 예시

{
  'name' : 'apple',
  'color': 'red',
  'weight' : 300,
  'selling' : false
}

---

JSON 객체 메서드 [JSON.stringify, JSON.parse]

자바스크립트의 JSON 객체를 다루는 메서드는 다음과 같다.

JSON.stringify()

JSON.parse()

JSON.stringify() : [자바스크립트 객체 -> JSON 문자열] 로 변환

const obj = { //obj는 자바스크립트 객체의 형태 
	“color” : “red”,
	“message” : ”안녕하세요!”
}
const string = JSON.stringify(obj) // JSON 문자열 형태로 변환 
console.log(string) //{“color”:”red”,“message”:”안녕하세요!”}

JSON.parse() : [JSON 문자열 -> 자바스크립트 객체] 로 변환

const other = JSON.parse(string) // 자바스크립트 객체로 변환 
console.log(other)
// > red
// > 안녕하세요! 

---

자바스크립트 객체와 JSON의 차이점