[심화] JSON.stringify / JSON.parse에 대해 알아보자

JSON.stringify( ) / JSON.parse( )

JSON.stringify( )

⸰ JavaScript 객체를 JSON 형식의 문자열로 변환

⸰ JavaScript 객체를 서버로 전송하거나, 로컬 저장소에 저장하기 위해 필요한 작업 > 데이터를 일관된 형식으로 전송 가능

 

형식

JSON.stringify(value, replacer, space)

⸰value(필수) : JSON 문자열로 변환할 값, 배열 / 객체 / 숫자 / 문자 등 가능

⸰replacer(선택) : null이거나 없으면, 객체의 모든 속성이 JSON 문자열 결과에 포함, 함수 / 배열 가능

⸰space(선택) : 출력에 공백을 삽입, string / number 가능

 

replacer가 함수인 경우

⸰ 문자열로 바뀌는 프로세스의 작동을 변경하는 함수로 사용 가능

⸰ 문자열이 될 key, value 를 매개변수로 받음

function replacer(key, value) {
  return (typeof value === 'string' ? undefined : value);
}

let foo = {name: 'ye', nickname: 'hyun', weight: 5};
let useJson = JSON.stringify(foo, replacer);

console.log(useJson)    // {"weight":5}

‣  value가 replacer 함수를 한 번 거치고, 문자열로 바뀜

 

replacer가 배열인 경우

⸰ 배열의 값과 일치하는 값만 문자열로 바뀜

const foo = {name: 'ye', nickname: 'hyun', weight: 5};
const useJson = JSON.stringify(foo, ['nickname', 'weight']);

console.log(useJson);   // {"nickname":"ball","weight":5}

 

space가 string인 경우

⸰ 입력한 문자열이 공백으로 사용

const space = JSON.stringify({a: 2}, null, 'abc');

console.log(space);
/*
{
abc"a": 2
}
*/

 

space가 number인 경우

⸰ 입력한 숫자만큼 공백이 생김

const space = JSON.stringify({a: 2}, null, 5);

console.log(space);
/*
{
     “a”: 2
}
*/

const user = {
  name: 'ye',
  nickname: 'hyun',
  body: {
    weight: 5,
    hight: 10
  }
};
const two = JSON.stringify(user, null, 2);
const four = JSON.stringify(user, null, 4);

console.log(two);
/*
{
  "name": "ye",
  "nickname": "hyun",
  "body": {
    "weight": 5,
    "hight": 10
  }
}
*/

console.log(four);
/*
{
    "name": "ye",
    "nickname": "hyun",
    "body": {
        "weight": 5,
        "hight": 10
    }
}
*/

 

JSON.stringify( )

⸰ 서버에서 받은 문자열 형태의 데이터를 JavaScript 객체로 변환

 

형식

JSON.parse(string, [reviver]);

⸰string: JSON 형태의 문자열

⸰reviver: 모든 key, value 쌍을 대상으로 호출되는 function(key, value) 형태의 함수로 값 변경 가능

 

reviver

const str = '{"title": "Conference", "date":"2024-07-18-30T12:00:00.000Z"}';
// const meetup = JSON.parse(str);

// console.log(meetup.date.getDate()); Date 객체가 아니고 문자열이므로 ERROR

const meetup = JSON.parse(str, function(key, value) {
  return (key == 'date' ? new Date(value) : value);
});

console.log(meet.up.date.getDate()); // 18