JSON이란

어떤 언어에서든 데이터 구조와 실제 데이터를 다른 언어 및 플랫폼에서 해석 가능한 형식으로 전송할 수 있어야 합니다. JSON(JavaScript Object Notation)은 이를 가능케 하는 데이터 교환 포맷입니다. _JSON | OCI

JSON은 다른 언어 및 플랫폼으로부터 독립적이다. 원래 JSON은 본래 자바스크립트에서 사용할 목적으로 만들어진 포맷이라고 한다. 사람이 읽고 쓰기에 용이하고 컴퓨터의 처리 속도가 빠른 텍스트 기반의 방식이다.

JSON 데이터 구조와 유형 {}

• JSON 데이터는 이름 key와 값 value의 쌍으로 이루어진다.

1. JSON 데이터는 쉼표 ,로 나열된다.
2. JSON은 문자열, 숫자, 불린값, null, 객체, 배열을 지원한다.
3. 객체(object)는 중괄호({})로 둘러쌓아 표현한다.
4. 배열(array)은 대괄호([])로 둘러쌓아 표현한다.

// 아래 주석은 설명을 위한 표기이다. 
// JSON은 주석을 지원하지 않는다!

// 문자열 
{ "name" : "Jones" }

// 숫자
{ "number_1" : 210 }

// 부울
{ "isTrue" : false }

// Null, Null은 빈 값이다. 키에 어떤 값도 할당되어 있지 않은 경우 Null로 취급
{ "void" : null }

// 객체
{
  "Influencer" : { 
      "name" : "Jaxon",
      "age" : "42",
      "city": "seoul",
	}
}

// 배열
{
	"Influencers" : [ 
		{
           "name" : "Jaxon", 
           "age" : 42, 
           "Works At" : "Tech News"
		},
		{
           "name" : "Miller", 
           "age" : 35
           "Works At" : "IT Day"
		}
	]
}

---

JSON.stringify

JSON.stringify를 사용하면 원하는 값을 JSON으로 직렬화(문자열) 할 수 있다.

let json = JSON.stringify(value[, replacer, space])

문자열로 변환

let cafe = {
  name: "RiverOnYou",
  room: {
    number: 50,
    participants: ["mina", "jeon"]
  }
};

let json = JSON.stringify(cafe)
// '{"name":"RiverOnYou","room":{"number":50,"participants":["mina","jeon"]}}'

순환참조가 있을 경우, 문자열 변환이 불가능

let cafe = {
	name: "RiverOnYou",
}

let room = {
	number: 50,
	participants: ["mina", "jeon"]
}

room.cafe = cafe
cafe.room = room

JSON.stringify(cafe); // Uncaught TypeError: Converting circular structure to JSON

두번째 선택 인자 replacer

순환참조가 있을 경우, 변환하길 원하는 프로퍼티가 담긴 배열을 넘겨준다.

// 순환참조에 해당하는 room.cafe를 제외한다. 
let json = JSON.stringify(room, ['cafe', 'name', 'number', 'participants'])
// '{"cafe":{"name":"RiverOnYou"},"number":50,"participants":["mina","jeon"]}'

세번째 선택 인자 space

space로 중간에 삽입할 공백 문자 수를 입력하여 가독성을 높인다.

let json = JSON.stringify(cafe, null, 2)
// '{\n  "name": "RiverOnYou",\n  "room": {\n    "number": 50,\n    "participants": [\n      "mina",\n      "jeon"\n    ]\n  }\n}'

---

JSON.parse

JSON.parse를 사용하면 JSON을 본래 값(배열, 객체)으로 역 직렬화 할 수 있다.

let parsed = JSON.parse(str, [reviver]);

let userData = '{ "name": "mina", "age": 35, "friends": ["jeon", "chea"] }';

let parsedUserData = JSON.parse(userData)
parsedUserData.name // 'mina'

두번째 선택 인자 reviver

만약 다음과 같이 Date 객체가 있다면, JSON에게 문자열이 아닌 객체라는 것을 알린다.

let str = '{"title":"RiverOnYou","date":"Sat Jul 30 2022 18:56:30 GMT+0900 (한국 표준시)"}';

let meet = JSON.parse(str, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
})

meet.date.getDate()
// 30

---

🛑 직접 JSON 만들 때 자주 하는 실수!

1. key와 value는 “” 큰 따옴표로 감싸주어야 한다.
2. new 키워드를 사용할 수 없다. 순수 값(bare value)만 가능하다.
3. JSON은 주석을 지원하지 않는다!
4. 에디터에서 CRLF/ LF에 따라 JSON 텍스트가 동일하지 않을 수 있다. 참고 | CRLF LF로 생긴 문제 해결하기

---

출처

JSON | json.org
JSON과 메서드 | 모던 javascript 튜토리얼