JSON (JavaScript Object Notation)

값이나 객체를 나타내주는 범용 포맷으로 js에서 사용할 목적으로 만들어진 포맷이나 현재 다른 언어에서도 json을 많이 이용하고 있다.

JSON 포맷

• 프로퍼티 이름(key)과 값(value)는 큰따옴표로 감싸야한다. (작은 따옴표 x)

• new를 사용할 수 없다.

관련 매서드

• JSON.stringify(obj) : 객체를 JSON으로 변환

  • 함수 파라미터

    let json = JSON.stringify(value[, replacer, space])

    • value : 인코딩 하려는 값

      let student = {
        name: 'John',
        age: 30,
        isAdmin: false,
        courses: ['html', 'css', 'js'],
        wife: null,
      };
      let json = JSON.stringify(student);
      
      alert(typeof json); // string
      alert(json);
      /* JSON으로 인코딩된 객체:
      {
          "name": "John",
          "age": 30,
          "isAdmin": false,
          "courses": ["html", "css", "js"],
          "wife": null
      }
      */

    • replacer : 인코딩 하길 원하는 프로퍼티가 담긴 배열 or 매핑 함수

      순환 참조를 다뤄야 하는 경우에 정교하게 조정하기 위해 사용

      let room = {
        number: 23,
      };
      
      let meetup = {
        title: 'Conference',
        participants: [{ name: 'John' }, { name: 'Alice' }],
        place: room, // meetup은 room을 참조합니다
      };
      
      room.occupiedBy = meetup; // room은 meetup을 참조합니다
      
      alert(
        JSON.stringify(meetup, function replacer(key, value) {
          alert(`${key}: ${value}`);
          return key == 'occupiedBy' ? undefined : value;
        })
      );
      
      alert(JSON.stringify(meetup, ['title', 'participants', 'place', 'name', 'number']));

    • space : 서식 변경 목적으로 사용할 공백 문자 수

      let user = {
        name: 'John',
        age: 25,
        roles: {
          isAdmin: false,
          isEditor: true,
        },
      };
      
      alert(JSON.stringify(user, null, 2));
      /* 
      {
          "name": "John",
          "age": 25,
          "roles": {
              "isAdmin": false,
              "isEditor": true
          }
      }
      */
      
      alert(JSON.stringify(user, null, 4));
      /*
      {
          "name": "John",
          "age": 25,
          "roles": {
              "isAdmin": false,
              "isEditor": true
          }
      }
      */

  변환된 string을 JSON으로 인코딩된 | 직렬화 처리된 | 문자열로 변환된 | 결집된 객체라고 부른다.

  • 객체, 배열, 원시자료형도 적용할 수 있다.

    메서드, key가 심볼형 프로퍼티, 값이 undefiend인 프로퍼티는 무시한다.

    • 객체가 순환 참조가 있다면 변환을 실패한다. (Error)

• toJSON() : 객체 내부에 함수가 정의 되어 있으면 JSON.stringify()함수 호출시 toJSON()이 호출 된다.

• JSON.parse : JSON을 객체로 변환

  • 함수 파라미터

    let value = JSON.parse(str, [reviver]);

    • str : JSON형식의 문자열

    • reviver : 모든 (key,value) 쌍을 대상으로 호출되는 function(key,value)형태의 함수로 값을 변경시킬 수 있다.

      아래와 같이 date를 그대로 parse이용해 객체로 변환시 date정보를 Date 객체가 아닌 문자열로 받았기 때문에 meetup.date.getDate()시 에러가 발생한다.

      따라서 아래와 같이 reviver를 이용해 객체로 변환시켜줄 수 있다.

      let schedule = `{
          "meetups": [
              {"title":"Conference","date":"2017-11-30T12:00:00.000Z"},
              {"title":"Birthday","date":"2017-04-18T12:00:00.000Z"}
          ]
      }`;
      
      schedule = JSON.parse(schedule, function (key, value) {
        if (key == 'date') return new Date(value);
        return value;
      });
      
      alert(schedule.meetups[1].date.getDate());