JavaScript
JSON

소개

통사론

• JSON.parse (input [, reviver])
• JSON.stringify (value [, replacer [, space]])

매개 변수

비고

간단한 JSON 문자열 파싱하기

JSON.parse() 메서드는 문자열을 JSON으로 구문 분석하고 JavaScript 프리미티브, 배열 또는 객체를 반환합니다.

const array = JSON.parse('[1, 2, "c", "d", {"e": false}]');
console.log(array); // logs: [1, 2, "c", "d", {e: false}]

값 직렬화

자바 스크립트 값은 JSON.stringify 함수를 사용하여 JSON 문자열로 변환 할 수 있습니다.

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

1. value JSON 문자열로 변환 할 값입니다.

/* Boolean */  JSON.stringify(true)             // 'true'
/* Number  */  JSON.stringify(12)               // '12'
/* String  */  JSON.stringify('foo')            // '"foo"'
/* Object  */  JSON.stringify({})               // '{}'
               JSON.stringify({foo: 'baz'})     // '{"foo": "baz"}'
/* Array   */  JSON.stringify([1, true, 'foo']) // '[1, true, "foo"]'
/* Date    */  JSON.stringify(new Date())       // '"2016-08-06T17:25:23.588Z"'
/* Symbol  */  JSON.stringify({x:Symbol()})     // '{}'

2. replacer 문자열 지정 프로세스의 동작 또는 JSON 문자열에 포함될 값 객체의 속성을 필터링하기위한 허용 목록 역할을하는 String 및 Number 객체의 배열을 변경하는 함수입니다. 이 값이 null이거나 제공되지 않으면 객체의 모든 속성이 결과 JSON 문자열에 포함됩니다.

// replacer as a function
function replacer (key, value) {
    // Filtering out properties
    if (typeof value === "string") {
        return
    }    
    return value
}

var foo = { foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7 }
JSON.stringify(foo, replacer)
// -> '{"week": 45, "month": 7}'

// replacer as an array
JSON.stringify(foo, ['foundation', 'week', 'month'])
// -> '{"foundation": "Mozilla", "week": 45, "month": 7}'
// only the `foundation`, `week`, and `month` properties are kept

3. space 가독성을 위해 들여 쓰기에 사용되는 공간의 수를 세 번째 매개 변수로 지정할 수 있습니다.

JSON.stringify({x: 1, y: 1}, null, 2)  // 2 space characters will be used for indentation
/* output:
    {
      'x': 1,
      'y': 1
    }
*/

또는 들여 쓰기에 사용할 문자열 값을 제공 할 수 있습니다. 예를 들어 '\t' 를 입력하면 들여 쓰기에 탭 문자가 사용됩니다.

JSON.stringify({x: 1, y: 1}, null, '\t')
/* output:
    {
        'x': 1,
        'y': 1
    }
*/

Replacer 함수를 사용한 직렬화

replacer 함수를 사용하여 직렬화되는 값을 필터링하거나 변환 할 수 있습니다.

const userRecords = [
  {name: "Joe", points: 14.9, level: 31.5},
  {name: "Jane", points: 35.5, level: 74.4},
  {name: "Jacob", points: 18.5, level: 41.2},
  {name: "Jessie", points: 15.1, level: 28.1},
];

// Remove names and round numbers to integers to anonymize records before sharing
const anonymousReport = JSON.stringify(userRecords, (key, value) =>
  key === 'name'
    ? undefined
    : (typeof value === 'number' ? Math.floor(value) : value)
);

그러면 다음 문자열이 생성됩니다.

'[{"points":14,"level":31},{"points":35,"level":74},{"points":18,"level":41},{"points":15,"level":28}]'

회생 기능을 사용한 구문 분석

reviver 함수를 사용하여 구문 분석 할 값을 필터링하거나 변환 할 수 있습니다.

var jsonString = '[{"name":"John","score":51},{"name":"Jack","score":17}]';

var data = JSON.parse(jsonString, function reviver(key, value) {
  return key === 'name' ? value.toUpperCase() : value;
});

