> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/dom/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/dom/ajas/json.md).

# JSON

## JSON이란?

JavaScript Object Notationjson의 약자이다. 데이터를 기술하는 표현이다. 사람이 읽고 쓰기에도 용이하고 프로그램이 분석하고 생성하기에 용이다 또한 데이터의 용량이 작다. 그래서 최근엔 XML보다 JSON을 더 많이 사용한다. 

## 특징

1. 문자를 묶어 줄 때는 반드시 `""`(쌍따옴표)를 사용해야 한다 (`''` 홑따옴표 시 문법 오류) 
2. json의 데이터는 **문자**이다.

### json의 데이터는 문자

![](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MR3wZzXt9Wfld1RQALl%2F-MR49-Gyanx98lLnY-QF%2Fimage.png?alt=media\&token=695a70f0-29ad-4471-9d23-16a22b7b1abe)

## JSON을 왜 사용할까?

### 1) 다른 환경에서 데이터 해석이 가능

JSON은 서버와 데이터를 주고 받을 때 정말 필요하다. 왜냐하면 서버에서 데이터를 표현하는 구문을 js는 해석할 수 없다. 그렇기 때문에 그 데이터를 문자열로 바꾸고 또 해석하고 하는 복잡한 과정이 필요하다. 이 과정은 데이터의 양이 적을 때 사용할 수 있는 방법이지만 데이터의 양이 엄청 많아지면 쉽지 않다. 

이 때, JSON을 사용한다. JSON에 입력한 데이터는 대부분의 환경과 언어에서 사용할 수 있기 때문에 위와 같은 번거로운 과정을 거치지 않아도 된다. 

![서버와 JS사이에 데이터를 주고 받을 때 필요한 구분. json 메서드를 사용하면 쉽게 해결 가능](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQv7pXGRA1JPUGSKpR3%2F-MQv9kwr8WNLFQy4lkLF%2Fimage.png?alt=media\&token=e23672e2-a608-4ff2-b0da-9dffd2a25082)

### 2) 적은 용량(경량)

아무리 많은 데이터를 입력해도 용량이 적다. 

### 3) JavaScript에 연결해서 사용 용이 

JSON은 JS 객체 방식이다 보니 JS에 연결해서 사용하기 용이하다. 

{% hint style="info" %}
JSON은 JS 객체를 만들 때 사용하는 표현식이다.
{% endhint %}

## JSON 내장 메서드 

 아래 예제는 JSON 객체이다. 이를 JSON → 문자열, 문자열 → JSON으로 바꾸는 실습을 한다. 

```javascript
var data = {
    "title": "TV로 즐기세요.",
    "description": "스마트 TV, PlayStation, Xbox, Chromecast, Apple TV, 블루레이 플레이어 등 다양한 디바이스에서 시청하세요.",
    "video": "./assets/video-tv-0819.m4v",
    "image": "./assets/category=TV.png",
    "alt": "",
    "direction": "row"
}
```

 위의 JSON 객체를 문자로 바꾸려면 아래와 같이 역슬래시(`\`)를 사용해야 한다.  

```javascript
var data = '{\
    "title": "TV로 즐기세요.",\
    "description": "스마트 TV, PlayStation, Xbox, Chromecast, Apple TV, 블루레이 플레이어 등 다양한 디바이스에서 시청하세요.",\
    "video": "./assets/video-tv-0819.m4v",\
    "image": "./assets/category=TV.png",\
    "alt": "",\
    "direction": "row"\
}'
```

{% hint style="info" %}
주의! 마지막 `}` 에는 `\`를 붙이지 않는다. 
{% endhint %}

 위 방법처럼 손수 만드는 방식도 있지만 아래 메서드를 사용하면 쉽게 문자열 변환이 가능하다. 

#### JSON.parse() (IE8+)

JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다. 

![JSON.parse() 사용 ](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MX54bi5wNJbMQsn62Sp%2F-MX55dIRRF-8IbVTjIaW%2Fimage.png?alt=media\&token=7673f573-567b-4a6c-ab95-6900f4ca3792)

#### JSON.stringify()

JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 

![JSON.stringify() 사용 ](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MX54bi5wNJbMQsn62Sp%2F-MX55vUndyyj3ojNkdK7%2Fimage.png?alt=media\&token=d69c649c-3bef-496d-b8e1-66dc030efaf5)

{% hint style="warning" %}
json은 문자다. 그렇기 때문에 위와 같은 메서드가 필요하다. 
{% endhint %}

## JS와 JSON

JSON은 JS와 비교 했을 때, 훨씬 적은 데이터 타입을 가지고 있다. 즉, 똑같은 데이터를 지원하지 않는다. (예를들어 undefined, NaN, function은 지원하지 않는다.) 

![](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQv7pXGRA1JPUGSKpR3%2F-MQv9qYNVYh-FlOTmFXK%2Fimage.png?alt=media\&token=709d49a6-4762-4ca1-9ba6-12eaf4ad0fb6)

![JSON의 Value](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQv7pXGRA1JPUGSKpR3%2F-MQvABfhVidiqN8sVIKS%2Fimage.png?alt=media\&token=9ec22ff9-78be-4326-848b-71404e272d13)

## 참고

* [json이란?](http://www.json.org/json-ko.html)