객체의 속성 추가와 제거

javascript 2015.05.05 21:32

1. 동적으로 객체에 속성 추가

처음 객체를 생성하는 시점 이후에 객체의 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가한다' 또는 '동적으로 속성을 제거한다' 라고 부른다.


객체의 속성을 추가하는 방법은

1
2
// 빈 객체를 선언
var student = {};
cs

이렇게 빈 객체를 만들어 놓고



1
2
3
4
5
6
// 빈 객체를 선언
var student = {};
student.이름 = '회복맨';
student.취미 = '개드립';
student.특기 = '진짜 맛있게 밥먹기';
student.dream = '내손으로 집을 짓는것';
cs

이런식으로 "객체.속성" 으로 만들고 = 을 붙혀 그 속성에 대한 값을 정의해준다.

이것이 객체에 속성을 추가하는 것이다.



메서드도 속성이므로 같은 방법으로 속성을 추가 할 수 있다.

객체에 있는 속성을 출력하는 메서드를 만들어 보자.


코드 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 빈 객체를 선언
var student = {};
student.이름 = '회복맨';
student.취미 = '개드립';
student.특기 = '진짜 맛있게 밥먹기';
student.dream = '내손으로 집을 짓는것';
 
// toString() 메서드를 만듬
student.toString = function(){
    var output = '';
    for(var key in this){
        // toString() 메서드만 빼고 나머지만 출력하게 함
        if(key != 'toString'){
            output += key + '\t' + this[key] + '\n';
        }
    }
    return output;
}
 
// 출력
alert(student.toString());
cs


alert 함수로 student 객체의 toString() 메서드드를 호출시키면

student객체에서 정의한 toString 메서드가 동작하며 toString 메서드를 제외한 나머지 속성들을 찍어준다.




2. 객체의 속성 제거

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

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

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


코드 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 빈 객체를 선언
var student = {};
student.이름 = '회복맨';
student.취미 = '개드립';
student.특기 = '진짜 맛있게 밥먹기';
student.dream = '내손으로 집을 짓는것';
 
// toString() 메서드를 만듬
student.toString = function(){
    var output = '';
    for(var key in this){
        // toString() 메서드만 빼고 나머지만 출력하게 함
        if(key != 'toString'){
            output += key + '\t' + this[key] + '\n';
        }
    }
    return output;
}
 
// 출력
alert(student.toString());
// 속성을 제거
delete(student.dream)
// toString() 메서드를 사용하지 않아도 toString() 메서드를 사용한다.
alert(student);
cs



코드를 실행하여 확인해 보자.

댓글 3

  • 루시집사 (2018.06.04 15:47 신고)

    안녕하세요 자료 보고 공부하고 있는데요 궁금한게 있어서 질문드립니다.
    위에 for문에서 in다음 this라고 적으셨는데 다른 의미가 있는건가요 student라고 적었을때하고 차이점이 있는건가요?

    • 회복맨 (2018.06.04 15:57 신고)

      질문해 주신 this 는 메서드를 호출한 객체를 가르킵니다.

      즉 this = student 가 됩니다.

      메서드를 호출한 객체는 바로 student 이기때문이지요.

      간단하게 확인해 보는 방법은
      for in 문 앞에
      console.log(this);
      console.log(student);
      를 추가해서 브라우저 개발자 도구로 확인해 보시면 똑같은 결과가 나옵니다.

      방문해 주셔서 감사합니다 ^^

  • lucybutler (2018.06.04 16:13 신고)

    감사합니다 예전에 this 배웠던걸 까먹었었는데 답변보고 다시 기억났습니다~