[JS] JSON.stringify, 세 개의 인자

💡 이번시간에는 JSON.stringify의 세 가지 인자(value, replacer, space)를 알아보았다!

1. JSON.stringify 기본 사용법

• JSON.stringify는 값을 JSON 문자열로 변환해준다.
• 아래 예시는 obj객체를 JSON 문자열로 변환한 모습이다.

const obj = {
  id: 12,
  name: 'john',
};

JSON.stringify(obj); 

// {"id":12,"name":"john"}

2. 두 번째 인자, replacer

🤔 그런데, 만약 JSON 문자열로 변환하려는 값을 변형하고 싶을 때는 어떻게 해야할까?

• 이 경우에는 JSON.stringify의 두번째 인자(replacer)를 이용하면 된다.
• 두 번째 인자는 함수나 혹은 JSON화 하려는 객체의 속성들을 배열로 넘겨야 한다.

(1) 함수를 넘길 경우

• 아래 예시는 obj에서 값이 string인 경우, 값을 hello로 변환한 모습이다.

const obj = {
  id: 12,
  name: 'john',
  age: 33, 
};
function replacer(key, value) {
  if (typeof value === "string") {
    return 'hello';
  }
  return value;
}

JSON.stringify(obj, replacer);
// {"id":12,"name":"hello","age":33}

(2) 배열을 인자로 넘긴 경우

• 아래 예시는 obj에서 id를 제외한 값만 JSON 문자열로 변환한 모습이다.

const obj = {
  id: 12,
  name: 'john',
  age: 33, 
};
const replacer = ["name", "age"];

JSON.stringify(obj, replacer);
// {"name":"john","age":33}

3. 세 번째 인자, space

• JSON.stringify의 세 번째 인자는 space로, 문자열의 간격을 조절할 수 있다.
• 숫자를 넘길 경우 최대 10까지 가능하다.
• 문자의 경우 해당 문자 자체를 넣거나, /t을 넘기면 탭 간격이 적용되는데 최대 10개까지 적용된다.

(1) 숫자를 넘길 경우

const obj = {
  id: 12,
  name: 'john',
  age: 33, 
};

JSON.stringify(obj, null, 5);

(2) 문자를 넘길 경우

const obj = {
  id: 12,
  name: 'john',
  age: 33, 
};

JSON.stringify(obj, null, '😆😆😆');

• \t을 사용할 수 있으며, 최대 10개까지 적용할 수 있다.

const obj = {
  id: 12,
  name: 'john',
  age: 33, 
};

JSON.stringify(obj, null, '\t\t\t\t\t\t\t\t\t\t');