본문 바로가기

프로그래밍 언어 /javascript

JSON과 관련된 메소드 정리...

JSON.parse(text[, reviver])

문자열을 JSON으로서 구문 분석하고, 선택적으로 분석 결과의 값과 속성을 변환해 반환합니다.

 

JSON.parse()

JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다.

developer.mozilla.org

 

예시.

1
2
3
4
5
JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null
cs

 

reviver가 주어지면 분석한 값을 반환하기 전에 변환합니다. 구체적으로는, 분석한 값과 그 모든 속성(가장 깊게 중첩된 속성부터 시작해 제일 바깥의 원래 값까지)을 각각 reviver에 전달합니다. reviver의 this 문맥은 분석한 값으로 설정되고, 속성 명(문자열)과 값을 인자로 전달받습니다. reviver가 undefined를 반환하거나 반환하지 않는다면, 예컨대 함수가 중간에 실패한다면 그 속성은 최종 결과에서 제외됩니다. 그 외에는 반환 값으로 속성의 값을 재설정합니다.

만약 reviver가 일부 값만 변환하고 나머지는 건드리지 않는다면, 나머지 값을 그대로 반환하는걸 잊지 마세요. 그렇지 않으면 변환한 값 외에는 결과에서 모두 제외됩니다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
JSON.parse('{"p": 5}', (key, value) =>
  typeof value === 'number'
    ? value * 2 // 숫자라면 2배
    : value     // 나머진 그대로
);
 
// { p: 10 }
 
JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', (key, value) => {
  console.log(key); // 현재 속성명 출력, 마지막은 빈 문자열("")
  return value;     // 변환하지 않고 그대로 반환
});
 
// 1
// 2
// 4
// 6
// 5
// 3 
// ""
cs

후행쉼표 사용 불가 

1
2
3
// 둘 다 SyntaxError
JSON.parse('[1, 2, 3, 4, ]');
JSON.parse('{"foo" : 1, }');
cs

 

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

 

JSON.stringify()

JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다.

developer.mozilla.org

주어진 값에 해당하는 JSON 문자열을 반환합니다. 선택 사항으로 특정 속성만 포함하거나 사용자 정의 방식으로 속성을 대체합니다.

 

매개변수

value : JSON문자열로 반환할 값

replacer | optional(필수 입력값 아님 default 값 존재)

문자열과 동작 방식을 변경하는 함수, 혹은 JSON 문자열에 포함될 값 객체의 속성들을 선택하기 위한 화이트리스트로 쓰이는 String 과 Number 객체들의 배열. 이 값이 null이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.

space | optional(필수 입력값 아님 default 값 존재)

가독성을 목적으로 JSON 문자열 출력에 공백을 삽입하는데 사용되는 String 또는 Number 객체. 

이것이 Number 라면, 공백으로 사용되는 스페이스(space)의 수를 나타낸다. 

이 수가 10보다 크면 10 으로 제한된다. 1보다 작은 값은 스페이스가 사용되지 않는 것을 나타낸다.

이것이  String 이라면, 그 문자열(만약 길이가 10보다 길다면, 첫번째 10 개의 문자)이 공백으로 사용된다.

이 매개 변수가 제공되지 않는다면(또는 null 이면), 공백이 사용되지 않는다.

 

반환 값

주어진 값과 대응하는 JSON 문자열

 

예외

순환 참조를 발견할 경우 TypeError(cyclic object value)

 

JSON.stringify()는 값을 JSON 표기법으로 변환한다.

  • 배열이 아닌 객체의 속성들은 어떤 특정한 순서에 따라 문자열화 될 것이라고 보장되지 않는다. 같은 객체의 문자열화에 있어서 속성의 순서에 의존하지 않는다.
  • Boolean, Number, String 객체들은 문자열화 될 때 전통적인 변환 의미에 따라 연관된 기본형(primitive) 값으로 변환된다.
  • undefined, 함수, 심볼(symbol)은 변환될 때 생략되거나(객체 안에 있을 경우) null 로 변환된다(배열 안에 있을 경우).
  • 심볼을 키로 가지는 속성들은 replacer 함수를 사용하더라도 완전히 무시된다.
  • 열거 불가능한 속성들은 무시된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
JSON.stringify({});                  // '{}'
JSON.stringify(true);                // 'true'
JSON.stringify('foo');               // '"foo"'
JSON.stringify([1'false'false]); // '[1,"false",false]'
JSON.stringify({ x: 5 });            // '{"x":5}'
 
JSON.stringify(new Date(2006021545)) 
// '"2006-01-02T15:04:05.000Z"'
 
JSON.stringify({ x: 5, y: 6 });
// '{"x":5,"y":6}' or '{"y":6,"x":5}'
JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
// '[1,"false",false]'
 
// Symbols:
JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
// '{}'
JSON.stringify({ [Symbol('foo')]: 'foo' });
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
  if (typeof k === 'symbol') {
    return 'a symbol';
  }
});
// '{}'
 
// Non-enumerable properties:
JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
// '{"y":"y"}'
cs

replacer 매개 변수

 

replacer 매개변수는 함수 또는 배열이 될 수 있다. 함수일 때는 문자열화 될 key 와 value, 2개의 매개변수를 받는다. key 가 발견된 객체는 리플레이서의 this 매개변수로 제공된다. 맨 처음에는 문자열화될 그 객체를 나타내는 비어 있는 key와 함께 호출되고, 그 다음에는 문자열화될 그 객체나 배열의 각 속성에 대해 호출된다. 이것은 JSON 문자열에 추가되어야 하는 값을 반환해야한다:

  • Number 를 반환하면, JSON 문자열에 추가될 때 그 수를 나타내는 문자열이 그 속성의 값으로 사용된다.
  • String 을 반환하면, 그것이 JSON 문자열에 추가될 때 속성의 값으로 사용된다.
  • Boolean 을 반환하면, 그것이 JSON 문자열에 추가될 때 "true" 또는 "false" 이 속성의 값으로 사용된다.
  • 다른 객체를 반환하면, 그 객체는 replacer 함수를 각각의 속성에 대해 호출하며 순환적으로 JSON 문자열로 문자열화된다. 그 객체가 함수인 경우에는 JSON 문자열에 아무것도 추가되지 않는다.
  • undefined 를 반환하면, 그 속성은 JSON 문자열 결과에 포함되지 않는다.

유의: replacer 함수를 배열로부터 값을 제거하기위해 사용할 수 없다. 만약 undefined 나 함수를 반환한다면 null 이 대신 사용될 것이다

 

1
2
3
4
5
6
7
8
9
function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}
 
var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
var jsonString = JSON.stringify(foo, replacer);
cs

JSON 문자열 결과는 {"week":45,"month":7} 이다.

 

배열에 대한 예제

replacer 가 배열인 경우, 그 배열의 값은 JSON 문자열의 결과에 포함되는 속성의 이름을 나타낸다.

1
2
JSON.stringify(foo, ['week''month']);  
// '{"week":45,"month":7}', 단지 "week" 와 "month" 속성을 포함한다
cs

space 매개변수

1
2
3
4
5
6
JSON.stringify({ uno: 1, dos: 2 }, null'\t');
// returns the string:
// '{
//     "uno": 1,
//     "dos": 2
// }'
cs