const jsonString = '[{"name":"John","score":51},{"name":"Jack","score":17}]';

const data = JSON.parse(jsonString, (key, value) =>
  key === 'name' ? value.toUpperCase() : value
);

이렇게하면 다음 결과가 생성됩니다.

[
  {
    'name': 'JOHN',
    'score': 51
  },
  {
    'name': 'JACK',
    'score': 17
  }
]

이 기능은 JSON으로 전송할 때 직렬화 / 인코딩해야하지만 데이터를 직렬화 / 디코딩해야 할 때 유용합니다. 다음 예제에서는 날짜가 ISO 8601 표현으로 인코딩되었습니다. reviver 함수를 사용하여 JavaScript Date 에서이 구문을 분석합니다.

var jsonString = '{"date":"2016-01-04T23:00:00.000Z"}';

var data = JSON.parse(jsonString, function (key, value) {
  return (key === 'date') ? new Date(value) : value;
});

const jsonString = '{"date":"2016-01-04T23:00:00.000Z"}';

const data = JSON.parse(jsonString, (key, value) =>
  key === 'date' ? new Date(value) : value
);

reviver 함수가 각 반복 끝에 유용한 값을 반환하는지 확인하는 것이 중요합니다. reviver 함수가 undefined 반환하거나 값이 없거나 실행이 함수의 끝으로 떨어지면 속성이 객체에서 삭제됩니다. 그렇지 않은 경우 속성은 반환 값으로 다시 정의됩니다.

클래스 인스턴스 직렬화 및 복원

사용자 정의 toJSON 메소드 및 리버브 기능을 사용하여 JSON에서 고유 한 클래스의 인스턴스를 전송할 수 있습니다. 객체에 toJSON 메소드가있는 toJSON 객체 자체 대신 결과가 직렬화됩니다.

function Car(color, speed) {
  this.color = color;
  this.speed = speed;
}

Car.prototype.toJSON = function() {
  return {
    $type: 'com.example.Car',
    color: this.color,
    speed: this.speed
  };
};

Car.fromJSON = function(data) {
  return new Car(data.color, data.speed);
};

class Car {
  constructor(color, speed) {
    this.color = color;
    this.speed = speed;
    this.id_ = Math.random();
  }

  toJSON() {
    return {
      $type: 'com.example.Car',
      color: this.color,
      speed: this.speed
    };
  }

  static fromJSON(data) {
    return new Car(data.color, data.speed);
  }
}

var userJson = JSON.stringify({
  name: "John",
  car: new Car('red', 'fast')
});

이렇게하면 다음과 같은 내용의 문자열이 생성됩니다.

{"name":"John","car":{"$type":"com.example.Car","color":"red","speed":"fast"}}

var userObject = JSON.parse(userJson, function reviver(key, value) {
  return (value && value.$type === 'com.example.Car') ? Car.fromJSON(value) : value;
});

그러면 다음 객체가 생성됩니다.

{
  name: "John",
  car: Car {
    color: "red",
    speed: "fast",
    id_: 0.19349242527065402
  }
}

JSON 대 JavaScript 리터럴

