[java] JSON(JavaScript Object Notation)과 JavaScript Object 차이
JSON(JavaScript Object Notation)과 JavaScript Object 차이
JSON Object (JavaScript Object)
- JS Engine 메모리 안에 있는 데이터 구조
JSON (JavaScript Object Notation)
- 객체의 내용을 기술하기 위한 text 파일
- lightweight data-interchange format (가벼운 데이터 교환 형식)
- It is easy for humans to read and write. (인간이 읽고 쓰는 것은 쉽다.)
- It is easy for machines to parse and generate. (기계가 쉽게 구문 분석하고 생성할 수 있습니다. )
JSON 객체는 JSON(JavaScript Object Notation)을 분석하거나 값을 JSON으로 변환하는 메서드를 가지고 있습니다.
이 메서드를 통해서 알 수 있는 것은 JavaScript Object로 HTTP 통신하는 것이 아니라, 서버와 클라이언트가 JSON으로 데이터를 주고 받는다는 것입니다.
우리가 HTTP 통신을 할 때에는 JS Object가 아닌 JSON으로 서버와 클라이언트 데이터를 주고받는 것이기 때문에
프런트엔드에서 JSON 데이터를 가공하기 위해서는JS Object로 변경해주는 메소드가 필요한 것이고,
백엔드에서 JSON 양식으로 데이터를 보내기 위해서도 메서드가 필요한 것입니다.
- JSON을 JS Object로 파싱하기 위해서 필요한 메서드가 JSON.parse() 메소드입니다.
- JS Object를 JSON으로 변환해주기 위해 필요한 것이 JSON.stringify() 메서드입니다.
// JSON
const str=`{"data":[{"name":"yongseong","info":["student","27"]}]}`;
// JSON Object
const obj = {data:[{name:'yongseong',info:['student','27']}]};
str이라는 변수에 할당된 것은 JSON 형태이고, obj라는 변수에 할당 된 것은 JavaScript Object 형태입니다.
- JSON에서는 모든 키를 따옴표로 묶어야 하지만, JavaScript object에서는 이것이 필요하지 않습니다.
- JSON의 type 형태는 기본적으로 string입니다.
- JSON은 함수를 값으로 할당할 수 없습니다.
JSON.parse()
JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다.
즉, JSON.parse()는 JSON을 JavaScript Object로 변경해주기 위해 사용되는 메서드입니다.
const str=`{"data":[{"name":"yongseong","info":["student","27"]}]}`;
obj=JSON.parse(str)
console.log(str.data[0].name) // Uncaught TypeError: Cannot read property '0' of undefined
console.log(obj.data[0].name) // yongseong
console.log(typeof(obj)) // object
JSON.stringify()
JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. JSON.stringify()로는 JSON.parse()와 반대의 과정을 수행할 수 있습니다.
const obj = {data:[{name:'yongseong',info:['student','27']}]};
str=JSON.stringify(obj)
console.log(str) //{"data":[{"name":"yongseong","info":["student","27"]}]}
console.log(typeof(str)) //string
출처 : https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON [ JSON 정의 및 구조 ]
출처 : https://www.json.org/json-en.html [ JSON 구조 ]
출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse [ JSON.parse() ]
출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify [ JSON.stringify() ]
출처 : https://www.daleseo.com/js-json/