JSON.stringify JSON.parse

 

---

 

1. JSON 전역 객체

자바스크립트 에는 JSON 이라는 전역 객체가 존재 합니다.

JSON 전역 객체에 대표적인 함수는

JSON.stringify(Object)

JSON.parse(String)

 

2. JSON.stringify()

JSON.stringify(Object) 는 '자바스크립트 객체'  ->  'json 문자열' 로 변환 시켜주는 함수 입니다.

여기서 여기서 우리가 흔히들 얘기 하는 json 이라는것이 이 'json 문자열'을 의미 합니다.

'자바스크립트 객체' 와 구조는 같지만 객체가 아닌 문자열로서 존재 하는 것입니다.

const person = {
  name: 'taein',
  age: 21
};

console.log(person);

Chrome의 개발자 도구에서 __proto__ : Object 을 통해서 '자바스크립트 객체' 임을 확인 할 수 있습니다.

그럼 이 person 객체를 JSON.stringify() 함수를 사용해서 출력 시켜 보겠 습니다. 

const person = {
  name: 'taein',
  age: 21
};

const personStr = JSON.stringify(person);
console.log(personStr);

개발자도구 에서는 이처럼 '문자열' 로 출력되는 것을 확인 할수 있습니다.

'자바스크립트 객체' 가 아니기 때문에 __proto__ : Object 는 확인 할 수 없습니다.

우리가 흔히 서버와 통신을 할때에는 이와 같은 'json 문자열'로 변환하여 서버와 통신을 합니다.

 

2. JSON.stringify()

JSON.parse(String) 는 'json 문자열'  ->  '자바스크립트 객체'로 변환 해주는 역할을 합니다.

const person = {
  name: 'taein',
  age: 21
};

const personStr = JSON.stringify(person);
console.log(JSON.parse(personStr));

JSON.parse()를 통해서 __proto__ : Object 가 확인 되는 것을 알수 있습니다.

따라서 '자바스크립트 객체' 로 인식 하는 것 입니다.

 

또한 Array 객체 의 경우에도 JSON.stringify()를 통해 'json 문자열' 을 만들수 있습니다.

const people = ['taein', 'jisun', 'seangu'];
console.log(people);
const peopleStr = JSON.stringify(people);
console.log(peopleStr);

첫째줄은 __proto__ : Array 로 Array 객체로 인식 한것을 확인 할수 있습니다.

두번째줄은 '문자열'로 출력 된것을 확인 할수 있습니다.

 

4. JSON.parse() 또 다른 기능

이 함수의 2번째 인자를 통해 reviver 함수를 지정해 줄 수 있습니다.

JSON.parse(personStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

reviver 함수를 지정해 value 가 String 타입일 경우

대문자로 출력 시킬 수 있습니다.

화면에서 원하는 포맷으로 출력 시켜줄때 자주 사용할수 있는 기능 입니다.

 

5. JSON.stringify()

이 함수의 또다른 기능은 replacer 함수를 지정해 줄 수 있습니다.

function replacer(key, value) {
  if (key === 'age') {
    return undefined;
  }
  return value;
}

const personStr2 = JSON.stringify(person, replacer);
console.log(personStr2);

이런식으로 replacer 함수를 지정해 주어 필요 없는 프로퍼티를 필터링 해줄수 있습니다.

또한 프로퍼티 사이에 공간을 여백을 숫자나 문자열로 채울수 있습니다.

3번째 인자에 여백을 채울 값을 입력해 주면 됩니다.

JSON.stringify(person, null, '123');

3번째 인자에 공백을 주어 가독성도 높일수 있겠죠?