web developer

[java] JSON(JavaScript Object Notation)과 JavaScript Object 차이 본문

Language/Java

[java] JSON(JavaScript Object Notation)과 JavaScript Object 차이

trueman 2022. 11. 16. 16:02
728x90
728x90

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/ 

 

 

728x90
728x90
Comments