JSON(JavaScript Object Notation)

📌 JSON이란?

JavaScript Object Notation의 약자로 자바스크립트 객체 문법.
데이터를 저장하거나 전송할 때 많이 사용되는 구조화된 데이터 표현을 위한 표준 형식이다. 프로그래밍 문법이 아닌 단순히 데이터를 표시하는 표현 방법으로, 서버와 클라이언트 간의 교류에서 많이 사용된다.

자바스크립트에 종속되지 않는 언어 독립형 데이터 포맷으로, 대부분의 프로그래밍 언어에서 사용할 수 있다.

📌 JSON 형식

JSON은 자바스크립트 객체와 유사하게 키와 값으로 구성된 순수한 텍스트다. JSON의 키는 반드시 큰따옴표(작은따옴표 사용 불가)로 묶어야 한다. 값은 객체 리터럴과 같은 표기법을 그대로 사용할 수 있지만, 문자열은 반드시 큰따옴표로 묶어야 한다.

{ "name": "홍길동" }

다양한 데이터 형식을 사용할 수 있다.
(String, Number, Object, Array, Null, Boolean)

{
	"name": "홍길원",
	"age": 30,
	"gender": "남",
	"interests": ["음악", "댄스"],
	"family": {"fatehr": "홍투길", "mom": "김연삼"},
	"school": null,
	"graduate": true 
}

📌 JSON 내장 메서드

JSON 내장 메서드를 통해 JSON 객체를 자바스크립트 객체로 변환할 수도, 자바스크립트 객체를 JSON 객체로 변환할 수도 있다.

JSON.parse()

JSON 객체 -> JavaScript 객체

Syntax

JSON.parse(text)
JSON.parse(text, reviver)

Example

let jsonData = `{
	"name": "홍길원",
	"age": 30, 
	"gender": "남",
	"interests": ["음악", "댄스"], 
	"family": {"fatehr": "홍투길", "mom": "김연삼"}, 
	"school": null, 
	"graduate": true
}`;

let jsData = JSON.parse(jsonData);
console.log(jsData);

/*
{
  name: '홍길원',
  age: 30,
  gender: '남',
  interests: [ '음악', '댄스' ],
  family: { fatehr: '홍투길', mom: '김연삼' },
  school: null,
  graduate: true
}
*/


console.log(typeof jsData); // object

JSON.stringify()

자바스크립트 객체 → JSON 객체

Syntax

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

Example

let jsData = {
	"name": "홍길원",
	"age": 30, 
	"gender": "남",
	"interests": ["음악", "댄스"], 
	"family": {"fatehr": "홍투길", "mom": "김연삼"}, 
	"school": null, 
	"graduate": true
};

let jsonData = JSON.stringify(jsData);
console.log(jsonData);
// {"name":"홍길원","age":30,"gender":"남","interests":["음악","댄스"],"family":{"fatehr":"홍투길","mom":"김연삼"},"school":null,"graduate":true}


console.log(typeof jsonData); // string

변환할 자바스크립트 객체가 많은 양의 데이터를 포함하고 있다면 가독성이 현저하게 떨어질 것이다. 이때는 stringify() 메서드의 세 번째 인자에 들여쓰기할 공백의 크기를 전달하여 지정할 수 있다.

// 두 칸 들여쓰기
jsonData = JSON.stringify(jsData, null, 2);

console.log(jsonData);
/*
{
  "name": "홍길원",
  "age": 30,
  "gender": "남",
  "interests": [
    "음악",
    "댄스"
  ],
  "family": {
    "fatehr": "홍투길",
    "mom": "김연삼"
  },
  "school": null,
  "graduate": true
}
*/

📌 JSON 장단점

장점

• 함축적으로 최소한의 정보만 가짐
• 용량이 작고 속도가 빠름
• 특정 언어에 종속되지 않음

단점

• 함축적인 정보 때문에 의미 파악이 어려울 수 있음
• 경량의 데이터 교환 형식이기 때문에 대용량급의 데이터 송수신에는 부적합할 수 있음
• 주석을 지원하지 않음

참고 자료

MDN JSON JSON.parse() JSON.stringify()
이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스