Frontend/javaScript

JSON.parse() 와 JSON.stringify() 파라미터

dddzr 2023. 6. 13. 08:33

기본적으로 JSON.parse() 메서드는 JSON 문자열을 JavaScript 객체로 변환하는데 사용하고

JSON.stringify() 메서드는 JavaScript 객체를 문자열로 변환하는데 사용합니다.

 

보통 파라미터로 각각 변환 대상인 객체나 문자열만 넣어서 사용했는데 

JSON.stringify()를 사용할 때 undefined 값은 JSON에서 지원하지 않는 값이기 때문에 변환 과정에서 제외된다는 것을 알았습니다.

그래서 undefined를 ""(공백)으로 변환 시키기 위해서 JSON.stringify()의 매개변수 중 하나인 replacer을 사용했습니다.

 

JSON.stringify()

  • value: 변환할 JavaScript 객체나 값입니다. 일반적으로 객체를 전달하지만, 배열, 숫자, 문자열, 불리언 등 다른 JavaScript 데이터 타입도 사용할 수 있습니다.
  • replacer (선택적): 변환 프로세스 중에 값을 변경하기 위한 함수 또는 배열입니다. 이 함수는 변환 중 각 키-값 쌍에 대해 호출되며, 반환 값으로 대체된 값을 사용합니다. 배열의 경우에는 대체할 키의 집합을 지정합니다. 기본값은 null로, 이 경우 모든 값이 변환되지만 함수나 배열을 사용하여 원하는 대상만 선택적으로 변환할 수 있습니다.
  • space (선택적): 들여쓰기를 적용하여 결과 문자열을 가독성 있게 만들기 위한 공백 문자열이나 공백 수를 지정합니다. 주로 디버깅이나 가독성을 위해 사용됩니다.
  • toJSON (선택적): 객체가 toJSON() 메서드를 가지고 있다면, 이 메서드를 호출하여 직렬화할 값을 반환합니다.

아래는 replacer 함수로 undefined를 공백으로 변환하는 예제입니다.

const replacer = (key, value) => {
  if (value === undefined) {
    return "";
  }
  return value;
};

const object = [{key1: "sdf"}, {key2: ""}, {key3: undefined}];
const jsonString = JSON.stringify(object, replacer);
console.log(jsonString);

 

JSON.parse()

  • text: 변환할 JSON 문자열입니다.
  • reviver (선택적): JSON의 각 멤버를 변환하는 함수입니다. 이 함수는 문자열로 변환된 JSON 객체의 각 멤버에 대해 호출되며, 반환 값으로 대체된 값을 사용합니다. 이를 통해 원하는 값의 형태로 변환하거나 특정 프로퍼티를 필터링할 수 있습니다. 기본값은 null로, 이 경우 변환된 객체의 모든 멤버가 기본 형태로 반환됩니다.

아래는 reviver 함수를 사용하여 특정 프로퍼티를 필터링하는 예제입니다.

const jsonString = '{"name":"John","age":30,"city":"New York"}';

const object = JSON.parse(jsonString, (key, value) => {
  if (key === 'name') {
    // 'name' 프로퍼티는 필터링하여 제외
    return undefined;
  }
  return value;
});