[JS] JSON(JavasScript Object Notation)에 대해 알아보자

반응형

728x90

JSON(JavasScript Object Notation)은 자바스크립트의 객체를 문자열로 표현하는 방법이다. 

매우 직관적이고, 사람이 읽고 쓰기에도 편하다는 장점이 있다. 

 

 

JSON 데이터를 사용하는 과정

---

1. 서버는 브라우저로 데이터를 보낼 때 JSON 형태로 전송한다. 

2. 데이터를 수신한 브라우저는 자바스크립트를 통해 파싱하고 문서에 반영한다. 

 

 

 

객체를 문자열로 변경하는 법 => JSON.stringify()

---

let pi = 3.14;
let str = 'string';

JSON.stringify(pi); // "3.14"
JSON.stringify(str); // ""string""

문자열로 값이 반환되는 것을 확인할 수 있다.

 

 

배열을 JSON.stringify() 하면 어떻게 될까?

---

let arr = ["문자열", 3.14, true, null, undefined, function a(){console.log("method"}]

JSON.stringify(arr); // "["문자열", 3.14, true, null, null, null]"

여기서 확인해볼 수 있는게 undefined와 메소드는 누락되어 null로 확인된다. 

JSON은 자바스크립트 객체에 담긴 데이터만(위의 예제에서 arr) 문자열로 변환하고, 다시 객체로 변환 기능을 수행하기 때문에 객체에 정의되어 있던 메소드나 undefined는 변환되지 않기 때문이다. 

 

 

 

문자열을 객체로 변경하는 법 => JSON.parse()

---

JSON.parse("3.14"); // 3.14
JSON.parse("\"string\""); // "string"

 

 

 

객체를 JSON.parse() 하면 어떻게 될까?

---

let obj = {
  str: '문자열',
  num: 3.14,
  boolean: true,
  null: null,
  undefined: undefined,
  method: function a() {console.log('method');},
};

let test = JSON.stringify(obj); // "{"str": "문자열", "num": 3.14, "boolean": true, "null": null,}"
JSON.parse(test); // {str: '문자열', num: 3.14, boolean: true, null: null}

마찬가지로 반환값을 확인해보면 undefined와 null은 누락된 것을 확인할 수 있다. 

 

 

 

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