[JavaScript]JSON(JavaScript Object Notation)이란?

🌙JSON이란?

Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷.

웹 어플리케이션에서 데이터를 전송할 때 사용(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우).

🌙JSON구조

JSON은 자바스크립트의 객체 표기법으로부터 파생된 부분 집합.

따라서 JSON 데이터는 다음과 같은 자바스크립트 객체 표기법에 따른 구조로 구성.

• 이름과 값의 쌍으로 이루어짐
• 쉼표(,)로 나열됨
• 객체(object)는 중괄호({})로 둘러쌓아 표현
• 배열(array)은 대괄호([])로 둘러쌓아 표현

---

🌙JSON 데이터

• JSON 데이터는 이름과 값의 쌍으로 구성
  이러한 JSON 데이터는 데이터 이름, 콜론(:), 값의 순서로 구성.
  ⇒ "데이터이름": 값
• ex)데이터의 이름이 "name"이고, 값은 "식빵"이라는 문자열을 갖는 JSON 데이터.
  ⇒ "name": "식빵”
• 데이터의 이름은 문자열이므로, 큰따옴표("")와 함께 입력해야함.

🌙JSON 데이터의 타입(datatype)

데이터의 값으로 사용할 수 있는 다양한 타입을 제공

1. 숫자(number)
2. 문자열(string)
3. 불리언(boolean)
4. 객체(object)
5. 배열(array)
6. null

나타낼 수 있는 숫자의 종류

1. 정수(integer)
2. 실수(fraction)
3. 지수(exponent)

*8진수나 16진수 등을 표현하는 방법은 제공X

---

🌙JSON 객체

JSON 객체는 중괄호({})로 둘러쌓아 표현.

또한, 쉼표(,)를 사용하여 여러 프로퍼티를 포함할 수 있음.

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

객체(object)

데이터 이름과 값의 한 쌍으로 구성된 프로퍼티의 정렬되지 않은 집합을 의미.

중괄호({})로 둘러싸여 있음.

객체에 저장되는 프로퍼티(property)는 데이터 이름과 값의 한 쌍으로 이루어짐.

쉼표(,)를 사용하여 프로퍼티를 여러 개 가질 수 있음. 이때 프로퍼티의 순서는 중요하지 않으며, 데이터의 이름은 문자열로 반드시 큰따옴표("")를 사용함.

객체 안의 객체

데이터 이름과 대응되는 값으로 숫자, 문자열, 불리언뿐만 아니라 또 다른 객체가 올 수 있음. 만약 데이터의 값이 객체라면 객체 안에 객체가 포함되는 계층 구조가 형성됨.

ex)가장 상위 계층의 데이터 이름은 "dog", 데이터값으로 다섯 개의 또 다른 데이터를 가짐.
"owner" 객체는 "ownerName"과 "phone"이라는 또 다른 데이터를 가짐.

{
    "dog": {
        "name": "식빵",
        "family": "웰시코기",
        "age": 1,
        "weight": 2.14,
        "owner": {
            "ownerName": "홍길동",
            "phone": "01012345678"
        }
    }
}

---

🌙JSON 배열

JSON 배열은 대괄호([])로 둘러쌓아 표현.

또한, 쉼표(,)를 사용하여 여러 JSON 데이터를 포함할 수 있음.

ex)배열의 이름이 "dog"이고, 3개의 JSON 객체를 요소로 가지는 JSON 배열.

"dog": [
    {"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14},
    {"name": "콩콩", "family": "포메라니안", "age": 3, "weight": 2.5},
    {"name": "젤리", "family": "푸들", "age": 7, "weight": 3.1}
]

---

🌙메서드

JSON객체는 JSON을 분석하거나 값을 JSON으로 변환하는 메서드가 있음.

[JSON.parse()]

문자열을 JSON으로서 구문 분석하고, 선택적으로 분석 결과의 값과 속성을 변환해 반환함.

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

결과

42
true

[JSON.stringify()]

주어진 값에 해당하는 JSON 문자열을 반환함. 선택 사항으로 특정 속성만 포함하거나 사용자 정의 방식으로 속성을 대체함.

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""

결과

'{"x":5,"y":6}'
'[3,"false",false]'
'{"x":[10,null,null,null]}'
'"2006-01-02T06:04:05.000Z"'

 

참조

http://www.tcpschool.com/json/json_basic_structure

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON