[JavaScript] 객체1: 객체란 / 프로퍼티, 메소드/ 반복문

자바스크립트 객체

- 자바스크립트의 기본 타입(data type)
- key(속성) + value(속성값) 한쌍으로 값을 저장할 수 있는 구조
==> 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합
- 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터타입
- 프로퍼티(속성)의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티(속성)를 메소드(method)라 칭함
- number, string, boolean, undefined 타입 제외한 모든 타입은 객체 
- but.. 숫자, 문자열, 불리언과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가짐
- 객체는 중괄호{}를 이용하여 생성,
중괄호 내에 객체에 필요로 하는 속성(property)들을 정의함(속성:속성값)
- 속성값으로는 모든 자료형의 값을 담을 수 있음
=> 자바스크립트에서의 배열: 자바의 ArrayList와 유사
=> 자바스크립트에서의 객체: 자바의 hashMap과 유사

  [표현법]
        var 변수명 (==객체명) = {
            속성명: 속성값,
            속성명: 속성값,
            속성명: 속성값,
            ....
        }

 

객체의 프로퍼티와 메소드 

프로퍼티(property / 속성)
- cat.name = "고순"
- cat.type = "koreaShortHair"
- cat.age = 19

메소드(method)
- cat.eat()
- cat.sleep()
- cat.play()

객체의 프로퍼티 참조 (객체 속성에 접근하는 법)

방법1: 참조연산자(.)이용:
객체이름.프로퍼티이름
방법2: 대괄호를 이용하는 방법:
객체이름["프로퍼티이름"]

 <button onclick="test1();">실행확인</button>
    <div id="area1" class="area big"></div>
    <script>
        function test1(){
          //배열
          var arr = ['크루아상', 2000, '식사',['밀가루','버터'],'뚜레주르'];
          // 객체
          var product = {
            pName: '크루아상', 
            pPrice: 2000,
            kind: '식사',
            'material':['밀가루','버터'],
            // 홑따옴표 생략가능
            // 홑따옴표가 필요한 경우: 공백, 속성명에 특문등이 있을 경우
            company: '뚜레주르'
          }
          //(5) ['크루아상', 2000, '식사', Array(2), '뚜레주르']

          //{pName: '크루아상', pPrice: 2000, kind: '식사', material: Array(2), company: '뚜레주르'}
          // 배열과 용도는 같으나, 의미를 담은 속성을 지어줄 수 있다는 차이점
          // 순서가 고정되어 있지 않다 (순서에 의미가 있는 것이 아니고, 속성명에 의미가 있으므로!)

          console.log(arr);

          
          console.log(product);
          console.log(typeof(product));

          document.getElementById('area1').innerHTML += '배열: '+arr +'<br>';
          document.getElementById('area1').innerHTML += '객체: '+product.pName+'<br>'

          //[object Object]
          // 객체 내용을 출력하려면 객체내부로 들어가야함
          // 해당 객체 내부의 각 속성에 접근하는 방법:
          // 방법1: 참조연산자(.)이용 -> 객체명.속성명 <br>'
          area1.innerHTML += ' 1.참조연산자(.)이용 -> 객체명.속성명 <br>';
          area1.innerHTML += ' pName: '+product.pName+ '<br>';
          area1.innerHTML += ' pPrice: '+product.pPrice+ '<br>';
          area1.innerHTML += ' kind: '+product.kind+ '<br>';
          area1.innerHTML += ' material: '+product.material+ '<br>';
          area1.innerHTML += ' material[0]: '+product.material[0]+ '<br>';
          area1.innerHTML += ' material[1]: '+product.material[1]+ '<br>';
          area1.innerHTML += ' company: '+product.company+ '<br>';

          // 방법2: 대괄호를 이용하는 방법:
          // 꼭 이렇게 써야하는 경우가 있으므로 알아둘 것
          area1.innerHTML += ' 2. 객체명[속성명]으로 접근하기 <br>'
          area1.innerHTML += ' product[pName]: '+product['pName']+ '<br>';
          area1.innerHTML += ' product[pPrice]: '+product['pPrice']+ '<br>';
          area1.innerHTML += ' product[kind]: '+product['kind']+ '<br>';
          area1.innerHTML += ' material: '+product['material']+ '<br>';
          area1.innerHTML += ' material[0]: '+product['material'][0]+ '<br>' ; 
          // 인덱스 왜 바깥에써?
          area1.innerHTML += ' material[1]: '+product['material'][1]+ '<br>';
          area1.innerHTML += ' company: '+product['company']+ '<br>';
        };

    <script>
        function test2(){
            var user = {
                'user name': '홍길동',
                'age !!':20,
            };
            var area2 = document.getElementById('area2');
            area2.innerHTML += 'userName: '+user['user name'] +'<br>';
            area2.innerHTML += 'age!!: '+user['age !!'];
            // 이러한 경우 (.)을 이용하는 방법 사용 불가!

        }

    </script>

* 객체에서의 반복문 (for-in문: var key in 객체)

인덱스 개념이 없으므로 단순for문 사용불가
---> for in문 사용! 
객체가 가진 모든 속성들에 순차접근시 사용가능

 <button onclick="test3();">실행확인</button>
    <div id="area3" class="area small"></div>

    <script>
        function test3(){

            var area3 =document.getElementById('area3');
            var arr = ['마라탕', '마라샹궈','양꼬치', '칭따오'];
            for (var i in arr){
                area3.innerHTML += arr[i]+'<br>';
            }

        // in키워드 뒤 배열 제시시 반복문이 돌때마다 0부터 마지막 인덱스가 var i 에 담김

        var game = {
            title: '스타크래프트',
            price: 15000,
            language: '한국어',
            supportOS : ['window64', 'MAC'],
            service :true
        }

        for (var key in game){
            // 속성명이 key로 들어감
            // area3.innerHTML += key+':'+game.key+'<br>';
            // game객체로 가서 key라는 속성명을 찾는데 없다!!
            //in 뒤에 객체 제시시, 반복문이 돌 때마다 해당 객체의 속성명들이 var key(변수명)에 담김
            // 따라서, 사용 불가

            area3.innerHTML += key+':'+game[key]+'<br>';
            // 객체로 반복문 돌릴때에도 직접접근연산자로 객체의 속성명 접근 불가

        }

        }
    </script>

 

 

References

출처: https://inpa.tistory.com/entry/JS-📚-자바스크립트-in-연산자 [👨‍💻 Dev Scroll:티스토리