JSON 이란?
JSON 은 표준 데이터 포맷 중 하나이다. 여기서 데이터는 어떠한 이론의 토대이자 기초가 되는 자료 혹은 사실을 의미하며, 포맷은 쉽게 말해 형태를 잡는 다는 것이다. 즉, JSON은 중구난방으로 퍼져있는 데이터를 필요에 따라 활용하기 쉽도록 구조화된(규칙적이고, 모양이 갖춰진) 형태로 표현하기 위한 표준이 되는 포맷 이다.
흔히 JSON 을 가볍다, 혹은 플랫폼 독립적이라고 많이 표현하는데, 말 그대로 네트워크를 통해 전송할 때 빠르고, 편하며, 어떤 언어 환경에서도 사용할 수 있기 때문에 그리 불리는 것 같다.
JSON은 JavaScript Object Notation 을 줄인말로 이름 그대로 자바스크립트 객체를 표기하는 방법을 의미한다.
이러한 JSON 의 형태는 자바스크립트에서 객체를 표기하는 방법 중 객체 리터럴 형태와 유사하며, 키와 값을 쌍으로 구성한 다음과 같은 형태를 취한다.
JSON 에서 허용되는 자료형
JSON은 자바스크립트의 객체 리터럴 형태와 유사하지만, 약간 차이점이 있다. 예를 들어 JSON은 undefined 를 포함하지 않는다.
예를 들어, 자바스크립트의 객체 리터럴에서는 undefined 이 객체 리터럴을 구성하는 프로퍼티 값으로 구성할 수 있다. 즉, 다음과 같은 객체 리터럴이 있다고 가정할 때,
let obj ={
undefined : undefined,
}
console.log(obj.undefined);
이대로 출력한다면, undefined 가 정상적으로 출력이 된다.
출력결과)
undefined
하지만 JSON 에서는 undefined 를 무시한다. 즉, 일반 객체 리터럴에서 JSON 으로 변환하면, 제외시킨다. 이를 다음 코드의 결과를 보고 살펴보자.
let obj ={
undefined : undefined,
age : 30
}
const objJSON = JSON.stringify(obj)
console.log(objJSON)
출력결과)
{"age":30} //undefined 는 무시되고, 그 다음 프로퍼티 키와 값의 쌍이 JSON 으로 변환되었다.
이렇듯, 자바스크립트에서 허용되는 자료형이 JSON 에서는 무시되는 것을 확인할 수 있다.
이 외에도 허용되는 자료형과 허용되지 않는 자료형은 많은데 이를 표로 정리하면 다음과 같다.
JSON 과 관련한 자바스크립트 메서드 두 가지
자바스크립트에서 JSON 파일을 파싱하여 객체 리터럴로 만들기 위한 메서드와 JSON 형태로 객체 리터럴을 변환시키는 메서드가 존재한다. 각각 JSON.parse() 와 JSON.stringify() 메서드이다.
1) JSON.parse( JSON 명 )
이 메서드를 사용하면 JSON 형태의 문자열을 자바스크립트의 값이나 객체 형태로 변환해준다. 즉, JSON 형태의 문자열을 구성하는 구문을 모두 분석하고, 자바스크립트 문법 규정에 토대가 되는 ECMASciprt 의 값을 생성하고, 분석이 완료되는 순간 객체로 변환해 준다. 즉, ECMAScript 에서 규정하고 있는 타입과 일치하면 이를 자바스크립트의 배열, 문자열, 불리언 ,null 등의 형태로 변환해준다는 것이다.
2) JSON.stringify( 객체 리터럴 명 )
이 메서드를 사용하면 일반적인 자바스크립트 객체 리터럴을 JSON 형태로 변환해준다. 이 때 몇 가지 참조하는 규칙이 존재하는데, 불린, 문자열, 숫자 타입은 기본형 값으로 변환되며, 문자열로 변환 될 때 객체의 속성(프로퍼티)는 순서가 보장되지 않는다.
또한, undefined와 Symbol 타입이 존재하면, 아에 무시되거나, 배열 안에 존재하는 경우에는 null 값으로 대체되며, Nan과 무한을 뜻하는 Infinity 는 배열, 객체 내에 속한 것 상관없이 null로 대체된다.
'자바스크립트' 카테고리의 다른 글
[javascript] JSON Server 이용한 API 다루기 연습(2) - fetch로 데이터를 가져오자(GET) (0) | 2023.01.18 |
---|---|
[javascript] JSON Server 이용한 API 다루기 연습(1) - 시작은 JSON Server 설치 (0) | 2023.01.18 |
[javascript html 캔버스] 그림판 (0) | 2023.01.11 |
[DOM] insertBefore "지정한 위치(기준 노드) 앞에 노드를 추가한다." (0) | 2023.01.09 |
[DOM] createDocumentFragment "빈 노드 객체를 생성한다." (0) | 2023.01.09 |