객체 Object - 2 (객체 속성 동적 관리, 배열을 통한 데이터관리)

---

 

 

처음 객체를 생성하는 시점 이후에 속성을 추가하거나 제거하는 것을 "동적으로 속성을 추가한다" 혹은 "동적으로 속성을 제거한다" 라고 표현한다.

 

이번 포스팅에서는 객체의 속성을 동적으로 추가 및 제거하는 방법을 알아본다.

 

객체 속성 동적 추가

아래와 같이 빈 객체를 생성한다.

var student = {};

동적으로 속성을 추가하는법은 아래 코드와 같이 구현한다

student.이름 = '남궁댕';
student.취미 = '폰게임';
student.특기 = '삑사리';
student.장래희망 = '프로그래머';

 

메서드도 객체의 속성이므로 동일한 방법으로 추가할 수 있다.

student.toString = function () {
    var output = '';
    for (var key in this){
        if(key != 'toString') {//toString 메서드 출력 X
            output += key + '\t' + this[key] + '\n';
        }
    }
    return output;
}
alert(student.toString());

위 코드는 객체를 출력할 때 자동으로 호출되는 toString( ) 메서드를 오버라이드 한 코드이다.

로직상 toString 속성키 이름을 제외한 모든 key와 속성값을 output에 반복하여 저장하고 output에 저장된 값을 toString 메서드에 반환한다.

 

var student = {};
student.이름 = '남궁댕';
student.취미 = '폰게임';
student.특기 = '삑사리';
student.장래희망 = '프로그래머';
student.toString = function () {
    var output = '';
    for (var key in this){
        if(key != 'toString') {//toString 메서드 출력 X
            output += key + '\t' + this[key] + '\n';
        }
    }
    return output;
}
alert(student.toString());

toString 메서드 속성을 제외한 모든 속성이 출력되는 것을 확인할 수 있다.

 

객체 속성 동적 제거

동적으로 객체의 속성을 제거할 때는 delete 키워드를 사용한다.

delete 키워드 뒤에 삭제 하고자 하는 객체의 속성을 입력한다.

객체의 속성을 입력할 때는 typeof 키워드처럼 괄호를 사용해도 되고 사용하지 않아도 된다.

다음 코드는 객체에서 장래희망 속성을 제거한다.

delete(student.장래희망);
alert(student);

var student = {};
student.이름 = '남궁댕';
student.취미 = '폰게임';
student.특기 = '삑사리';
student.장래희망 = '프로그래머';
student.toString = function () {
    var output = '';
    for (var key in this){
        if(key != 'toString') {//toString 메서드 출력 X
            output += key + '\t' + this[key] + '\n';
        }
    }
    return output;
}
alert(student.toString());
delete(student.장래희망);
alert(student);

첫번째 출력에서는 장래희망이 있었지만, 두번째 출력에는 장래희망 속성이 삭제되었다.

toString을 호출하지 않았지만 기본적으로 객체를 출력할 때 toString메서드가 자동으로 호출되기 때문에 출력시켜준다.

이때, 객체 내부에 오버라이딩 된 toString메서드가 동작한다. (다른 외부객체의 toString 메서드에는 영향을 주지 않음)