객체 Object - 3 ( 객체와 배열 )

객체와 배열

객체와 배열을 활용하여 학생들의 성적 총점과 평균을 계산하는 예제를 만들어본다

 

다음은 현실에 존재하는 student 객체에서 성적을 관리할 때 필요한 속성만 뽑아서 자바스크립트 객체로 만든것이다.

이렇게 현실에 존재하는 객체의 필요한 속성을 추출하는 작업을 "추상화" 라고 한다.

 

우선 학생데이터를 만든다.

//학생 데이터 생성
var student0 = {이름: '안준언', 국어: 90, 수학: 95, 영어: 100, 과학: 80};
var student1 = {이름: '이건희', 국어: 90, 수학: 85, 영어: 80, 과학: 80};
var student2 = {이름: '황병선', 국어: 90, 수학: 90, 영어: 100, 과학: 90};
var student3 = {이름: '유재혁', 국어: 80, 수학: 100, 영어: 70, 과학: 95};
var student4 = {이름: '남궁찬', 국어: 80, 수학: 100, 영어: 70, 과학: 95};

 

객체가 흩어져 있으면 조작이 어려우므로 배열 내에 저장한다.

배열의 push( ) 메서드를 사용하여 배열에 요소를 넣는다.

//학생 데이터 생성
/*생략*/

//학생정보 배열에 추가
var students = [];
for(var i=0; i<5; i++){
	var key = i;
	students.push(eval("student" + key))
}
console.log(students)

 

필자는 미리 선언, 초기화 된 변수들의 식별자명을 참조할때 동적으로 1씩 증가시켜 참조할 수 있도록 eval( ) 함수를 사용하였다. 

자바스크립트에서 eval( ) 함수는 괄호 안에 들어 있는 모든 내용을 스크립트로 인식을 한다.

 

배열에 객체를 모두 넣으면 배열 students에 5개의 요소가 생긴다.

 

위 코드에 이어 각각의 객체에 메서드를 추가해본다.

각각의 객체에 같은 메서드를 모두 직접 입력하는 것은 비효율적이므로 다음과 같이 반복문을 사용한다.

//학생 데이터 생성
/* 생략 */

//학생정보 배열에 추가
/* 생략 */

//students 배열 내의 객체에 메서드 추가
for (var i in students){
    students[i].getSum = function () {
        return this.국어 + this.수학 + this.영어 + this.과학;
    };
    students[i].getAverage = function () {
        return this.getSum() / 4;
    };
}

 

다음은 students의 객체 이름, 총점, 평균 을 출력해본다.

for in 반복문으로 배열 students의 요소에 접근하고 문자열을 만들어 출력한다. 

//학생 데이터 생성
/* 생략 */

//학생정보 배열에 추가
/* 생략 */

//students 배열 내의 객체에 메서드 추가
/* 생략 */

//출력
var output = '이름\t총점\t평균\n';
for (var i in students) {
    with (students[i]) {
        output += 이름 + '\t' + getSum() + '\t' + getAverage() + '\n';
    }
}
alert(output);

 

이러한 함수를 사용하면 객체를 쉽게 찍어낼 수 있다.

하지만 공부하기 위해 구현해 본 것이며, 실제로 이러한 방법을 사용하지는 않는다.

생성자 함수를 사용하면 기능이 많은 객체를 쉽게 만들 수 있기 때문이다.

 

완성된 코드

//학생 데이터 생성
var student0 = {이름: '안준언', 국어: 90, 수학: 95, 영어: 100, 과학: 80};
var student1 = {이름: '이건희', 국어: 90, 수학: 85, 영어: 80, 과학: 80};
var student2 = {이름: '황병선', 국어: 90, 수학: 90, 영어: 100, 과학: 90};
var student3 = {이름: '유재혁', 국어: 80, 수학: 100, 영어: 70, 과학: 95};
var student4 = {이름: '남궁찬', 국어: 80, 수학: 100, 영어: 70, 과학: 95};

//학생정보 배열에 추가
var students = [];
for(var i=0; i<5; i++){
	var key = i;
	students.push(eval("student" + key))
}
console.log(students)

//students 배열 내의 객체에 메서드 추가
for (var i in students){
    students[i].getSum = function () {
        return this.국어 + this.수학 + this.영어 + this.과학;
    };
    students[i].getAverage = function () {
        return this.getSum() / 4;
    };
}

//출력
var output = '이름\t총점\t평균\n';
for (var i in students) {
    with (students[i]) {
        output += 이름 + '\t' + getSum() + '\t' + getAverage() + '\n';
    }
}
alert(output);