JSON(JavaScript Object Notation)

JSON(JavaScript Object Notation)

 

JSON (JavaScript Object Notation) 이란?

• JSON은 자바스크립트의 객체 표기법을 제한하여 만든 텍스트 기반의 데이터 교환 표준이다.
• 즉, JSON 데이터는 자바스크립트가 자주 사용되는 웹 환경에서 사용하는 것이 유리하다.
• 자바스크립트는 JSON 데이터를 처리하기 위한 다음과 같은 메소드를 제공한다.
  1. JSON.stringify()
  2. JSON.parse()
  3. toJSON()
• 서로 다른 시스템 간 객체를 교환할 수 있다. (서버 간 통신에 유용하다. (AJAX))
• JSON은 Javascript의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언 그리고 다른 객체를 포함할 수 있다.
• { key: value } 형식이다.
  • 문자열은 “”로, 배열은 [ ]로 묶여야 한다.

  {
  	"name": "Hizini",
  	"job": "Front-end Developer",
  	"age": 3,
  	"hobby" : [
  		"Design",
  		"Games"
  	]
  }
  

 

JSON VS JavaScript Object

• JSON : 객체의 내용을 기술하기 위한 text 파일이다. (“파일” 이기 때문에 .json인 파일이 존재한다.)
• Object : JS Engine 메모리 안에 있는 데이터 구조이다.

const json = `{"data":[{"name":"Hizini","info":["Developer","3"]}]}`

const obj = {data:[{name:'Hizini',info:['Developer','3']}]}

• JSON : 모든 키 를 “” 로 묶어야 한다. (type 형태는 기본적으로 string 이며 함수를 값으로 할당할 수 없다.)
• Object : “”로 묶지 않아도 된다. (type 형태는 object이다.)

---

💡 HTTP 통신을 할 때 Object가 아닌 JSON으로 서버와 클라이언트 데이터를 주고 받기 때문에 프론트에서 JSON 데이터를 가공하기 위해서는 Object로 변경해주는 메소드가 필요하고 백에서 JSON 양식으로 데이터를 보내기 위해 메소드가 필요하다.

• JSON을 JS Object로 파싱하기 위해서 필요한 메소드가 JSON.parse() 메소드이다.
• JS Object를 JSON으로 변환해주기 위해 필요한 것이 JSON.stringify() 메소드이다. 

---

 

JSON.stringify()

• 인수로 전달받은 자바스크립트 객체를 문자열로 변환하여 반환한다.
• value 에는 변환할 자바스크립트 객체를 전달한다.

JSON.stringify(value) // 문법

const obj = {data:[{name:'Hizini',info:['Developer','3']}]}

str = JSON.stringify(obj)

console.log(str) // {"data":[{"name":"Hizini","info":["Developer","3"]}]}
console.log(typeof(str)) // string

 

JSON.parse()

• JSON.stringify() 메소드와는 반대로 인수로 전달받은 문자열을 자바스크립트 객체로 변환하여 반환한다.
• text에는 변환할 문자열을 전달한다. (문자열은 반드시 유효한 JSON 형식의 문자열이여야 한다.)

JSON.parse(text) //문법

const str=`{"data":[{"name":"Hizini","info":["Developer","3"]}]}`;

obj=JSON.parse(str)

console.log("My name is",str.data[0].name) // Uncaught TypeError: Cannot read property '0' of undefined
console.log("My name is",obj.data[0].name) // My name is Hizini

 

toJSON()

• 자바스크립트의 Date 객체의 데이터를 JSON 형식의 문자열로 변환하여 반환한다.
  • 접미사 Z로 식별되는 UTC 표준 시간대의 날짜를 ISO 8601 형식의 문자열로 반환한다.
  • 즉, 문자열은 언제나 24개나 27개의 문자로 이루어지며, 다음과 같은 형식을 따른다.
  • YYYY-MM-DDTHH:mm:ss.sssZ 또는 ±YYYYYY-MM-DDTHH:mm:ss.sssZ

YYYY-MM-DDTHH:mm:ss.sssZ
또는
±YYYYYY-MM-DDTHH:mm:ss.sssZ

• Date.prototype 객체에서만 사용할 수 있다.

const date = new Date()   // Wed Jan 26 2022 18:59:20 GMT+0900 (한국 표준시)
const str = date.toJSON() // 2022-01-26T09:59:20.660Z