객체

객체
    - 변경 가능한 속성들의 집합
    - 이름과 값이 있는 속성들을 포함하는 컨테이너
    - 데이터를 모으고 구조화 하는데 이용

    1) 객체의 생성
       - 중괄호({ })를 이용하여 생성
       - 중괄호({ })안에 아무것도 적지 않으면 빈 객체 생성
       - 중괄호({ })안에 속성값 표현 {'속성이름':'속성값', ...}

    2) 객체의 속성값 읽기
       - 대괄호([ ]) 표기법
         객체 뒤의 대괄호 안에 속성 이름을 문자열로 적어 속성에 접근
       - 마침표(.) 표기법 // 많이 사용
         객체 뒤에 마침표를 찍고, 속성 이름을 적어 속성에 접근
   

1. <script>  
2.     var clothes = {  
3.         name:'suit',  
4.         top:100,  
5.         bottom:32,  
6.         color:'black'  
7.     };  
8.       
9.     console.log(clothes['name']); // suit   
10.     console.log(clothes['top']); //  100
11.     console.log(clothes.bottom); //  32
12.     console.log(clothes.color); //   black
13.       
14. </script>  

    3) 속성과 메서드
       ① 속성
           모든 형태의 자료형을 가질 수 있다
           (숫자, 문자열, 불린, null, undefined, 배열, 함수, 객체 등)
       ② 메서드
           속성값이 함수인 속성으로 객체의 속성이름 뒤에 괄호를 열고닫아 접근한다

1. <script>  
2.     var clothes = {  
3.         name:'suit',  
4.         top:100,  
5.         bottom:32,  
6.         color:'black',  
7.         print:function(){  
8.             var out='';  
9.             out+='name:'+this.name+'\n';  
10.             out+='top:'+this.top+'\n';  
11.             out+='bottom:'+this.bottom+'\n';  
12.             out+='color:'+this.color;  
13.               
14.             console.log(out);  
15.         }  
16.     };  
17.       
18.     clothes.print();  
19.       
20. </script>  

    4) 관련 키워드
       ① for in

1. <script>  
2.     var clothes = {  
3.         name:'suit',  
4.         top:100,  
5.         bottom:32,  
6.         color:'black',  
7.         print:function(){  
8.             var out='';  
9.             out+='name:'+this.name+'\n';  
10.             out+='top:'+this.top+'\n';  
11.             out+='bottom:'+this.bottom+'\n';  
12.             out+='color:'+this.color;  
13.               
14.             console.log(out);  
15.         }  
16.     };  
17.       
18.     var forin = '';  
19.     for(var attr in clothes) {  
20.         forin += attr + ' ';  
21.     }  
22.     console.log(forin); // name top bottom color print
23.       
24. </script>  

    *속성에 접근할 순 없다

        ② in
            객체에 속성이 존재하는지 확인 할 수 있다. (존재 true, 미존재 false 반환)

1. <script>    
2.     var clothes = {    
3.         name:'suit',    
4.         top:100,    
5.         bottom:32,    
6.         color:'black',    
7.         print:function(){    
8.             var out='';    
9.             out+='name:'+this.name+'\n';    
10.             out+='top:'+this.top+'\n';    
11.             out+='bottom:'+this.bottom+'\n';    
12.             out+='color:'+this.color;    
13.                 
14.             console.log(out);    
15.         }    
16.     };    
17.     console.log('name' in clothes); // true  
18. </script>    

        ③ with
            반복할 객체를 생략하고 속성과 메서드를 사용할 수 있으나, 실행 속도 저하

    5) 속성의 수정
        ① 속성에 추가 및 변경
            대괄호 표기법 또는 마침표 표기법을 이용하여 값을 할당하여 추가 및 변경
            가능하다. 속성이 존재할 경우 속성값이 수정되며, 미존재할 경우 추가된다.

        ② 속성의 제거
            delete 키워드를 이용하여 제거한다.

1. <script>  
2.     var clothes = {  
3.         name:'suit',  
4.         top:100,  
5.         bottom:32,  
6.         color:'black',  
7.         print:function(){  
8.             var out='';  
9.             out+='name:'+this.name+'\n';  
10.             out+='top:'+this.top+'\n';  
11.             out+='bottom:'+this.bottom+'\n';  
12.             out+='color:'+this.color;  
13.               
14.             console.log(out);  
15.         }  
16.     };  
17.       
18.     delete clothes.top;  
19.     delete (clothes.bottom);  
20.       
21.     for(var attr in clothes) {  
22.         console.log(attr);  // name, color (top, bottom 제외)
23.     }  
24. </script>