JavaScript - 객체와 배열을 사용한 데이터 관리

현실에 있는 객체를 모두 모방하는 것이 아니라 프로그램에 필요한 속성만을 가져와서 객체화 하는 것을 추상화 라고 한다. 학생들의 성적 총점과 평균을 계산하는 경우를 예로 들수 있다.

// 데이터를 통합할 배열을 생성 let students = []; // push() 메서드를 이용해서 각각의 학생 객체 데이터들을 배열에 추가 students.push({ 이름: '최ㅇㅇ', 국어: 99, 수학: 92, 영어: 99, 과학: 91 }); students.push({ 이름: '김ㅇㅇ', 국어: 88, 수학: 88, 영어: 95, 과학: 88 }); students.push({ 이름: '국ㅇㅇ', 국어: 98, 수학: 78, 영어: 99, 과학: 78 }); students.push({ 이름: '이ㅇㅇ', 국어: 79, 수학: 95, 영어: 96, 과학: 68 }); students.push({ 이름: '문ㅇㅇ', 국어: 80, 수학: 96, 영어: 86, 과학: 84 }); students.push({ 이름: '여ㅇㅇ', 국어: 75, 수학: 79, 영어: 97, 과학: 86 }); students.push({ 이름: '박ㅇㅇ', 국어: 92, 수학: 94, 영어: 89, 과학: 93 }); students.push({ 이름: '길ㅇㅇ', 국어: 96, 수학: 88, 영어: 62, 과학: 96 }); students.push({ 이름: '홍ㅇㅇ', 국어: 95, 수학: 87, 영어: 99, 과학: 85 }); students.push({ 이름: '연ㅇㅇ', 국어: 95, 수학: 84, 영어: 91, 과학: 77 });

객체가 흩어져 있다면 정리하기 힘들기 때문에 앞서 배웠던 배열안에 객체도 자료형으로 넣을 수 있다는 특성을 활용해 배열안에 객체를 삽입하는 방법을 사용한다.

// 일반적인 방법 let result= '이름 \t 총합 \t 평균\n'; for(let i = 0; i < students.length; i++){      with(students[i]){           let sumAll = 국어 + 수학 + 영어 + 과학;           let average = sumAll / 4;           result += 이름 + ' \t ' + sumAll + ' \t ' + average + '\n';      } } console.log(result); alert(result);

일반적인 방법으로 배열에 for 반복문을 이용해서 내부에 있는 각각의 객체를 불러와서 내부 속성에 접근을 해서 총합과 평균을 얻어 결과값으로 출력하는 방법이 있다.

// 반복문을 이용해 students 배열안에 있는 객체에 메서드를 추가for(let i in students) { // getSum 라는 이름의 총점을 구하는 메서드를 추가      students[i].getSum = function () {           return this.국어 + this.수학 + this.영어 + this.과학;      }; // getAverage 이라는 이름의 평균을 구하는 메서드를 추가      students[i].getAverage = function () {           return this.getSum() / 4;      }; } // 출력 let result= '이름 \t 총점 \t 평균\n'; for(let i in students) {      with (students[i]) {           result += 이름 + ' \t ' + getSum() + ' \t ' + getAverage() + '\n';      }; } console.log(result); alert(result);

위의 코드는 '데이터를 처리 부분'과 '메인 프로세스 부분'을 분리해서 코드를 좀더 부분적으로 볼 수 있게 나눈 것 이다.  가독성이 좋아지고 여러 사람들과 협업을 할 때 서로 알아보기가 편한 방법이다.

// 객체를 만드는 함수
function creatStudent(이름, 국어, 수학, 영어, 과학){
    let object = {
// '키'로 선언되는 값: '매개변수'의 값
        이름: 이름,
        국어: 국어,
        수학: 수학,
        영어: 영어,
        과학: 과학
    };
// getSum 이라는 이름의 총점을 구하는 메서드를 추가
    object.getSum = function () {
        return this.국어 + this.수학 + this.영어 + this.과학;
    };
// getAverage 라는 이름의 평균을 구하는 메서드를 추가
    object.getAverage = function () {
        return this.getSum() / 4;
    };
// toString 이라는 결과를 정리하는 메서드를 추가
    object.toString = function () {
        return this.이름 + ' \t ' + this.getSum() + ' \t ' + this.getAverage() + '\n';
    }
    return object;
};
     
// 데이터를 통합할 배열을 생성
let students = [];
// push() 메서드를 이용해서 각각의 학생 객체 데이터들을 배열에 추가
students.push(creatStudent( '최ㅇㅇ', 99, 92, 99, 91 ));
students.push(creatStudent( '김ㅇㅇ', 88, 88, 95, 88 ));
students.push(creatStudent( '국ㅇㅇ', 98, 78, 99, 78 ));
students.push(creatStudent( '이ㅇㅇ', 79, 95, 96, 68 ));
students.push(creatStudent( '문ㅇㅇ', 80, 96, 86, 84 ));
students.push(creatStudent( '여ㅇㅇ', 75, 79, 97, 86 ));
students.push(creatStudent( '박ㅇㅇ', 92, 94, 89, 93 ));
students.push(creatStudent( '길ㅇㅇ', 96, 88, 62, 96 ));
students.push(creatStudent( '홍ㅇㅇ', 95, 87, 99, 85 ));
students.push(creatStudent( '연ㅇㅇ', 95, 84, 91, 77 ));
 
// 출력
let result= '이름 \t 총점 \t 평균\n';
for(let i in students) {
    result += students[i].toString();
}
console.log(result);
alert(result);

위의 코드는 이전보다 더 세분화를 해서 '객체를 구현하는 구역'과 '데이터를 생성하는 부분' 그리고 '메인 프로세스 부분'으로 분리를 한 형태이다.

객체와 배열을 사용한 데이터 관리.html

0.01MB