[JavaScript] JSON

JSON

• JavaScript Object Notation 
• 클라이어언트 서버간 통신을 위한 텍스트 데이터 포맷이다. 즉 데이터를 저장하거나 전송할 때 사용하는 데이터 형식이다. 
• JSON 표현식은 사람과 기계가 모두 이해하기 쉽고 용량이 작아서, xml을 대체하여 데이터 전송에 많이 사용된다.
• JSON은 자바스크립트 문법에 기반을 두고 있지만 차이점도 존재하며, 자바스크립트에 종속되지 않는 독립형 데이터 포맷이다. 따라서 자바스크립트 이외에 다른 프로그래밍 언어에서도 사용할 수 있다.

JSON 표기 방식

• 자바스크립트의 객체 리터럴과 유사하게 키 : 값의 쌍으로 구성된 순수한 텍스트이다.
• JSON의 키는 반드시 "큰따옴표"('작은따옴표' X) 여야 하고, 값은 객체 리터럴과 동일하게 사용하되 문자열은 반드시 "큰따옴표"를 사용한다.

// JSON 포맷 문자열 예시
{
  "users": [
    {
      "name": "hyejung",
      "age": 26,
      "favorite": ["swimming", "cat"],
      "human": true,
      "cat": false
    },
    {
      "name": "sandeul",
      "age": 3,
      "favorite": ["churu", "toy"],
      "human": false,
      "cat" : true
    }
  ]
}

JSON.stringify()

• JSON.stringify : 객체 to JSON 포맷 문자열 변환 메서드. 
• 직렬화 : 클라이언트에서 서버로 객체를 전송하기 위해 객체를 문자열화 하는 것.
• 객체는 실제 데이터가 아닌 힙에 할당된 메모리 주소를 참조하는 참조형 데이터이다. 이렇게 내부에서 병렬적인 형태로 존재하는 데이터를 외부에서 저장 혹은 통신에 사용하기 위해서는 직렬화 즉, 독립적인 값으로 만들어야 한다. 

const obj = {
  name: 'hyejung',
  age: 26,
  favorite: ['swimming', 'cat'],
  human: true,
  cat: false,
};

// 객체 to JSON
const json = JSON.stringify(obj);
console.log(json);
// {"name":"hyejung","age":26,"favorite":["swimming","cat"],"human":true,"cat":false}

// 객체 to JSON : 들여쓰기로 가독성을 높인다.
const prettyJson = JSON.stringify(obj, null, 2);
console.log(prettyJson);
/* {
  "name": "hyejung",
  "age": 26,
  "favorite": [
    "swimming",
    "cat"
  ],
  "human": true,
  "cat": false
} */

// object 에서 string으로 type이 바뀐다.
console.log(typeof obj, typeof json);
// object string

JSON.stringify의 매개변수와 옵션

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

• value : JSON 포맷 문자열로 변환할 객체 혹은 값 (참고로 함수, 심볼, 값이 undefined 인 프로퍼티는 무시된다.)
• replacer (옵션) : 문자열화 동작 방식을 변경하는 함수 혹은 JSON 문자열에 포함될 객체들의 속성을 선택하기 위한 값들의 배열이 들어간다. 이 값이 Null 이거나 생략되면, value 파라미터에 전달한 객체의 모든 프로퍼티가 JSON 문자열에 포함된다. 
• space(옵션) : 가독성을 향상시키기 위해 문자열 출력시 공백을 조정할 수 있는 옵션이다. String 혹은 Number 타입의 값이 전달될 수 있는데, 전달인자가 number 타입이라면 그 값은 공백의 갯수가 된다.(최대 10개)
  만약 전달인자가 string 타입이라면 첫번째 부터 10개의 문자가 공백으로 사용된다. 이 매개변수가 전달되지 않는다면 공백이 사용되지 않는다. 

replacer 옵션 사용 예시

// 값이 number 타입인 프로퍼티는 제외하는 함수
const filter = function (key, value) {
  // stringify 메서드는 undefined 값을 가지는 속성을 JSON 문자열에 포함시키지 않는다!
  // 따라서 type이 'number'일 때 undefined를 반환하는 것은 
  // 해당 프로퍼티를 포함시키지 않는다는 의미가 된다.
  if (typeof value === 'number') return undefined;
  else return value;
};

const noNumberJson = JSON.stringify(obj, filter, 2);
console.log(noNumberJson);
// number 타입을 제외한 나머지 프로퍼티만 JSON 문자열에 추가되었다.
// space 옵션에 2를 넣으면, 2 만큼의 공백을 두고 정렬된 JSON 문자열이 반환된다.
/* {
  "name": "hyejung",
  "favorite": [
    "swimming",
    "cat"
  ],
  "human": true,
  "cat": false
} */

// 속성 이름을 배열로 넘겨주면 해당 속성만 포함한 JSON 문자열을 반환한다.
const json2 = JSON.stringify(obj, ['name', 'favorite'], 2);
console.log(json2);
/* {
  "name": "hyejung",
  "favorite": [
    "swimming",
    "cat"
  ]
} */

JSON.parse()

• JSON.parse: JSON to 객체 디코딩. 
• 역직렬화 혹은 파싱(Parsing) : 서버에서 클라이언트로 전송된 JSON 문자열을 객체로 사용하기 위한 과정. 
• JSON 문자열을 프로그램 런타임에서 실제로 활용할 수 있는 내부 포맷 (객체)로 변환시켜야 하고 이것을 파싱이라고 한다. 

const obj = {
  name: 'hyejung',
  age: 26,
  favorite: ['swimming', 'cat'],
  human: true,
  cat: false,
};

// 객체 to JSON
const prettyJson = JSON.stringify(obj, null, 2);

// JSON to 객체
const parsed = JSON.parse(prettyJson);
console.log(typeof parsed, parsed);
/* object {
  name: 'hyejung',
  age: 26,
  favorite: [ 'swimming', 'cat' ],
  human: true,
  cat: false
} */

참고자료

http://www.yes24.com/Product/Goods/92742567

모던 자바스크립트 Deep Dive - YES24

https://ko.javascript.info/json

JSON과 메서드

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

JSON.stringify() - JavaScript | MDN

https://velog.io/@raram2/serialization

시리얼라이제이션(Serialization)