LHJ

I'm a FE developer.

18-1. JSON 오브젝트 / JSON 오브젝트 개요, JS 타입을 JSON 타입으로 변환

07 Dec 2020 » js_beginner

18-1. JSON 오브젝트 / JSON 오브젝트 개요, JS 타입을 JSON 타입으로 변환

JSON 오브젝트 개요

  • JavaScript Object Notation

    • 빌트인 오브젝트
    • new 연산자로 인스턴스 생성 불가
      인스턴스를 생성할 필요가 없습니다.
      함수가 딱 2개입니다. 인스턴스가 별로 필요가 없습니다.

  • JSON 주요 기능

    • 데이터 송수신의 변환 기준
      서버로 데이터를 보낼 때 어떻게 변환해야된다.
      서버에서 클라이언트로 보낼 땐 어떻게 변환한다.
      라는 어떤 기준을 정해놓은 겁니다.
    • 텍스트이므로 전송 속도가 빠름
    • 파일 확장자: json, txt도 사용 가능

JSON이 나오기 전에는 xml을 썼습니다.
그런데 xml은 텍스트가 아니라 오브젝트입니다.
그래서 무겁습니다.
그렇기 때문에 최근에는 JSON을 많이 사용합니다.


  • JS 데이터 타입 지원

    • 다른 언어도 JSON을 사용하지만, 완전하게 같지 않을 수도 있음
      언어에 따라 또 그 언어의 버전에 따라 지원하는 것이 있고 없는 것이 있다.
      사전에 체크를 확실하게 해야된다.

stringify()

구분데이터(값)
objectJSON 오브젝트
파라미터첫번째 파라미터: 변환 대상
두번째 파라미터: 함수 또는 배열opt
세번째 파라미터: 가독성을 위한 구분자opt
반환변환 결과

  • JS 타입을 JSON 타입의 문자열로 변환 (JSON은 문자열로 통신, 일부는 숫자도 있음)

    • JSON.stringify() 형태로 호출

  • 첫번째 파라미터

      var value = {
          book: '',
          title: 123
      }
      var result = JSON.stringify(value);
      console.log(result); // {"book":"책","title":123}
    
    1. 변환이란 큰따옴표 안에 작성되도록 만드는 것을 뜻합니다.
    2. 프로퍼티 이름인 book이 “book”으로 변환
    3. ‘책’이 “책”으로 변환
    4. 숫자는 변환하지 않습니다.

    원래 value의 book, title은 String입니다.
    그런데 따옴표로 작성 안해도 자바스크립트 엔진이 따옴표를 추가해 해석하기 때문에 따옴표를 안붙여도 되는겁니다.


      var value = ['book', '', 123];
      var result = JSON.stringify(value);
      console.log(result); // ["book","책",123]
    

    이 부분이 서버랑 반드시 체크해야될 사항입니다.
    서버에 null 값으로 가도 괜찮은지, 그리고 null 값으로 제대로 변환되어서 가는지 항상 체크하셔야됩니다.

      console.log(JSON.stringify([Infinity, NaN, null])); // [null, null, null]
      console.log(JSON.stringify([true, false])); // [true, false]
    
    1. Infinity, NaN, null은 null로 변환됩니다.
    2. true, false는 변환하지 않습니다.

      console.log(JSON.stringify(undefined)); // undefined
      console.log(JSON.stringify([undefined])); // [null]
      console.log(JSON.stringify({value: undefined})); // {}
    
    1. undefined는 작성한 곳에 따라 다르게 변환됩니다.
    2. 값 하나이면 그대로 변환
    3. 배열 안에 있으면 null로 변환
    4. 프로퍼티 값이면 프로퍼티를 제외시킴
      프로퍼티 이름도 없어지므로 주의해야 합니다.

  • 두번째 파라미터

      var data = {book: '', point: 55};
      function replace (key, value) {
          // point 값 55를 11로 변경
          return key === "point" ? 11 : value;
      }
      var result = JSON.stringify(data, replace);
      console.log(result); // {"book":"책","point":11}
    
    1. 함수에서 return한 값을 변환 값으로 사용합니다.
    2. 값을 return하지 않거나 undefined를 return하면 최종 데이터에서 제외시킵니다.
      즉, 데이터를 걸러내게 됩니다.

      var data = {book: '', point: 11, amount: 90};
      var result = JSON.stringify(data, ['book', 'amount']);
      console.log(result); // {"book":"책","amount":90}
    
    1. 배열에 프로퍼티 이름을 작성합니다.
    2. 이름이 같은 것만 result에 설정됩니다.
    3. 그래서 {point: 11}이 출력되지 않았습니다.

  • 세번째 파라미터

      var data = {sports: 'soccer', time: 90};
      var result = JSON.stringify(data, "", '\n');
      console.log(result);
        
      //{
      //
      //"sports": "soccer",
      //
      //"time": 90
      //}
    
    1. 사람이 데이터를 보기 쉽게 하기 위한 것으로 줄을 분리하여 표시합니다.

      var data = {sports: 'soccer', time: 90};
      var result = JSON.stringify(data, "", 4);
      console.log(result);
        
      //{
      //    "sports": "soccer",
      //    "time": 90
      //}
    
    1. 숫자는 들여쓰기 자릿수입니다.
    2. 숫자만큼 들여쓰기를 합니다.

      var data = {sports: 'soccer', time: 90};
      var result = JSON.stringify(data, "", "##");
      console.log(result);
        
      //{
      //##"sports": "soccer",
      //##"time": 90
      //}
    
    1. 문자열(##)을 작성하면 데이터 앞에 ##을 표시합니다.