[Javascript] JSON stringify

JSON.stringify()

JSON 객체를 다루면서 많이 사용하는 메소드 중의 하나가 stringify와 parse일 것이다. 자바스크립트는 객체를 다른 변수에 할당할 때 기본적으로 주소값을 참조하기 때문에(call by reference) 객체를 복사하기 위해(call by value) 이 두 메소드를 자주 사용하곤 한다.

 

자주 사용하긴 하지만 다른 용도로 사용해본 적이 없어서, 혹은 정말 목적에 맞게 stringify 할 상황을 맞닥뜨리지 못해서 이 메소드의 사용법을 잘 모르고 지나쳤을지도 모른다.

 

이번 기회에 stringify 메소드에 대해 다시 명확하게 정리해본다.

 

JSON 표준 내장 객체의 stringify 메소드

stringify() 메소드는 3개의 매개변수가 존재한다.

 

JSON.stringify(value[, replacer[, space]])

value

Number, String, Boolean은 기본 String 값으로 변환된다.

Array, JSON 객체는 아래 예시처럼 String화 하여 출력된다.

// Array
JSON.stringify([1, 'type check', true]); 
// 출력
"[1,"type check",true]"

// JSON
JSON.stringify({a: "aaa", b: 55, c: ' ', d: true}); 
// 출력
"{"a":"aaa","b":55,"c":" ","d":true}"

// JSON Array value
JSON.stringify({a: "aaa", b: 55, c: ' ', d: [ 'a', 'b', 'c', 'd']});
// 출력
"{"a":"aaa","b":55,"c":" ","d":["a","b","c","d"]}"

// 중첩 JSON
JSON.stringify({a: "aaa", b: 55, c: ' ', d: {e: "nexted", fg: 876, hijk: false}});
// 출력
"{"a":"aaa","b":55,"c":" ","d":{"e":"nexted","fg":876,"hijk":false}}"

replacer

함수와 배열로 특정 값을 filtering 하거나 대체할 수 있다.

 

함수를 매개변수 값으로 사용할 때는 함수의 인자로 key, value를 받는다.

단, 순회 시 첫번째 값은 key 값이 없는 상태로 value값에 입력받은 JSON 객체 전체가 넘어온다.

// 함수 replacer
function replacer(key, value) { 
	console.log('Key', key);
    console.log('Value', value);

    return value; 
}

JSON.stringify({a: "aaa", b: 55, c: ' ', d: true}, replacer);

// 출력
// 첫번째 인자
Key 
Value {a: "aaa", b: 55, c: " ", d: true}
// 두번째부터 순회 시작
Key a
Value aaa
Key b
Value 55
Key c
Value  
Key d

배열로 매개변수 입력 시 JSON 키값을 배열로 입력하면 해당 키값만 stringify하여 반환한다.

JSON.stringify({a: "aaa", b: 55, c: ' ', d: true}, ['c', 'd']);
"{"c":" ","d":true}"

// 배열 replacer
JSON.stringify({a: "aaa", b: 55, c: ' ', d: true}, ['c', 'd']);
// 출력
"{"c":" ","d":true}"

space

최종 string 값의 간격을 조정합니다. 숫자 또는 문자열 입력이 가능합니다.

숫자는 최대 10, 문자열도 최대 10자까지(10 이상은 앞에 10자 입력) 입력하여 들여쓰기 됩니다.

 

// 숫자 예
JSON.stringify({a: "aaa", b: 55, c: ' ', d: true}, null, 1);
// 출력
"{
 "a": "aaa",
 "b": 55,
 "c": " ",
 "d": true
}"

JSON.stringify({a: "aaa", b: 55, c: ' ', d: true}, null, 4);
// 출력
"{
    "a": "aaa",
    "b": 55,
    "c": " ",
    "d": true
}"

// 문자열 예
JSON.stringify({a: "aaa", b: 55, c: ' ', d: true}, null, 'abcdefghijklmnopqrstu');
// 출력
"{
abcdefghij"a": "aaa",
abcdefghij"b": 55,
abcdefghij"c": " ",
abcdefghij"d": true
}"

// 출력(공백 문자)
JSON.stringify({a: "aaa", b: 55, c: ' ', d: true}, null, '      ');
"{
      "a": "aaa",
      "b": 55,
      "c": " ",
      "d": true
}"

// 출력(escape 문자)
JSON.stringify({a: "aaa", b: 55, c: ' ', d: true}, null, '\t');
"{
	"a": "aaa",
	"b": 55,
	"c": " ",
	"d": true
}"

References

MDN: developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify