20장 JSON

20장 JSON

이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
 

- JSON 문법의 이해
- JSON 파싱
- JSON 직렬화 2.4 자바스크립트가 비활성화된 상황에 대한 대비

JSON은 자바스트립트의 엄격한 부분집합이며 자바스크립트의 여러 가지 패턴을 사용해 구조화된 데이터를 표현한다. XML대신 JSON을 권하는 이유는 eval()에 직접 넘길 수 있고 DOM을 따로 생성할 필요가 없기 때문이다.  JSON이 자바스크립트와 문법을 공유하긴 하지만 가장 중요한 점은 JSON이 프로그래밍 언어가 아니라 데이터 형식임을 이해하는 것이다. 많은 프로그래밍 언어에서 JSON 파싱과 직렬화를 지원한다.

20.1 문법

JSON 문법은 세가지 타입을 사용한다.JSON은 구조회된 데이터를 표현하는 방식일 뿐이며 자바스크립트의 문법과 매우 비슷하다.

 - 단순한값 : 문자열, 숫자, 불리언, null은 모두 자바스크립트와 같은 문법으로 표현한다. undefined는 지원되지 않는다. 

- 객체 : 객체는 순서 있는 키-값 쌍으로 표현된다. 각 값은 원시 타입일수도 있고 객체나 배열같은 복잡한 타입일수도 있다.

- 배열 : 배열은 숫자형 색인으로 접근할 수 있는 순서 있는 목록으로 표현한다. 각 값은 단순한 값이나 객체, 다른 배열 등을 모두 쓸 수 있다.

20.1.1 단순한 값

자바스크립트 문자열과 JSON 문자열의 차이는 JSON 문자열은 반드시 큰 따옴표로 감싸야만 유효하다는 점이다. 불리언 값과 null은 그 자체로 유효한 JSON이나 현실적으로 JSON은 복잡한 구조를 표현하기 위해 사용한다. 

20.1.2 객체

JSON 객체는 객체 리터럴 표기법과 매우 비슷하지만 자바스크립트 예제와는 몇가지 다른 점이 있다. 첫번째, 변수 선언이 없다. 두번째, 문장을 마치는 세미콜론이 없다. 자바스크립트 문장이 아니므로 필요없다. 값은 JSON에서 허용하는 모든 타입을 쓸 수 있으며 객체 안에 객체를 써도 된다. 

{
  "name" : "Nicholas",
  "age" : 29,
  "school": {
    "name" : "Merrimark College"
  }

20.1.3 배열

JSON 배열은 자바스크립트의 배열 리터럴 표기법으로 표현하는데 변수와 세미콜론은 없다. 

20.2 파싱과 직렬화

JSON은 친근한 문법 뿐만 아니라 데이터를 파싱하면 바로 사용할 수 있는 자바스크립트 객체가 된다. 

20.2.1 JSON 객체

JSON 객체에는 stringify()와 parse() 두가지 메서드가 있는데 이들 메서드는 각각 자바스크립트 객체를 JSON 문자열로 직렬화하며 JSON을 파싱하여 네이티브 자바스크립트 값으로 바꾼다. 

JSON.stringify()는 자바스크립트 객체를 JSON 문자열로 직렬화하고, JSON 문자열을 JSON.parse()에 넘기면 적절한 자바스크립트 값이 생성된다. 자바스크립트 객체를 직렬화할 때는 모든 함수와 프로토타입 멤버가 생략되고 값이  undefined인 프로퍼티도 모두 생략한다. 

20.2.2 직렬화 옵션

JSON.stringify() 메서드는 직렬화할 객체 외에 두 가지 매개변수를 더 받을 수 있는데 이들 매개변수는 자바스크립트 객체를 직렬화할 때 적용할 옵션을 설정한다. 첫 번째 매개변수는 필터이며 배열이나 함수를 쓸 수 있다. 두 번재 매개변수는 JSON 문자열의 들여쓰기를 조절한다. JSON.stringify()가 제공하는 기능 이상이 필요할때 toJSON() 메서드를 사용할수 있는데 toJSON() 메서드는 어떤 직렬화 값도 반환하게 할 수 있으며 적절히 동작한다. toJSON() 메서드를 필터 함수와 함께 쓸 수도 있으므로 다양한 직렬화 과정이 어떤 순서로 발생하는지 이해하는 것이 중요하다. 

- toJSON() 메서드가 있으면 호출하여 그 값을 사용하고 그렇지 않다면 기본 직렬화 방법을 사용한다. 

- 두번째 매개변수가 있다면 필터를 적용한다. 필터 함수에 전달되는 값은 1단계에서 반환된 값이다.

- 2단계에서 반환한 각 값을 적절히 직렬화하낟.

- 세번째 매개변수가 있으면 그에 따라 형식을 적절히 조절한다. 

20.2.3 파싱 옵션

JSON.parse() 메서드 역시 각 키-값 쌍에서 호출될 콜백 함수를 추가적인 매개변수로 받는다.