JSON개념과 내장함수 JSON.stringfy(), JSON.parse()

JSON 이란? 🤨

JavaScript Object Notation. (Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷)
객체 리터럴과 매우 흡사하지만 순수한 텍스트로 구성된 데이터 형식이다.
데이터를 교환하거나 저장하기 위한 문법

• 일반 자바스크립트의 객체처럼 원하는 만큼 중첩시켜서 사용할 수도 있다.
• JSON 형식에서는 null, number, string, array, object, boolean을 사용할 수 있다.
• JSON 객체를 .json 확장자를 가진 단순 텍스트 파일에 저장할 수 있으며 MIME 타입은 application/json 이다.
• JSON은 순수히 데이터 포맷으로 오직 프로퍼티만 담을 수 있다. 메서드는 담을 수 없다
• JSON은 문자열과 프로퍼티의 이름 작성시 큰 따옴표만을 사용해야 한다.
• 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있다.
• 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다

// 예시

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
  ]
}

🔎 JSON.stringify()

자바스크립트 객체를 JSON 텍스트로 변환

이를 문자열화(Stringification)라고 한다.

let o = {
  homeTown: "Metro City",
  formed: 2016,
};

let strObject = JSON.stringify(o);
console.log(typeof strObject, strObject); 
// string '{"homeTown": "Metro City", "formed": 2016}'

🔎 JSON.parse()

JSON 형식의 텍스트를 자바스크립트 객체로 변환

서버로부터 전송된 JSON 데이터는 문자열이다.
이 문자열을 객체화하여야 하는데 이를 역직렬화(Deserializing) 또는 파싱(Parsing)이라고 하며 이에 사용되는 내장함수이다.

// strObject '{"homeTown": "Metro City", "formed": 2016}'
let obj = JSON.parse(strObject);
console.log(typeof obj, obj); 
// object { homeTown: "Metro City", formed: 2016 }
console.log(obj.formed)
// 2016