JavaScript/Vanilla JS

객체 Object - 4 (함수로 객체 생성 , 추상화)

유혁스쿨 2022. 1. 23. 23:04
728x90
반응형

이전 포스팅에서는 배열 안에 객체를 하나씩 직접 만들어 넣었다.

객체를 하나씩 만들어 배열에 넣으면 서로 다른 형태의 객체를 배열 안에 넣을 수 있다는 장점이 있다.

예를 들어 학생의 정보를 입력할 때 아래 코드와 같이 서로 다른 정보를 입력할 수 있다.

var students = [];
students.push({
      이름: '안준언'
    , 국어: 90
    , 수학: 95
    , 영어: 100
    , 과학: 80
});
students.push({
      이름: '이건희'
    , 국어: 90
    , 수학: 85
    , 영어: 80
    , 과학: 80
});

students.push({
      이름: '황병선'
    , 국어: 90
    , 수학: 90
    , 영어: 100
    , 과학: 90
});

위와 같이 개별적으로 객체를 만드는 것은 객체의 특성을 정확히 반영할 수 있지만, 어렵고 시간이 오래걸린다.

 

붕어빵 틀처럼 객체도 고정된 형태의 틀에서 찍어내면 쉽고 빠르게 생성할 수 있다.

붕어빵을 찍어 구워 내듯 name, korean, math, english, science를 객체로 찍어낼 수 있도록 아래 코드와 같이 makeStudent( ) 함수를 만들어본다.

function makeStudent(name, korean, math, english, science) {
    var willReturn = {
    
    }
    return willReturn;
}

이 함수는 속성값들을 매개변수로 받아 객체를 만든 후 객체를 리턴한다.

아래 코드와 같이 넘겨받은 매개변수들을 객체의 속성에 저장한 후, 추가로 객체 내부에 메서드도 구현한다.

function makeStudent(name, korean, math, english, science) {
    var willReturn = {
          이름 : name
        , 국어 : korean
        , 수학 : math
        , 영어 : english
        , 과학 : science
        , getSum : function () {
            return this.국어 + this.수학 + this.영어 + this.과학;
        }
        , getAverage : function () {
            return this.getSum() / 4;
        }
        , toString : function () {
            return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();
        }
    }
    return willReturn;
}

이제 makeStudent( ) 함수를 사용하면 객체를 틀에서 찍어내듯 생산할 수 있게된다.

 

makeStuent( ) 함수로 이전과 마찬가지로 학생 목록을 만들어 출력한다.

학생 정보 배열을 만드는 것을 제외하면 이전 포스팅의 예제와 같다.

function makeStudent(name, korean, math, english, science) {
    /* 생략 */
}

var students = [];

students.push(makeStudent('안준언',90,95,100,80));
students.push(makeStudent('이건희',90,85,80,80));
students.push(makeStudent('황병선',90,90,100,90));
students.push(makeStudent('유재혁',80,100,70,95));
students.push(makeStudent('남궁찬',80,90,70,95));

var output = '이름\t총점\t평균\n';
for (var i in students) {
    output += students[i].toString()+'\n';
}
alert(output);

하지만 이전포스팅과 같이 객체에대한 컨트롤을 다양하게 공부하기 위해 잠시 살펴본 것 이므로 실제로 이러한 방법은 사용하지 않는다.

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

다음 포스팅에서는 생성자 함수에 대해 다룰 예정이다.

728x90
반응형