JSON.stringify()

JSON 이란?

JSON은 JavaScript Object Notatin의 줄임말이고, 데이터 교환을 위해 만들어진 객체 형태의 포멧이다.
JSON 공식 문서

//JSON 예시
"name" : [
			{
				"first" : "kim",
            	"last"  : "coding"
            }
		[

JSON 데이터는 이름과 값의 쌍으로 구성 되어있다.
(이름 : 값) 형식으로 작성 해야한다.

JSON.stringify

Object type의 data를 누군가에게 보내기 위해서는 JSON 형식으로 변환하여 보낸다.
이때 stringify(JSON으로 변환하는 과정)을 serialize(직렬화)라고 한다.
직렬화된 데이터의 타입은 문자열이다.

JSON.stringify

구문

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

매개변수

• value(필수) : JSON 형식으로 변환할 데이터
  
• replacer(선택) : 함수 또는 배열이 될 수 있다. 쉽게 말하면 필터 역활

function replacer(key, value){
	if(typeof value === 'string'){
    	return undefined;
    }
    return value;
}
var user = { name : 'JSON' brith : 1999 };
var userBirth = JSON.stringify( user, replacer );
console.log(userBirth); // {"brith" : 1999}

예시에서는 replacer 함수를 string 형을 거르는 역활을 했다.

• space(선택) : 가독성을 목적으로 JSON 문자열 출력에 공백을 삽입하는데 사용한다.
  number : 최대 10자 만큼의 공백
  string : 해당문자열 또는 처음 10자 만큼 들여쓰기

JSON.stringify( { a : 2 }, null, ' ' );
//  ' {
//      "a": 2	
//  } '
---------------------------------------------------

JSON.stringify( { b : 2 }, null, '\t' );
//  ' {
// 	   		"b" : 2		
//  } '

'\t'를 사용하면 일반적으로 들여쓰기 된 코드스타일과 유사하게 만들 수 있다.

JSON.parse

수신받은 JSON 형식의 데이터를 객체의 형태로 만드는 작업.
JSON.parse를 적용하는 과정을 deserialize(역직렬화)라고 한다.

JSON.parse

구문

JSON.parse(text[, reviver])

매개변수

• text(필수) : JSON으로 변환할 문자열.

• reviver(선택) : 함수라면, 변환 결과를 반환하기 전에 이 인수에 전달해 변형한다.

JSON.parse('{ "name" : "JSON", "age" : 1999 }', ( key, value ) => 
	typeof value === 'number' ? value + 1 : value
);
// { name : "kim", age : 2000 }

예시에서는 JSON을 parse하는 과정에서 value가 숫자형일 경우, value + 1을 히여 리턴 해주는 역활을 한다.

<구현해야할 문제>

JSON.stringify()와 같은 동작을 하는 함수를 구현하라.

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해 주어야 할지 생각해 보세요.

function stringifyJSON( obj ){
	if(typeof obj === 'boolean' || typeof obj ==='number' || obj === null) 		return String(obj);
    if(typeof obj === 'string') return `"${obj}"`
  	if(typeof obj === 'undefined' || typeof obj === 'function') return 	'undefined';
  	if(Array.isArray(obj)){
    if(obj.length === 0){
      return `[]`;
    }else{
      let newArr = [];
      for(let el of obj){
        if(typeof el === 'number'){
          	newArr.push(el);
        }else if(typeof el === 'string'){
          	let str = stringifyJSON(el);
          	newArr.push(str);
        }else if(Array.isArray(el)){
          if(el.length === 0){
            newArr.push(`[]`);
          }else{
            let box = stringifyJSON(el);
            console.log(box)
            newArr.push(box);
          }
        }else if(typeof el === 'object'){
          let newObj = stringifyJSON(el);
          newArr.push(`${newObj}`)
        }
      }
      return `[${newArr}]`
    }
  }
  if(typeof obj === 'object'){
    let result = '';
    if(Object.keys(obj).length === 0){
      return `{}`
    }else{
      for(let key in obj){
        if(typeof obj[key] === 'function' || obj[key] === undefined){
          return `{}`
        }else{
          let newKey = stringifyJSON(key);
          let newVal = stringifyJSON(obj[key]);
          result = result + `${newKey}:${newVal},`;
        }
      }
      result = `{${result.slice(0, -1)}}`;
      return result;
    }
  }	
};

코드가 많이 지져분하다....
리펙토링으로 깔끔하게 다듬어야겠다.