JSON.Stringify 두 번째 인수에 대해

Source: Dev.to

구문

JSON.stringify(value, replacer, space);

• value – 변환할 JavaScript 값 (객체, 배열, 문자열, 숫자 등).
• replacer (선택) – 문자열화하기 전에 값을 변환하는 함수 또는 배열.
• space (선택) – 가독성을 위해 출력에 들여쓰기를 적용할 문자열(또는 숫자).

동작 방식

• 문자열, 숫자, 불리언, null 같은 원시값을 JSON 형태로 바로 변환합니다.
• 배열은 각 요소를 순회하면서 각각을 문자열화합니다.
• 객체는 속성을 열거하고 키‑값 쌍을 문자열화합니다.
• 기본적으로 undefined 값이나 함수인 속성은 제외됩니다.
• replacer와 space 옵션을 사용해 맞춤 설정이 가능합니다.

예시

기본 사용법

const object = { name: "Alice", age: 30 };
JSON.stringify(object); // '{"name":"Alice","age":30}'

const array = [1, 2, 3];
JSON.stringify(array); // '[1,2,3]'

const date = new Date();
JSON.stringify(date); // '"2024-02-07T02:54:22.394Z"' (권장되지 않음)

replacer 함수로 특정 속성 제외하기

const object = { name: "Alice", age: 30, password: "secret" };
const jsonString = JSON.stringify(object, (key, value) => {
  if (key === "password") return undefined; // 비밀번호 제외
  return value;
});
// '{"name":"Alice","age":30}'

replacer 배열로 속성 필터링하기

const objects = [
  { name: "Eka Prasetia" },
  { city: "Jakarta" },
  { hobby: "Play codes" },
];

JSON.stringify(objects, ["name", "hobby"], 2);
// [
//   {
//     "name": "Eka Prasetia"
//   },
//   {},
//   {
//     "hobby": "Play codes"
//   }
// ]

replacer 함수로 속성 값 교체하기

const result = JSON.stringify(
  objects,
  (key, value) => {
    if (key.match(/name|city/)) return "👨‍👩‍👧✌";
    return value;
  },
  2
);
// [
//   {
//     "name": "👨‍👩‍👧✌"
//   },
//   {
//     "city": "👨‍👩‍👧✌"
//   },
//   {
//     "hobby": "Play codes"
//   }
// ]

두 번째 인수(replacer)는 각 속성마다 호출되는 함수가 될 수 있습니다. 이 함수는 원본 값을 대체할 새로운 값(문자열, 숫자 등)을 반환하거나, undefined를 반환해 해당 속성을 출력에서 제외할 수 있습니다.

핵심 포인트

• JSON.stringify()는 데이터를 서버에 전송하거나 로컬 스토리지에 저장할 때 유용합니다.
• 객체를 문자열화할 때 순환 참조나 함수가 포함되어 있지 않은지 주의하세요.
• replacer를 사용해 출력 형식을 맞춤화하거나 민감한 정보를 제외할 수 있습니다.
• JSON에는 기본 날짜 타입이 없으므로 Date 객체를 직접 문자열화하는 것은 피하세요.

즐거운 코딩 되세요! 🔥