JSON 개념과 JSON.parse, JSON.stringify 메서드

JSON이란?
JavaScript Object Notation을 의미하며 경량화한 텍스트기반 데이터 교환 방식을 의미한다.
즉, 문자 기반의 데이터 포맷이다.

객체와 생김새가 비슷하지만, JSON은 데이터를 표현하는 형식으로 자바스크립트를 확장하여 만들어졌다.
JSON은 메서드는 담을 수 없고, 프로퍼티만 담을 수 있다.
객체, 배열, 숫자(NaN, Infinity는 제외), 문자열, bool, null을 직렬화 할 때 사용한다.

직렬화 : 외부에서 사용할 수 있도록 데이터를 변환(객체를 문자열로)하는 것을 의미한다.

속성의 이름들은 큰 따옴표로 표시된 문자열이어야 한다.
undefined도 JSON에서는 지원하지 않는 형식이므로 직렬화되지 않는다.

JSON.parse()

전달받은 문자열을 자바스크립트 객체로 변환한다.

console.log(JSON.parse('{"name":"iu", "age":30}'));

// 출력 결과
{name: "iu", age: 30}

JSON.stringify()

자바스크립트 객체를 문자열로 변환한다.
매겨변수로 value, replacer, space를 받을 수 있다.
replacer와 space는 선택사항이고 value는 JSON 문자열로 반환하고 싶은 값을 넣어주면 된다.

const test = {
  name : '아이유',
  age : 30
}

console.log(JSON.stringify(test));

// 실행 결과
{"name":"아이유","age":30} 

위 결과는 value값만 넣었을 때 출력 결과이다.
3번째 인수로 space 값을 넣어주면 공백을 넣어 예쁘게 출력해볼 수도 있다.

const test = {
  name : '아이유',
  age : 30
}

console.log(JSON.stringify(test, null, 3));
console.log(JSON.stringify(test, null, 10));

// 출력 결과

/* 공백을 3칸 넣음 */
{
   "name": "아이유",
   "age": 30
} 

/* 공백을 10칸 넣음 */
{
          "name": "아이유",
          "age": 30
} 

space는 최대 10까지만 가능하다.
space를 생략하는 경우엔 공백이 들어가지 않는다.

---

참고 자료
TCP School JSON
MDN JSON