JavaScript 08. 객체_ 1

객체 선언 및 사용 

 객체는 중괄호 {} 를 사용해서 생성하고, 중괄호 안에는 객체에 필요한 속성(property)들을 정의함 
 속성명 : 속성값 의 형태로 정의 (키: 밸류)
 속성값으로는 모든 자료형의 값을 담을 수 있음 

 변수 = {
        속성명:속성값, 
        속성명:속성값,
        ..
    };

 

- 객체 속성에 접근하는 방법 

1) 대괄호 이용하는 방법 : 객체명["속성명"]
2) . 을 이용하는 방법 : 객체명. 속성명 

 <script>
        function test1(){
            const product = {
                pName:"Dry Mango",
                price:4000,
                kind : "pickle",
                ingredient : ["mango","sugar"]
            };
            //자바스크립트에서 객체 == 자바에서의 컬렉션(HashMap)

            const divEl = document.getElementById("area1");
            divEl.innerHTML = "product : "+ product +"<br>"; //자료형이 출력 (toString 정의해야 내용확인)
           
            //객체의 속성에 접근하는 방법
            //방법1. 대괄호 이용하는 방법 : 객체명["속성명"]
            divEl.innerHTML += "<b>객체명['속성명']으로 접근하기</b><br>";
            divEl.innerHTML += "pName : " + product["pName"] + "<br>";
            divEl.innerHTML += "price : " + product["price"] + "<br>";
            divEl.innerHTML += "kind : " + product["kind"] + "<br>";
            divEl.innerHTML += "ingredient : " + product["ingredient"] + "<br>";
            divEl.innerHTML += "ingredinet[0] : " + product["ingredient"][0] + "<br>";
            
            //방법2. .을 이용하는 방법 : 객체명.속성명
            divEl.innerHTML += "<b> 객체명.속성명 으로 접근하기 </b><br>";
            divEl.innerHTML += "pName : " + product.pName + "<br>";
            divEl.innerHTML += "price : " + product.price + "<br>";
            divEl.innerHTML += "kind : " + product.kind + "<br>";
            divEl.innerHTML += "ingredient : " + product.ingredient + "<br>";
            divEl.innerHTML += "ingredient[1] : " + product.ingredient[1]; 

        }
    </script>

 

- 객체 생성시 특이 케이스 

 속성명에 공백이나 특수문자가 있을 경우 따옴표 안에 작성하여 문자열로 묶어주어야한다.
> 객체 속성에 접근할 경우 객체명.속성명 의 방법으로 접근 불가 > 객체명["속성명"]으로 접근해야함 

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

 <script>
        function test2(){
            const user = {
                "user name" : "홍길동",
                "age!!" : 20, 
            };
    		 console.log(user);

            const divEl = document.getElementById("area2");
        
            //[]를 이용 => 객체명["속성명"]
            divEl.innerHTML += "user name : " + user["user name"] + "<br>";
            divEl.innerHTML += "age!! : " + user["age!!"] + "<br>"
        }
    </script>

---

객체에서의 반복문 

 객체가 가지고 있는 모든 속성들에 순차적으로 접근하고자 한다면 반복문 제시가능 
 단, 단순한 for loop 문으로는 불가  / for in문만 사용 가능함 

 for ( let 변수 in 객체명) { };

>> in뒤에 객체 제시시 반복문 돌 때 마다 해당 객체에 순차적으로 접근되는 속성명이 변수에 담김

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

    <script>
        function test3(){
            const arr = ["김말똥",10,true];
	const game = {
                title: "오버워치",
                price: 35000,
                language : "한국어지원",
                company : "블리자드"
            };

            const divEl = document.getElementById("area3");

            for(let key in game){//변수 = 속성값(변수="title"-> 변수="price"..)
    			 divEl.innerHTML += key + " : " + game[key] + "<br>";
            };
          
        }
    </script>

  >> 반복문 안에서 객체의 속성에 접근할때 객체명["속성명"] 을 이용해서 접근해야함 ( 객체명.속성명 이용시 속성명을 하나의 문자열로 인식) 

 

---

 객체의 메소드 속성 

 객체의 속성 중 함수 자료형인 속성을 메소드라고 부름

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

    <script>
        function test4(){
            const divEl = document.getElementById("area4");

            const name = "유한빛";

            const dog = {
                name : "까비",
                kind : "요크셔테리어",
                eat : function(food){   //객체내 함수자료형 - 메소드 속성 
                   // kind 종류인 name 이가 xxx을 먹고있어요
                   // 메소드내에서 같은 객체내의 속성에 접근하고자 할 경우 this.붙여야됨
                   divEl.innerHTML += this.kind + "종류인 " + this.name +"가 "+ food +"를 먹고있어요.";

                } 
            }
            dog.eat("사료");

        }
    </script>

 

---

 in 과 with 키워드 

- in :  객체 내 해당 속성이 있는지 확인해주는 연산자 ( 존재하면 true , 아니면 false)

- with : 객체의 속성 접근시 객체명 제시하는 것을 생략할 수 있음 ( 코드 줄여주는 존재) 

    이름 : <input type="text" id="name"> <br>
    국어 : <input type="number" id="kor"> <br>
    수학 : <input type="number" id="math"> <br>
    영어 : <input type="number" id="eng"> <br><br>

    <button onclick="test5();">실행확인</button>
    <div id="area5" class="area big"></div>

    <script>
        function test5(){
            const student = {
                name:document.getElementById("name").value,
                kor:Number(document.getElementById("kor").value),
                math:Number(document.getElementById("math").value),
                eng:Number(document.getElementById("eng").value),
                getSum:function(){
                    return this.kor + this.eng + this.eng;
                },
                getAvg:function(){
                    return this.getSum()/3;
                },
                toString:function(){ // 오버라이딩처럼 메소드로 정의 
                    return this.name +" " + this.kor +" " + this.math + " " + this.eng;
                }

            };

            console.log(student);
            const divEl = document.getElementById("area5");
            divEl.innerHTML += "student : " + student+ "<br>" //object

            //"속성명" in 객체명  : 객체에 해당 속성이 있으면 true, 없으면 false반환
            divEl.innerHTML += "name속성 있나 : " + ("name" in student) + "<br>"
            divEl.innerHTML += "age속성 있나 : " + ("age" in student) + "<br>"
            
            
            with(student){
                divEl.innerHTML += "학생이름 : " + name + "<br>";
                divEl.innerHTML += "국어점수 : " + kor + "<br>";
                divEl.innerHTML += "수학점수 : " + math + "<br>";
                divEl.innerHTML += "영어점수 : " + eng + "<br>";
                divEl.innerHTML += "총점 : " + getSum() + "<br>";
                divEl.innerHTML += "평균 : " + getAvg() + "<br>";

            }
        }
    </script>

이름 :
국어 :
수학 :
영어 :

 

---

객체의 속성 추가 및 제거 

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

    <script>
        function test6(){
            const student = {};// 빈 객체생성
            // 객체에 속성 추가 
            student.name = "홍길동";
            student.hobby = ["게임","음악감상"];
            student.dream = "프로게이머";
            student.age = 20;

            student.dream = "프로그래머"; // 객체내에 중복된 속성 존재불가 

            student.toString = function(){
                const str = "name : "+this.name + "<br>"
                          + "hobby : "+this.hobby +"<br>" 
                          + "dream : "+this.dream + "<br>"
                          + "age : "+this.age + "<br>";
                return str;
            }       
            
            const divEl = document.getElementById("area6");
            divEl.innerHTML += student + "<hr>";
            
            //객체의 속성 제거
            delete(student.hobby);
            divEl.innerHTML += student;
        }

    </script>