JSON(JavaScript Object Notation)

JSON이란?

JavaScript의 객체 문법을 기반으로, 데이터를 문자열 형태로 교환하는 형식의 일종

표기법

데이터 타입(Data Type)	표기 방법	예시
문자열	큰따옴표(") 만 사용하여 표현 가능 (작은따옴표(') 사용 불가)	"title"
숫자	10진수 표기법만 사용 가능 (8진수, 16진수 사용 불가) NaN, Infinity는 사용할 수 없음	123 12.345
논리값	표현 가능	true
배열	표현 가능	[1, "abc", true]
객체	key는 반드시 문자열로 표기함	{"x": 1, "y": "abc"}
함수	표기할 수 없음 (메서드 포함)	-
null	표현 가능	null
undefined	표기할 수 없음	-

---

메서드

JSON.stringify()

JavaScript 문자열/객체를 JSON 문자열로 변환함

• 문법

  JSON.stringify(value, replacer, space)
  // value : JSON 문자열로 변환할 값
  // replacer(option) : 변환한 JSON 문자열의 출력 형태
  // space(option) : 변환한 JSON 문자열의 각 요소 간의 간격

JSON으로 표기할 수 없는 데이터 타입(ex. 함수, undefined)의 표현

• 해당 타입이 객체의 내부에 있는 경우 : 생략됨

  JSON.stringify( {x: 10, y: undefined, z: function () {} });	// {"x": 10}

• 해당 타입이 배열의 내부에 있는 경우 : null로 변환됨

  JSON.stringify( [10, undefined, function () {}] );	// [10, null, null]

replcaer 매개변수

변환한 JSON 문자열의 출력 형태를 설정함

• 종류

  // 함수 : (key, value)를 출력할 형태를 설정함
  function replcer(key, value) {
    if (typeof value === "undefined") {
      return "undefined";
    }
    return value;
  }

  JSON.stringify( {x: 10, y: undefined, z: function () {} });	// {"x": 10, "y": "undefined"}
  
  // 배열 : 출력할 (key, value)를 설정함
  JSON.stringify( {x: 1, y: 2, z: 3}, ["x", "z"] );	// {"x": 1, "z": 3}

space 매개변수

변환한 JSON 문자열의 각 요소 간의 간격을 설정함

최대 10자만큼의 들여쓰기가 가능함

• 종류

  // 문자열(공백 문자 포함)
  JSON.stringify({ x: 1, y: 2, z: 3 }, null, "  ")
  /*
    {
      "x": 1,
      "y": 2,
      "z": 3
    }
  */

  JSON.stringify({ x: 1, y: 2, z: 3 }, null, "12345678901")
  /*
    {
    1234567890"x": 1,
    1234567890"y": 2,
    1234567890"z": 3
    }
  */

  // 숫자
  JSON.stringify({ x: 1, y: 2, z: 3 }, null, 10)
  /*
    {
              "x": 1,
              "y": 2,
              "z": 3
    }
  */

---

JSON.parse()

JSON 문자열을 JavaScript 문자열/객체로 변환함

  JSON.parse(text, reviver)
  // text : JavaScript 값/객체로 변환할 JSON 문자열
  // reviver : 변환한 JavaScript 값/객체의 출력 형태를 설정함

reviver 매개변수

변환한 JavaScript 값/객체의 출력 형태를 설정함

  JSON.parse(
    {"x": 1, "y": 2, "z": 3},
    (key, value) => 
      typeof value === "number" ? value * 2 : value
  )
  // {x: 2, y: 4, z: 6}