Javascript JSON
JSON은 JavaScript Object Notation (자바스크립트 객체 표기법)의 줄임말로서 Javascript에서 다양한 형태의 자료구조를 구성하기 위한 표기법입니다.
학습목표
- JSON을 이해하고 다양한 형태의 자료구조를 정의할 수 있다.
- JSON 형식의 자료구조를 탐색하여 원하는 데이터를 추출할 수 있다.
- 깊은 복사와 얕은 복사를 이해하고 구분할 수 있다.
- JSON에서의 구조분해 문법을 이해하고 활용할 수 있다.
- JSON의 옵셔널 체이닝 표현법을 이해하고 활용할 수 있다.
#01. Object(객체)의 임시 정의
하나의 변수 안에 다른 하위 변수를 내장하는 특수한 형태의 변수.
하위 데이터에 접근하기 위해서는 점(.)으로 구분한다.
1
2
3
객체변수이름.하위변수1이름 = 123;
객체변수이름.하위변수2이름 = 456;
객체변수이름.하위변수n이름 = 999;
즉, JSON은 어떤 변수 안에 하위 변수를 내장시키기 위한 Javascript의 표기법이다.
#02. JSON 표기법으로 객체 정의하기
1) 변수들의 그룹으로서의 JSON
하나의 변수에 하위 정보들이 포함되어 있는 변수들의 그룹으로 이해할 수 있다.
1
const 객체이름 = { 이름1: 값1, 이름2: 값2, ..., 이름n: 값n };
- key 이름을 지정하고 콜론(
:)으로 구분지은 후 값을 명시한다. - 두 개 이상의 데이터는 콤마(
,)로 구분한다. - 원칙적으로 key 이름은 따옴표로 감싸는 것이 맞지만 key 이름에 띄어쓰기나 대시(
-)가 없는 경우는 따옴표 처리를 생략해도 무관하다.
2) 배열을 포함하는 JSON
JSON의 값에는 지금까지 다룬 모든 형태의 데이터 타입이 지정될 수 있다.
1
2
3
const 객체이름 = { 이름1: 숫자, 이름2: 문자열, ..., 이름n: [값1, 값2, 값3 ... 값n] };
console.log(객체이름.이름n[0]);
계층 구조
JSON 표기법의 장점은 복잡한 정보 구조를 계층화 하여 표현할 수 있다는 것이다.
1
2
3
4
5
6
7
const json1 = { ... };
const json2 = { ... };
const json3 = {
data1: json1,
data2: json2
};
단일 형태의 JSON 구조를 별도로 참조하는 것이 아니라 직접 정의하는 패턴
1
2
3
4
5
6
7
8
const myjson = {
data1: {
...
},
data2: {
...
}
};
목록 구조
JSON의 value가 배열로 정의되어 있으면서, 각 배열의 원소가 또 다른 JSON 형식인 경우.
단, 이 경우 배열의 원소로 포함되는 JSON 끼리는 동일한 구조를 갖는다.
1
2
3
4
5
6
7
8
9
10
11
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명의 학생들에 대한 혈액형 데이터이다.
1
['A', 'A', 'A', 'O', 'B', 'B', 'O', 'AB', 'AB', 'O']
아래와 같은 JSON을 정의하고, 각 혈액형별 학생수를 아래의 json의 각 key에 대한 value에 저장하시오. (혈액형별 학생 수를 for문을 활용하여 산출해야 합니다.)
1
const result = {"A" : 0, "B" : 0, "AB" : 0, "O" : 0};
문제2.
다음의 JSON은 어느 학급의 중간고사 성적을 나타낸다.
1
2
3
4
5
6
const exam = {
"철수": [89, 82, 79, 91],
"민영": [91, 95, 94, 89],
"남철": [65, 57, 71, 64],
"혜진": [82, 76, 81, 83]
}
2-1.
위 데이터에서 학생별 총점과 평균을 구하시오.
출력결과
1
2
3
4
철수의 총점은 341점 이고 평균은 85.25점 입니다.
민영의 총점은 369점 이고 평균은 92.25점 입니다.
남철의 총점은 257점 이고 평균은 64.25점 입니다.
혜진의 총점은 322점 이고 평균은 80.5점 입니다.
2-2.
위 문제의 점수가 순서대로 국어, 영어, 수학, 과학일 경우 수학에 대한 모든 학생의 총점과 평균을 구하시오.
출력결과
1
모든 학생의 수학 총점은 325점 이고 평균은 81.25점 입니다.
문제3.
아래의 데이터는 2021년 01월 25일부터 02월 01일까지의 Covid19 일별 확진자 수를 표현한 자료구조다.
1
2
3
4
5
6
7
8
9
10
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일까지의 누적 확진자 수와 일 평균 확진자 수를 구하시오.
출력결과
1
2
누적 확진자 수: 3346
평균 확진자 수: 418.25
3-2
1월 25일부터 2월 1일까지 중에서 확진자가 가장 많이 나타난 날짜는 언제인가?
출력결과
1
확진자가 가장 많이 나타난 날: 0127