JSON은 "JavaScript Object Notation"의 약자이지만 자바 스크립트가 아닙니다. 자바 스크립트 문자로 직접 사용할 수 일어나는 단지 데이터 직렬화 형식이라고 생각. 그러나 외부 소스에서 가져온 JSON을 직접 실행 ( eval() 통해 eval() 하는 것은 좋지 않습니다. 기능상 JSON은 XML 또는 YAML과 크게 다르지 않습니다. JSON이 JavaScript와 매우 유사한 일부 직렬화 형식으로 상상되는 경우 혼란을 피할 수 있습니다.

그 이름은 단지 객체를 의미하지만, 일종의 API를 통한 대부분의 유스 케이스가 항상 객체와 배열이 되어도 JSON은 객체 나 배열을위한 것이 아닙니다. 다음과 같은 기본 유형이 지원됩니다.

• 문자열 (예 : "Hello World!" )
• 번호 (예 : 42 )
• 부울 (예 : true )
• 값 null

undefined 는 직렬화시 JSON에서 정의되지 않은 속성이 생략된다는 점에서 지원 undefined 않습니다. 따라서 JSON을 deserialize하고 값이 undefined 속성으로 끝나는 방법은 없습니다.

문자열 "42" 는 유효한 JSON입니다. JSON은 항상 "{...}" 또는 "[...]" 의 외부 봉투를 가질 필요는 없습니다.

nome JSON 또한 유효한 JavaScript이고 일부 JavaScript는 유효한 JSON이지만 두 언어 사이에는 약간의 차이가 있으며 어느 언어도 다른 언어의 하위 집합이 아닙니다.

다음 JSON 문자열을 예로 들어 보겠습니다.

{"color": "blue"}

이것은 JavaScript에 직접 삽입 될 수 있습니다. 구문 적으로 유효하며 올바른 값을 생성합니다.

const skin = {"color": "blue"};

그러나 "색상"은 유효한 식별자 이름이고 속성 이름은 따옴표로 묶을 수 있습니다.

const skin = {color: "blue"};

큰 따옴표 대신 작은 따옴표를 사용할 수 있다는 것도 알고 있습니다.

const skin = {'color': 'blue'};

하지만이 두 리터럴을 모두 JSON으로 취급 한다면 구문 적으로 유효한 JSON 이 될 수 없습니다 .

{color: "blue"}
{'color': 'blue'}

JSON은 모든 속성 이름을 큰 따옴표로 묶고 문자열 값을 큰 따옴표로 묶어야합니다.

JSON 새로 작성자가 자바 스크립트 리터럴을 JSON으로 사용하여 코드 발췌본을 사용하고 JSON 파서에서 구문 오류에 대해 머리를 쓰는 것은 흔한 일입니다.

잘못된 용어 가 코드 나 대화에 적용될 때 더 혼란이 시작됩니다.

일반적인 안티 패턴은 비 JSON 값을 "json"으로 유지하는 변수의 이름을 지정하는 것입니다.

fetch(url).then(function (response) {
  const json = JSON.parse(response.data); // Confusion ensues!

  // We're done with the notion of "JSON" at this point,
  // but the concept stuck with the variable name.
});

위의 예에서 response.data 는 일부 API에서 반환하는 JSON 문자열입니다. JSON은 HTTP 응답 도메인에서 중지합니다. "json"잘못된 이름의 변수에는 JavaScript 값 (객체, 배열 또는 간단한 숫자 일 수 있음) 만 있습니다.

위의 글을 쓰는 데 덜 혼란스러운 방법은 다음과 같습니다.

fetch(url).then(function (response) {
  const value = JSON.parse(response.data);

  // We're done with the notion of "JSON" at this point.
  // You don't talk about JSON after parsing JSON.
});

개발자는 "JSON 객체"라는 말을 많이 사용하는 경향이 있습니다. 이것은 또한 혼란을 가져온다. 위에서 언급했듯이 JSON 문자열은 객체를 값으로 보유 할 필요가 없습니다. "JSON 문자열"은 더 나은 용어입니다. "XML 문자열"또는 "YAML 문자열"과 같습니다. 당신은 문자열을 얻고 그것을 파싱하고 결국 값을 갖게됩니다.

순환 오브젝트 값

모든 객체를 JSON 문자열로 변환 할 수있는 것은 아닙니다. 개체에 주기적 자체 참조가 있으면 변환이 실패합니다.

이는 일반적으로 부모와 자식이 서로를 참조하는 계층 적 데이터 구조의 경우입니다.

const world = {
  name: 'World',
  regions: []
};

world.regions.push({
  name: 'North America',
  parent: 'America'
});
console.log(JSON.stringify(world));
// {"name":"World","regions":[{"name":"North America","parent":"America"}]}

world.regions.push({
  name: 'Asia',
  parent: world
});

console.log(JSON.stringify(world));
// Uncaught TypeError: Converting circular structure to JSON

프로세스가주기를 감지하면 예외가 발생합니다. 사이클 감지가 없으면 문자열은 무한히 길어집니다.