[JS] JSON

by 호쌤(이광호) on April 5, 2022

JSON은 JavaScript Object Notation (자바스크립트 객체 표기법)의 줄임말로서 Javascript에서 다양한 형태의 자료구조를 구성하기 위한 표기법입니다.

학습목표

• JSON을 이해하고 다양한 형태의 자료구조를 정의할 수 있다.
• JSON 형식의 자료구조를 탐색하여 원하는 데이터를 추출할 수 있다.
• 깊은 복사와 얕은 복사를 이해하고 구분할 수 있다.
• JSON에서의 구조분해 문법을 이해하고 활용할 수 있다.
• JSON의 옵셔널 체이닝 표현법을 이해하고 활용할 수 있다.

#01. Object(객체)의 임시 정의

하나의 변수 안에 다른 하위 변수를 내장하는 특수한 형태의 변수.

하위 데이터에 접근하기 위해서는 점(.)으로 구분한다.

객체변수이름.하위변수1이름 = 123;
객체변수이름.하위변수2이름 = 456;
객체변수이름.하위변수n이름 = 999;

즉, JSON은 어떤 변수 안에 하위 변수를 내장시키기 위한 Javascript의 표기법이다.

#02. JSON 표기법으로 객체 정의하기

1) 변수들의 그룹으로서의 JSON

하나의 변수에 하위 정보들이 포함되어 있는 변수들의 그룹으로 이해할 수 있다.

const 객체이름 = { 이름1: 값1, 이름2: 값2, ..., 이름n: 값n };

• key 이름을 지정하고 콜론(:)으로 구분지은 후 값을 명시한다.
• 두 개 이상의 데이터는 콤마(,)로 구분한다.
• 원칙적으로 key 이름은 따옴표로 감싸는 것이 맞지만 key 이름에 띄어쓰기나 대시(-)가 없는 경우는 따옴표 처리를 생략해도 무관하다.

2) 배열을 포함하는 JSON

JSON의 값에는 지금까지 다룬 모든 형태의 데이터 타입이 지정될 수 있다.

const 객체이름 = { 이름1: 숫자, 이름2: 문자열, ..., 이름n: [값1, 값2, 값3 ... 값n] };

console.log(객체이름.이름n[0]);

계층 구조

JSON 표기법의 장점은 복잡한 정보 구조를 계층화 하여 표현할 수 있다는 것이다.

const json1 = { ... };
const json2 = { ... };

const json3 = {
    data1: json1,
    data2: json2
};

단일 형태의 JSON 구조를 별도로 참조하는 것이 아니라 직접 정의하는 패턴

const myjson = {
    data1: {        
        ...
    },
    data2: {
        ...
    }
};

목록 구조

JSON의 value가 배열로 정의되어 있으면서, 각 배열의 원소가 또 다른 JSON 형식인 경우.

단, 이 경우 배열의 원소로 포함되는 JSON 끼리는 동일한 구조를 갖는다.

const 객체이름 = {
    key : [ {
        key: value, key: value...
    }, {
        key: value, key: value...
    }, {
        key: value, key: value...
    }, {
        key: value, key: value...
    } ]
}

#03. JSON 구조의 확장

1) 존재하지 않는 key를 사용하는 경우

존재하지 않는 key에 대해 출력하거나 다른 변수에 대입할 경우 undefined로 처리된다.

2) 존재하지 않는 key에 대한 대입

그 즉시 객체가 확장된다.

빈 객체 확장하기

아무런 key도 정의되지 않은 빈 json 객체에 점진적으로 내용을 덧붙여 나갈 수 있다.

---

JSON 연습문제

문제1.

다음은 10명의 학생들에 대한 혈액형 데이터이다.

['A', 'A', 'A', 'O', 'B', 'B', 'O', 'AB', 'AB', 'O']

아래와 같은 JSON을 정의하고, 각 혈액형별 학생수를 아래의 json의 각 key에 대한 value에 저장하시오. (혈액형별 학생 수를 for문을 활용하여 산출해야 합니다.)

const result = {"A" : 0, "B" : 0, "AB" : 0, "O" : 0};

문제2.

다음의 JSON은 어느 학급의 중간고사 성적을 나타낸다.

const exam = {
    "철수": [89, 82, 79, 91],
    "민영": [91, 95, 94, 89],
    "남철": [65, 57, 71, 64],
    "혜진": [82, 76, 81, 83]
}

2-1.

위 데이터에서 학생별 총점과 평균을 구하시오.

출력결과

철수의 총점은 341점 이고 평균은 85.25점 입니다.
민영의 총점은 369점 이고 평균은 92.25점 입니다.
남철의 총점은 257점 이고 평균은 64.25점 입니다.
혜진의 총점은 322점 이고 평균은 80.5점 입니다.

2-2.

위 문제의 점수가 순서대로 국어, 영어, 수학, 과학일 경우 수학에 대한 모든 학생의 총점과 평균을 구하시오.

출력결과

모든 학생의 수학 총점은 325점 이고 평균은 81.25점 입니다.

---

문제3.

아래의 데이터는 2021년 01월 25일부터 02월 01일까지의 Covid19 일별 확진자 수를 표현한 자료구조다.

const covid19 = [
    {date: '0125', active: 426}, 
    {date: '0126', active: 343}, 
    {date: '0127', active: 547}, 
    {date: '0128', active: 490}, 
    {date: '0129', active: 460}, 
    {date: '0130', active: 443}, 
    {date: '0131', active: 338}, 
    {date: '0201', active: 299}
]

3-1.

1월 25일부터 2월 1일까지의 누적 확진자 수와 일 평균 확진자 수를 구하시오.

출력결과

누적 확진자 수: 3346
평균 확진자 수: 418.25

3-2

1월 25일부터 2월 1일까지 중에서 확진자가 가장 많이 나타난 날짜는 언제인가?

출력결과

확진자가 가장 많이 나타난 날: 0127