JSON.stringify
๐ JSON.stringify
๐JSON์ ํ์ ๋ฐฐ๊ฒฝ
"JavaScript Object Notation"
๋ฐ์ดํฐ ๊ตํ์ ์ํด ๋ง๋ค์ด์ง ๊ฐ์ฒด ํํ์ ํฌ๋งท
์ ์ก ๊ฐ๋ฅํ ์กฐ๊ฑด
- ์์ ์(reciever)์ ๋ฐ์ ์(sender)๊ฐ ๊ฐ์ ํ๋ก๊ทธ๋จ์ ์ฌ์ฉํ๋ค.
- ๋๋, ๋ฌธ์์ด์ฒ๋ผ ๋ฒ์ฉ์ ์ผ๋ก ์ฝ์ ์ ์์ด์ผ ํ๋ค(String -> ํฐ๋ฐ์ดํ).
const message = {
sender: "๊น์ฝ๋ฉ",
receiver: "๋ฐํด์ปค",
message: "ํด์ปค์ผ ์ค๋ ์ ๋
๊ฐ์ด ๋จน์๋?",
createdAt: "2021-01-12 10:10:10"
}
โ๏ธโ๏ธ ๊ฐ์ฒด๋ ํ์ ๋ณํ์ ์ด์ฉํด String์ผ๋ก ๋ณํํ ๊ฒฝ์ฐ ๊ฐ์ฒด ๋ด์ฉ ํฌํจ X
JS์์ ๊ฐ์ฒด๋ฅผ ๋ฌธ์์ด๋ก ๋ณํํ๊ธฐ ์ํด ๋ฉ์๋(message.toString())๋ ํ๋ณํ(String(message))์ ์๋ํ๋ฉด
[object Object] ๋ผ๋ ๊ฒฐ๊ณผ๋ฅผ ๋ฆฌํด
๐ก ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด JSON์ ํ ๋ณํ, ๊ฐ์ฒด์ ํ ๋ณํํ๋ ๋ฐฉ๋ฒ์ด ๋์ด
- JSON.stringify : ๊ฐ์ฒด๋ฅผ JSON์ผ๋ก ๋ณํ
- JSON.parse : JSON์ ๊ฐ์ฒด๋ก ๋ณํ
// ์ด ๊ณผ์ ์ ์ง๋ ฌํ๋ผ๊ณ ํ๋ค
let transferableMessage = JSON.stringify(message)// ํ ๋ณํ ํ ๊ฒ
console.log(transferableMessage)
// `{"sender":"๊น์ฝ๋ฉ","receiver":"๋ฐํด์ปค","message":"ํด์ปค์ผ ์ค๋ ์ ๋
๊ฐ์ด ๋จน์๋?","createdAt":"2021-01-12 10:10:10"}`
console.log(typeof(transferableMessage))
// `string`
์ฌ๊ธฐ์ ๋ณํ๋ ๊ฐ์ฒด์ ํ์ ์? "๋ฌธ์์ด"
๐๐ผ ๊ทธ๋ ๋ค๋ฉด ์์ ์๋ ์ด ๋ฌธ์์ด ๋ฉ์์ง๋ฅผ ๋ค์ ๊ฐ์ฒด์ ํํ๋ก ๋ง๋ค ์ ์์๊น? JSON.parse
// ์ด ๊ณผ์ ์ ์ญ์ง๋ ฌํ
let packet = `{"sender":"๊น์ฝ๋ฉ","receiver":"๋ฐํด์ปค","message":"ํด์ปค์ผ ์ค๋ ์ ๋
๊ฐ์ด ๋จน์๋?","createdAt":"2021-01-12 10:10:10"}`
let obj = JSON.parse(packet)
console.log(obj)
/*
* {
* sender: "๊น์ฝ๋ฉ",
* receiver: "๋ฐํด์ปค",
* message: "ํด์ปค์ผ ์ค๋ ์ ๋
๊ฐ์ด ๋จน์๋?",
* createdAt: "2021-01-12 10:10:10"
* }
*/
console.log(typeof(obj))
// `object`
๐ ์ง๋ ฌํ์ ์ญ์ง๋ ฌํ ๋ชจ์๋
๐JSON์ ๊ธฐ๋ณธ ๊ท์น
๐ JSON ๊ตฌํ
์ด ํํ๊ฐ ๊ฐ๋ฅํด์ง์ ์๋๋ก json์ ๊ตฌํํด๋ณด๊ธฐ
// ์ฌ๋ฌ๋ถ์ด ๊ตฌํํ stringifyJSON์ ํ
์คํธํ๋๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
const stringifiableObjects = [
9,
null,
true,
false,
"Hello world",
[],
[8],
["hi"],
[8, "hi"],
[1, 0, -1, -0.3, 0.3, 1343.32, 3345, 0.00011999],
[8, [[], 3, 4]],
[[[["foo"]]]],
{},
{ a: "apple" },
{ foo: true, bar: false, baz: null },
{ "boolean, true": true, "boolean, false": false, null: null },
// basic nesting
{ a: { b: "c" } },
{ a: ["b", "c"] },
[{ a: "b" }, { c: "d" }],
{ a: [], c: {}, b: true },
];
stringifyJSON.js
/**
* 1. Browser์ ์กด์ฌํ๋ JSON.stringfy ํจ์๋ฅผ ์ง์ ๊ตฌํํด ๋ด
๋๋ค.
* JSON.stringfy ํจ์๋ input ๊ฐ์ JSON ํ์์ผ๋ก ๋ณํํฉ๋๋ค.
* ๋จ, undefined์ function์ JSON์ผ๋ก ์๋ต๋๊ฑฐ๋ null๋ก ๋ณํ๋ฉ๋๋ค.
*
* 2. stringfyJSON์ ์๋์ ๊ฐ์ด ์๋ํฉ๋๋ค.
* - Boolean์ด input์ผ๋ก ์ฃผ์ด์ก์ ๊ฒฝ์ฐ
* stringifyJSON(true); // 'true'
* - String์ด input์ผ๋ก ์ฃผ์ด์ก์ ๊ฒฝ์ฐ
* stringifyJSON('foo'); // '"foo"'
* - Array๊ฐ input์ผ๋ก ์ฃผ์ด์ก์ ๊ฒฝ์ฐ
* stringifyJSON([1, 'false', false]); // '[1,"false",false]'
* - Object๊ฐ input์ผ๋ก ์ฃผ์ด์ก์ ๊ฒฝ์ฐ
* stringifyJSON({ x: 5 }); // '{"x":5}'
* - undefined, function์ด ์ฃผ์ด์ก์ ๊ฒฝ์ฐ
* stringifyJSON(undefined) // undefined
* stringifyJSON(function(){}) // undefined
* stringifyJSON({ x: undefined, y: function(){} }) // '{}'
*
* 3. spec/stringifyJSONSpec.js์ stringifiableObjects ๋ฐฐ์ด์ ์ฐธ๊ณ ํด์ ํ
์คํธ์์ ์ด๋ค input ๊ฐ๋ค์ด
* ์ฃผ์ด์ง๊ณ , ์ด๋ป๊ฒ stringifyํด ์ฃผ์ด์ผ ํ ์ง ์๊ฐํด ๋ณด์ธ์.
*
* 4. ๊ทธ๋ฅ ํ
์คํธ ํต๊ณผ๋ฅผ ํ๊ณ ์ถ์ผ์๋ค๋ฉด, ๋ค์๊ณผ ๊ฐ์ด ๊ตฌํํ๋ฉด ๋ ๊ฑฐ์์.
* const stringifyJSON = JSON.stringify;
*
* ํ์ง๋ง ์ด ๊ณผ์ ์ ๋ชฉ์ ์ ์ฌ๊ท๋ฅผ ๊ณต๋ถํ๋ ๊ฒ์ด๋, ์ฒ์๋ถํฐ ๊ตฌํํด๋ด์ผ๊ฒ ์ง์?:
*/
function stringifyJSON(obj) {
// your code goes here
};
// ๋ค์ ์ฝ๋๋ ๊ฒฐ๊ณผ ์ ์ถ์ ์ํ ์ฝ๋์
๋๋ค. ์ ๊ฒฝ ์ฐ์ง ์์๋ ์ข์ต๋๋ค.
if (typeof window === "undefined") {
module.exports = stringifyJSON;
}
๐๐ผ๐๐ผ๐๐ผ
์ด ๊ตฌํ์ ์ฌ์ฉ์๊ฐ JSONํํ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ๋
์ํ๋ ํํ์ ๋ง๊ฒ ๋ฐ์ดํฐ๊ฐ ๋ค์ด์ฌ ์ ์๋๋ก ํ๋ ๊ตฌํ ๊ณผ์ ์ด๋ค
์ฒ์์๋ ๋ฌด์์ ๊ตฌํํ๋ผ๊ณ ํ๋์ง ์ ์ดํด๊ฐ ์๊ฐ๋ค,,,
์๋ํ๋ฉด ์ฌ์ค ์ด ์ฝ๋๋ฉด ๋๋๋ค....!
const stringifyJSON = JSON.stringify;
ํ์ง๋ง ๊ณต๋ถํ๋ ๊ณผ์ ์ด๋ ์ฌ๊ท๋ก ๋ฏ์ด๋ณด์
1) ๊ฐ์ฒด๋ ๋ฌธ์์ด "9"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
// obj๋ผ๋ ๊ฐ์ฒด๊ฐ ๋ฐ์ดํ ์์ ๋ string ํ์
์ผ๋ก ๋ณ๊ฒฝํ๋ ค๋ฉด
// ์กฐ๊ฑด๋ฌธ์ ๊ฑธ์ด typeof ํจ์๋ฅผ ์ฌ์ฉํด์ ํ์
์ ๋ณ๊ฒฝํด์ฃผ๋ฉด ๋๋ค
if(typeof obj === 'number'){
return '${obj}'; // string ํํ๋ฅผ ํ
ํ๋ฆฟ๋ฆฌํฐ๋ด์ ์ด์ฉํ์ฌ ํํ, String(obj)๋ก๋ ๊ฐ๋ฅ
}
2) ๊ฐ์ฒด๋ ๋ฌธ์์ด "null"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
// ๊ฐ์ฒด๊ฐ null ์ด์ฌ๋ ๋ฌธ์์ด๋ก ๋ฐํ
if(obj === 'null'){
return '${obj}'; // string ํํ๋ฅผ ํ
ํ๋ฆฟ๋ฆฌํฐ๋ด์ ์ด์ฉํ์ฌ ํํ, String(obj)๋ก๋ ๊ฐ๋ฅ
}
3) ๊ฐ์ฒด๋ ๋ฌธ์์ด "true"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
4) ๊ฐ์ฒด๋ ๋ฌธ์์ด "false"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
// true , false๋ boolean ๊ฐ์ด ๋์ผํ ๋ฐฉ๋ฒ์ผ๋ก string ํํ๋ก ๋ฐํ
// if๊ฐ ์ค์ฒฉ๋๋ ๋
ผ๋ฆฌ์ฐ์ฐ์๋ฅผ ์ด์ฉํด์ ๋ฐ๊ฟ์ฃผ์
if(typeof obj === 'number' || obj = null || typeof obj === 'boolean'){
return '${obj}';
}
5) ๊ฐ์ฒด๋ ๋ฌธ์์ด ""Hello world""๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
// string ์ผ๋ก ๋ค์ด์ค๋ฉด string์ผ๋ก ๋ฐํ
// ๊ทธ๋ฌ๋ "" "" ํํ์ด๊ธฐ์ ๋
ผ๋ฆฌ์ฐ์ฐ์๋ก ๊ฐ์ด ๋ฌถ์ด ์ค ์๋ ์๋ค
if(typeof obj === 'string'){
return '"{obj}"'; // ๋ฐ์ดํ ํ์ธ
}
6) ๊ฐ์ฒด๋ ๋ฌธ์์ด "[]"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
7) ๊ฐ์ฒด๋ ๋ฌธ์์ด "[8]"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
8) ๊ฐ์ฒด๋ ๋ฌธ์์ด "["hi"]"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
9) ๊ฐ์ฒด๋ ๋ฌธ์์ด "[8,"hi"]"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
10) ๊ฐ์ฒด๋ ๋ฌธ์์ด "[1,0,-1,-0.3,0.3,1343.32,3345,0.00011999]"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
11) ๊ฐ์ฒด๋ ๋ฌธ์์ด "[8,[[],3,4]]"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
12) ๊ฐ์ฒด๋ ๋ฌธ์์ด "[[[["foo"]]]]"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
// []๊ดํธ๋ ๋ฐฐ์ด์ ๋ปํ๋ค
// ๋ฐฐ์ด์์ ๋ญ๊ฐ ๋ค์ด์ค๋ ๋ฐฐ์ด์์ ๊ฐ์ ๋ฐ์์ฃผ์ด ์๋ก์ด ๋ฐฐ์ด๋ก ๋ฐํํ๋ฉด ๋๋ค
if(Array.isArray(obj)){ // ๋ค์ด์ค๋ ๊ฐ์ด ๋ฐฐ์ด์ธ์ง ์๋์ง ์กฐ๊ฑด๋ฌธ์ ๊ฑธ์ด์ฃผ์
let newArr = [] // ์๋ก์ด ๋ฐฐ์ด ์ ์ธ
for(let el of obj){
let arrEl = stringifyJSON(el) // ๊ฐ์ฒด -> ๋ฌธ์์ด๋ก ๋ฐ๊ฟ์ฃผ๋ ๋ฉ์๋
newArr.push(arrEl) // pop๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฐ์ด ๋ง์ง๋ง์ ๊ฐ ์ถ๊ฐ
}
return '{${newArr}}' // ํ
ํ๋ฆฟ๋ฆฌํฐ๋ด์ ์จ์ string ํ์
์ผ๋ก ๋ฐํ
}
13) ๊ฐ์ฒด๋ ๋ฌธ์์ด "{}"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
14) ๊ฐ์ฒด๋ ๋ฌธ์์ด "{"a":"apple"}"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
15) ๊ฐ์ฒด๋ ๋ฌธ์์ด "{"foo":true,"bar":false,"baz":null}"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
16) ๊ฐ์ฒด๋ ๋ฌธ์์ด "{"boolean, true":true,"boolean, false":false,"null":null}"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
17) ๊ฐ์ฒด๋ ๋ฌธ์์ด "{"a":{"b":"c"}}"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
18) ๊ฐ์ฒด๋ ๋ฌธ์์ด "{"a":["b","c"]}"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
19) ๊ฐ์ฒด๋ ๋ฌธ์์ด "[{"a":"b"},{"c":"d"}]"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
20) ๊ฐ์ฒด๋ ๋ฌธ์์ด "{"a":[],"c":{},"b":true}"๋ก ๋ณํ๋์ด์ผ ํฉ๋๋ค
21) ํจ์์ undefined๋ stringify๋์ง ์์ต๋๋ค.
// {} ๋ ๊ฐ์ฒด๋ฅผ ๋ปํ๋ค
// ๋ฐฐ์ด๊ณผ ๋น์ทํ๊ฒ ์๊ฐํ๋ฉด๋์ง๋ง ๊ฐ์ฒด๋ ๊ฐ์ฒด ํํ๋ฅผ ๋ง๋ค์ด์ค์ stringํ์
์ผ๋ก ๋ฐํํ๋ ๊ฒ์ ์์ง๋ง์
if(typeof obj === 'object'){ // ๊ฐ์ฒด์ ํํ๋ object
let newobj = ''; // ์๋ก์ด ๊ฐ์ฒด๋ฅผ ์ ์ธi
for(let key in obj){
let objKey = StringifyJSON(ley) // ๊ฐ์ฒด์ key๋ฅผ stringํ์
์ผ๋ก ๋ฐํ
let objVal = stringifyJSON(obj[key]) // key์ ๋ง๋ value๊ฐ์ stringํ์
์ผ๋ก ๋ฐํ
// ํจ์์ undefined๋ stringify๋์ง ์์ต๋๋ค.
if(objKey === undefined || typeof objVal == 'function' || objVal === undefined){
newObj = ' '
}else{
newObj += '${objKey}:${objVal},'// {"a":"b"},{"c":"d"} ์ฝค๋ง๋ถ๋ถ ์์ง๋ง์
}
}
//begin๋ถํฐ end ์ ๊น์ง์ ๋ณต์ฌ๋ณธ์ ์๋ก์ด ๋ฐฐ์ด
// ๋ง์ง๋ง ์ฝค๋ง๋ ์ ๊ฑฐ ํ ๋ฐํํ๊ธฐ ์ํด
return '{${newObj.slice(o,newObj.length-1)}}'
}
๐๐ผ ๐๐ผ ๐๐ผ json์ด ์ด๋ ํ ๋ฐฉ์์ผ๋ก ๋ฐํ๋๊ณ ๊ฐ์ ๋ฐ๋์ง ์ ์ ์๋ ๊ธฐํ์๋ค