[JS / jQuery] JSON.stringify() 이란?

JSON.stringify(), JSON.parse() - 객체를 JSON으로, JSON을 객체로 바꾸기

JSON (JavaScript Object Notation)은 값이나 객체를 나타내주는 범용 포맷으로, RFC 4027 표준에 정의되어 있습니다.

 

JSON은 자바스크립트에서 사용할 목적으로 만들어지는 포맷이지만 라이브러리를 사용하면 자바스크립트가 아닌 언어에서도 JSON을 충분히 다룰 수 있어 JSON을 데이터 교환 목적으로 사용하는 경우가 많아 JSON을 사용해 주로 웹서버와의 데이터를 교환할 때 사용합니다.

 

자바스크립트가 제공하는 JSON 관련 메서드는 JSON.stringify()와 JSON.parse()가 있는데 

JSON.stringify 에 대해 알아보겠습니다.

 

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

 

1. value (첫 번째 파라미터)

 

✔️ 필수로 넣어야 하는 파라미터 값 입니다.

 

• JSON 문자열로 변환 할 값을 넣어줍니다 (배열, 객체, 숫자, 문자 등)
• 전달된 객체가 지닌 속성의 순서를 보장 ❌

 

👉 example

console.log(JSON.stringify({ x: 2, y: 6 }));
// result : "{"x":2,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// result : "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// result : "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2021, 0, 2, 15, 4, 5)));
// result : ""2006-01-02T15:04:05.000Z""

console.log(JSON.stringify(['coding','Moony','good']));
// result : "["coding","Moony","good"]"

console.log(JSON.stringify('hihi'));
// result : ""hihi""

 

 

 

2. replacer (두 번째 파라미터)

 

✔️ 선택 option - 생략하거나 null 값이면 JSON 문자열에 변환 없이 다 포함

 

example

👉 함수일 땐 함수를 거쳐 변환(replace function) 후 JSON 문자열에 적용합니다.

function f_upperReplace(key, value) {
	if(typeof value == "string") {
    	return value.toUpperCase();
    }
    return value;
}

var obj = {name: "Moony", loc: "seoul", age: 00};
var resultValue = JSON.stringify(obj, f_upperReplace);

console.log(resultValue); // {"name" : "MOONY", "loc" : "SEOUL", "age" : 00}

 

👉 배열일 때에는 배열의 값과 일치하는 key 값만 json 문자열에 적용합니다.

var obj = {name: "Moony", loc: "seoul", age: 00};
var useJson = JSON.stringify(obj, ["nickname", "address", "name"]);

console.log(useJson); // {"name" : "Moony"}

 

 

 

3. space (세 번째 파라미터)

 

✔️ 선택 option

• 가독성을 목적으로 JSON 문자열 출력에 공백을 삽입하는 데 사용합니다. (string 이나 number 객체 사용)
• 생략하거나 null 값이면 공백 사용이 되지 않습니다.

example

👉 String 타입의 파라미터 전달 시 입력한 문자열 공백

var obj = {name: "Moony", loc: "seoul", age: 00};
var useJson = JSON.stringify(obj, null, '>> ');

console.log(useJson); 
// {
// >> "name": "Moony",
// >> "loc": "seoul",
// >> "age": 00
// }

 

👉 number 타입의 파라미터 전달 시 숫자만큼 공백

var obj = {name: "Moony", loc: "seoul", age: 00};
var useJson = JSON.stringify(obj, null, 10);

console.log(useJson); 
// {
//           "name": "Moony",
//           "loc": "seoul",
//           "age": 00
// }