본문 바로가기
STUDY/JavaScript

[JavaScript] JSON(2) - 복합자료구조

by bottlesun 2022. 11. 27.
728x90

01. 데이터 타입을 포함하는 자료구조

JSON 데이터 내부에서 배열이 존재할때 그 배열에 접근 하는 방법이다.
JSON의 key[index] 배열의 인덱스번호로 접근하여 해당 부분의 값을 가지고 올 수 있다.

const company = {
    name : "(주)굿모닝컴페니",
    since : 2013,
    department : ["기획팀","디자인팀","개발팀"]
};
console.log(company.name); //점으로 연결 (기본 접근방식) -선호
console.log(company['since']); // 배열처럼 연결 (기본 접근방식)
console.log(company.department[0]); // 배열[인덱스번호] 접근
console.log(company.department[1]); 
console.log(company['department'][2]); 

02. 계층구조

02-1. 다른 JSON 객체를 value로 포함하는 경우

JSON 데이터 안에 다른 JSON의 정보들도 담을 수 있다.

//단일 형태의 JSON
let centerPoint = {
    x : 5,              // x좌표
    y : 10              // y좌표
};
// 다른 JSON을 포함하는 JSON
let circle1 = {
    center : centerPoint,    //중심의 좌표
    radius : 5.10            //반지름
};
console.log("원의 중심 : (%d , %d)" , circle1.center.x,circle1.center.y);
console.log("원의 반지름 : %d",circle1.radius);

02-2.계층구조

JSON같은 경우에는 문자형 숫자형 ~ 객체 배열 등 undefined을 제외한 다양한 타입들의 값을 value 값으로 담을 수 있다.

계층적으로 정리를 하면 해당 JSON 속 정보들을 한 눈에 보고 사용하기 용의 하기 때문이다.

let circle2 = {
    center : {      // 중심의 좌표
        x : 5,      //  x 좌표
        y : 10      //  y 좌표
    },
    radius : 5.10   // 반지름
};
console.log("원의 중점 : " + circle2.center.x , circle2.center.y);
console.log("원의 반지름 : " + circle2.radius);

03. 목록구조

03-1. 목록이 아이템으로 사용될 JSON 객체 정의하기

const student1 = {
    studeo : 10101,
    grabe : 1,
    name : "학생1"
};
const student2 = {
    studeo : 20202,
    grabe : 2,
    name : "학생2"
};
/* 목록 구조를 갖는 JSON 객체 */
const classRoom = {
    student : [student1, student2]
}
console.log(classRoom);
/* classRoom 출력
{
  student: [
    { studeo: 10101, grabe: 1, name: '학생1' },
    { studeo: 20202, grabe: 2, name: '학생2' }
  ]
}
*/

03-2. 배열의 기본특성을 활용하여 반복문으로 접근 활용

for(let i = 0 ; i <classRoom.student.length;i++){
    console.log(">> 학번" + classRoom.student[i].studeo);
    console.log(">> 학년" + classRoom.student[i].grabe);
    console.log(">> 이름" + classRoom.student[i].name);
}

03-3. 배열의 원소로서 JSON 구조를 직접 명시하기

const classRoom = {
    student : [{
        studeno : 10101,
        grade : 1,
        name : "학생1"
    },{
        studno : 20202,
        grade : 2,
        name : "학생2"
    }]
};
/* classRoom 출력
{
  student: [
    { studeo: 10101, grabe: 1, name: '학생1' },
    { studeo: 20202, grabe: 2, name: '학생2' }
  ]
}
*/

03-4. 배열의 기본특성을 활용하여 반복문으로 접근 활용

for( let i = 0 ; i < classRoom.student.length; i++){
    console.log(">> 학번 : " + classRoom.student[i].studeo);
    console.log(">> 학년 : " + classRoom.student[i].grade);
    console.log(">> 이름 : " + classRoom.student[i].name);
}

03-5. 가장 일반적인 형태의 목록 구조

목록을 구성하는 배열 외의 목록을 설정하기 위한 부가 정보도 함께 포함을 한다.

const bbs = {
    title : "공지사항",
    count : 4,
    item : [
        {id:1,subject:'첫번째 게시물 제목'},
        {id:2,subject:'두번째 게시물 제목'},
        {id:3,subject:'세번째 게시물 제목'},
        {id:4,subject:'네번째 게시물 제목'}
    ]
};
console.log("게시판 이름 :" + bbs.title);
console.log("전체 게시물 수 :" + bbs.count);
/*반복문을 통해 게시물 제목 출력*/
for(let i=0; i<bbs.item.length; i++){
    console.log("[" + bbs.item[i].id + "] " + bbs.item[i].subject);
}

장점 -
데이터가 계층적으로 구성될 수 있기 때문에 데이터간의 포함관계를 표현하기가 쉽다

단점 -
하위 객체로 포함된 JSON의 이름들이 독립적이기 때문에 하나의 객체 안에 존재하는 하위 객체들간의 연관성이 적다

728x90

댓글