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이 어떠한 방식으로 반환되고 값을 받는지 알 수 있는 기회였다