B27: JSON 메서드

목차

1. JSON

2. JSON.stringify

3. JSON.parse

---

1. JSON

JSON(JavaScript Object Notation)은 값, 객체를 나타내주는 범용 포맷이다.

 

객체를 어딘가로 전송하거나 출력할 때, 객체를 문자열로 전환해야한다.

이 작업을 객체가 달라질 때마다 toString()으로 하기에는 너무 까다로운데, 이럴 때 JSON 관련 메서드를 사용해서 작업할 수 있다.

• JSON.stringify : 객체 → JSON 변환
• JSON.parse : JSON → 객체 변환

 

---

2. JSON.stringify

 

JSON.stringify() 메서드에 인자로 객체/원시값을 넘기면 변환된 문자열을 얻을 수 있다.

이 문자열은 JSON-encoded, serialized, stringified, marshalled 객체라고 부른다.

문자열로 변환된 객체는 네트워크로 전송하거나, 저장소에 저장할 수 있다.

• 문자열은 큰따옴표로 감싸야 한다.
• 객체 프로퍼티 이름은 큰따옴표로 감싸야 한다.

 

1. JSON.stringify 문법

let json = JSON.stringify(value, [replacer, space]);

• value : 인코딩 하려는 값
• replacer : JSON으로 인코딩하길 원하는 배열/매핑 함수
• space : 서식 변경 목적으로 사용할 공백 문자 수

대다수의 경우, 인수를 한 개만 넘겨서 사용하나,

전환 프로세스를 정교하게 조정하려면 두 번째 인수(배열)을 사용해야한다.

 

✅ 인수 하나만 넘기는 경우

let student = {
  name: 'John',
  age: 30,
  isAdmin: false,
  courses: ['html', 'css', 'js'],
  wife: null
};

let json = JSON.stringify(student);

console.log(typeof json);	// string
console.log(json);
/*
{
  "name": "John",
  "age": 30,
  "isAdmin": false,
  "courses": ["html", "css", "js"],
  "wife": null
}
*/

JSON.stringify에 객체 하나만 인수로 넘겨서 문자열로 바꿨다.

 

 

✅ 인수를 두 개 넘기는 경우

JSON.stringify를 사용할 때 순환 참조가 있으면 문자열로 바꿀 수 없다.

let a = { number: 23 };

let b = { string = "hi" };

a.string = b;
b.number = a;

JSON.stringify(a);	// Error: Converting circular structure to JSON

 

이런 경우 JSON으로 변환하길 원하는 프로퍼티가 담긴 배열을 두번째 인수로 넘겨준다.

let a = { thisisa: 23 };
let b = { 
  string: 'hi',
  string2: 'hello',
  arr:[{name: "bang", {name: "kim"}],
  number: a
};

a.ref = b;
console.log( Json.stringify(b, ['string', 'arr']) );
// {"string":"hi","arr":[{},{}]}

console.log( JSON.stringify(b, ['string', 'string2', 'arr', 'number', 'name']);
/*
{
  "string":"hi",
  "string2":"hello",
  "arr":[{"name":"bang"},{"name":"kim"}],
  "number":{"thisisa":23}
}
*/

console.log( JSON.stringify(b, function replacer(key, value) {
  console.log(`${key}: ${value}` );
  return (key == 'ref') ? undefined : value;
}));

/* replacer 함수에서 처리하는 key:value 쌍 목록을 출력
:  [object Object]
string:  hi
string2: hello
arr: [object Object], [object Object]
0: [object Object]
name: bang
1: [object Object]
name: kim
number: [object Object]
thisisa: 23
*/

마지막 출력물에서 : [object Object]가 뜨는 이유는 함수가 최초 호출될 때 {"":b} 형태의 래퍼 객체가 생성되기 때문이다.

위에서 replacer 함수가 가장 처음으로 처리하는 (key, value) 쌍에서 key(빈 문자열) : value(반환하려는 객체 b)가 되는 것이다.

 

 

---

3. JSON.parse

JSON.parse를 사용하면 JSON으로 인코딩된 객체를 다시 객체로 디코딩 할 수 있다.

 

1. JSON.parse 문법

let value = JSON.parse(str, [reviver]);

 

• str : JSON 형식의 문자열
• reviver : 모든 (key, value) 쌍을 대상으로 호출되는 function(key, value) 형태의 함수로, 값을 변경시킬 수 있음

// 문자열로 변환된 배열
let numbers = "[0, 1, 2, 3]";

numbers = JSON.parse(numbers);

console.log( numbers[1] );	// 1

 

중첩 객체에 사용할 수도 있다.

let userData = '{ "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }';

let user = JSON.parse(userData);

alert( user.friends[1] ); // 1

 

✅ 두번째 인수 reviver 사용 예시

전송받은 객체 문자열을 JSON.parse로 객체로 다시 변환할 때,

그냥 JSON.parse(str)과 같이 작성하면 에러가 발생한다.

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str);

alert( meetup.date.getDate() );

 

 

meetup.date의 값은 문자열이기 때문이다.

두번째 인수로 함수를 전달하고, 함수를 구현해서 객체로 반환하도록 할 수 있다.

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

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

alert( meetup.date.getDate() );


// 중첩 객체 적용
let schedule = `{
  "meetups": [
    {"title":"Conference","date":"2017-11-30T12:00:00.000Z"},
    {"title":"Birthday","date":"2017-04-18T12:00:00.000Z"}
  ]
}`;

schedule = JSON.parse(schedule, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

alert( schedule.meetups[1].date.getDate() );

 

 

 

 

 

 

참고

https://ko.javascript.info/json

JSON과 메서드