[JavaScript]JSON.stringify와 JSON.parse

자바스크립트 객체를 JSON형식으로 혹은 JSON형식을 자바스크립트 객체로 변환해야하는 상황이 발생하는데 

그럴 때 사용할 수 있는 함수가 JSON.stringify(), JSON.parse()

 

1. Object to JSON 

var json = JSON.stringify(['apple', 'banana']);
console.log(json)

결과는? 

JSON 형식으로의 변환

자바스크립트 객체일 경우는?

// json Object 
const rabbit = {
  name : 'tori'
  ,color : 'white'
  ,size : null
  ,birthdate : new Date() 
  // 함수는 object의 데이터가 아니므로 자동으로 제외 
  ,jump : () =>  {
    console.log('${this.name} can jump!');
 }
};json = JSON.stringify(rabbit);console.log(json);

쌍따옴표로 이쁘게 담긴 JSON!

하지만 함수는 자동으로 제외된다.

 

json = JSON.stringify(rabbit, ['name', 'color', 'size']);

 

두번째 파라미터로 변환시키려는 key값의 배열을 주면 해당 key값의 key, value만 변환된다. 

 

 

2. JSON to Object 

stringify() 로 JSON형식이된 rabbit객체를 다시 자바스크립트객체로 변환하려면? 

console.log(JSON.parse(json));

결과는?

자바스크립트 객체 ! 

하지만 Date 객체를 가지고 있는 brithdate는 obj.birthdate.getDate()와 같은 객체 자체로써 사용할 수 없는데 

이유는 함수가 아닌 문자열로 변환이 되어 넘어왔기때문이다. 

 

그래서 함수 자체로 사용을 해야 한다고 한다면 

 

JSON.parse() 의 두 번째 파라미터를 사용하여 처리할 수 있다. 

 

const obj = JSON.parse(json, (key, value) => {
    return key == 'birthdate' ? new Date(value) :value;
 
});

반복을 통해 key가 brithdate일 경우 DATE 객체를 할당하도록 처리하여 사용할 수 있다. 

 

정리하면

Object to JSON => JSON.stringify()

JSON to Object => JSON.parse() 

 

학습 소스 

www.youtube.com/watch?v=FN_D4Ihs3LE&list=PL7tYQHvg8FoDq8B7XbA1U7u1OOx9IxXmy&index=15&t=1105s

좋은 정보가 많은 채널이다.