#TIL22 (3)

JSON(JavaScript Object Notation)

• 자바스크립트의 데이터를 표현하는 하나의 포맷
• 서버와의 통신에서 데이터를 주고받는 하나의 포맷으로 사용
• JSON의 기본 자료형:

1. 숫자데이터(Number)
2. 문자데이터(String) - 큰따옴표(")만 허용
3. 논리데이터(Boolean)
4. Null
5. 객체데이터(Object)
6. 배열데이터(Array)

• 자료형에 undefined는 포함되지 않음
• JSON 문법은 속성의 이름을 큰따옴표로 묶어줘야함
• json이라는 확장자를 가지고 있는 하나의 파일은 곧 하나의 데이터이기 때문에 두개의 데이터를 동시에 명시할 수 없음(예시: 123, false 동시 사용 x)
• json이라는 파일은 사실 하나의 문자데이터

JavaScript 객체 표기법

• 자바스크립트의 객체데이터는 속성 부분에 따옴표(')로 묶어서 작성해도 무방하며 따옴표를 붙이지 않아도 됨
• 하지만 company-name 같이 속성의 이름에 특수 기호가 있으면 객체데이터의 속성으로 해석이 되지 않으므로 따옴표(')로 묶어줘야 함

const user = {
name: 'hyerin',
age: 95,
emails: [
'abcd@gmail.com',
'xyz@naver.com'
]
}

또는

const user = {
'name': 'hyerin',
'age': 95,
'emails': [
'abcd@gmail.com',
'xyz@naver.com'
]
}
console.log('user', user) //user {name: "hyerin", age: 95, emails: Array(2)}

JSON.stringify()

• JSON은 자바스크립트 전체의 영역에서 사용할 수 있는 하나의 전역 객체
• JSON.stringify() 메소드는 JavaScript 값이나 객체를 JSON 문자열로 변환시켜 줌
• 다시말해 자바스크립트 파일 내부의 어떠한 특정 데이터를 JSON의 형태로, 즉 JSON의 포맷으로 문자데이터화 시켜주는 메소드
• 인수 부분에 객체데이터 뿐만아니라 JavaScript 파일에서 사용할 수 있는 모든데이터를 stringify의 인수로 사용해서 JSON포맷으로(문자데이터로) 만들어 활용할 수 있음

const str = JSON.stringify(user)
console.log('str', str) //str {"name": "hyerin","age": 95,"emails": ["abcd@gmail.com","xyz@naver.com"]}

• 속성 부분이 큰따옴표(")로 묶여 있음

console.log(typeof str) //string

• JSON이라는 포맷은 하나의 문자데이터로만 관리됨

JSON.parse()

• JSON.parse() 메소드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성함
• 즉, 문자데이터를 JSON.parse()를 이용해서 다시 자바스크립트의 실제데이터로 변경 시킴
• 아래와 같이, 그렇게 만들어진 문자데이터를 JSON이라는 전역객체의 parse메소드에 인수로 넣어서 분석한 후 자바스크립트에서 활용할 수 있는 하나의 데이터로 재조립

const obj = JSON.parse(str)
console.log('obj', obj) //obj {name: "hyerin", age: 95, emails: Array(2)}

• 실제 객체데이터 처럼 출력됨

정리

• JSON화 하려면 JSON.stringify()메소드를 통해 문자데이터로 변경 시킴
• 반대로, 우리가 쓸 수있는 형태의 실제 자바스크립트 데이터처럼 변경하려면 JSON.parse() 사용