[JS] JSON & JSON.stringify & JSON.parse

---

알고있으면 좋은 Javascript Tip✨

---

JSON

• 자바스크립트의 ajax, fetch, axios등을 통해 서버로 요청(request)를 보낼 수 있다.
• 하지만 네트워크를 통해 객체를 보내기 위해서는 이 객체를 문자열로 전환해야 한다.
• JSON(Javascript Object Notation)은 값이나 객체를 나타내주는 범용 포맷이다.

 

JSON.stringify()

• JavaScript 객체를 JSON 문자열로 변환해준다.
• stringify() 메서드는 JavaScript 객체를 인자로 받고 JSON 문자열을 반환한다.

// 객체를 obj이라는 변수에 저장
const obj = {
  name: "홍길동",
  age: 25,
  married: false,
  family: {
    father: "홍판서",
    mother: "춘섬",
  },
  hobbies: ["독서", "도술"],
  jobs: null,
};


// JSON.stringify() 메서드에 obj를 인자로 넘겨 호출
const str = JSON.stringify(obj);

// {
     "name":"홍길동",
     "age":25,
     "married":false,
     "family":{
               "father":"홍판서",
               "mother":"춘섬"
               },
     "hobbies":["독서","도술"],
     "jobs":null
   }
console.log(str);

 

JSON.parse()

• JSON 문자열을 JavaScript 객체로 변환할 때는 JSON 객체의 parse() 메서드를 사용한다.
• parse() 메서드는 JSON 문자열을 인자로 받고 결과값으로 JavaScript 객체를 반환한다.

// JSON 문자열을 변수에 저장
const str = `{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": { "father": "홍판서", "mother": "춘섬" },
  "hobbies": ["독서", "도술"],
  "jobs": null
}`;


// JSON.parse() str을 인자로 넘겨 메서드 호출
const obj = JSON.parse(str);

// 객체의 형태로 변환되어 출력
console.log(obj);


// 결과
{
    name: "홍길동",
    age: 25,
    married: false,
    family: {
        father: "홍판서",
        mother: "춘섬"
    },
    hobbies: [
        "독서",
        "도술"
    ],
    jobs: null
}