[JS] JSON

오늘도 인터넷 강의를 듣다가 모르는 것이 등장했습니다!  제이슨은 무엇일까요? 

 

 

 

JSON (=JavaScript Object Notation) 이란? 

 

나무 위키의 내용 발췌 

일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식을 말합니다. 

클라이언트가 사용하는 언어에 관계없이 통일된 데이터를 주고 받을 수 있도록, 일정한 패턴을 지닌 문자열을 생성해 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장, 표시할 수 있게 됩니다. 

 

과거 웹 초기 시절부터 사용되어 온 XML은 헤더와 태그등의 여러 요소로  가독성이 떨어지고, 쓸데없이 용량을 잡아먹는다는 단점이 항상 지적되어 왔다. 이에 대응해  간결하고 통일된 양식으로 각광을 받고 있는 것이 JSON입니다. 

 

그래도 표면적으로 W3C의 표준은 XML인데, 그것과는 무관하게 JSON은 2009년 말 Ecma에 의해 ECMAScript5에서 스크립트 엔진의 기본 기능으로 내장되어 버렸기 때문에 새롭게 출시되는 브라우저들 기준에서는 DOM을 통해 XML 파싱하는 것보다 JavaScript 엔진에서 JSON을 메모리로 받는 쪽이 성능으로 보나 트래픽으로 보나 훨씬 더 나은 선택이 되어버렸습니다.  그런 관계로 웹에서 XML은 본격적으로 외면받고 있다고 합니다. 

 

 

JSON의 구조

 

1. JSON데이터는 이름과값의 쌍으로 이루어집니다. 

2. JSON데이터는 쉼표(,)로 나열됩니다.

3. 객체(object)는 중괄호( { } )로 둘러싸여 표현합니다.

4. 배열(array)는 대괄호 ( [ ] )로 둘러싸여 표현합니다. 

 

 

구문

"데이터 이름" : 값

 

다음과 같은 타입이 올 수 있습니다.

1. 숫자(number)

2. 문자열(string)

3. 불리언(boolean)

4. 객체(object)

5. 배열 (array)

6. null 

 

 

예시

// 예제 1
{
    "name": "식빵",
    "family": "웰시코기",
    "age": 1,
    "weight": 2.14
}

// 예제 2 - 객체를 요소로 가지는 JSON배열 
"dog": [
    {"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14},
    {"name": "콩콩", "family": "포메라니안", "age": 3, "weight": 2.5},
    {"name": "젤리", "family": "푸들", "age": 7, "weight": 3.1}
]

 

 

---

 

Bonus! 

JSON.parse()

MDN에서 발췌

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

 

 

구문

    JSON.parse(text)

 * text : JSON으로 변환할 문자열. 이때  문자열은 반드시 유효한 JSON형식의 문자열이어야 합니다. 

 * 반환값 : 주어진 JSON문자열에 대응하는 객체 

 

 

예시

JSON.parse('{}');              //결과값:  {}
JSON.parse('true');            //결과값 : true
JSON.parse('"foo"');           //결과값:  "foo"
JSON.parse('[1, 5, "false"]'); //결과값: [1, 5, "false"]
JSON.parse('null');            //결과값: null