JavaScript(객체 part.1)

객체

객체

---

객체 선언 및 호출

• 객체는 {} 중괄호를 사용해서 생성하고 중괄호 안에 이 객체를 필요로 하는 속성들을 정의한다.
• 속성 : 속성값의 형태로 정의한다.
• 속성값으로는 모든 자료형의 값을 담을 수 있다.

 

객체의 형태

var 변수명 = {

    속성명 : 속성값,

    속성명 : 속성값,

    속성명 : 속성값,

     . . . .

};

---

객체 실습

 

• 대괄호를 이용해서 객체 내부 속성으로 접근 객체명["속성명"]
• .을 이용하여 객체 내부 속성으로 접근 객체명.속성명

<script>
        function test1(){
            var arr=["글자",155,["오늘","내일"]]; //java에서 컬렉션과 유사 ArrayList

            var product={
                pName:"피카츄인형", //j)키와 벨류의 형태로 되어있다(프로덕트에 가격은 30000d이다~)
                price:30000,
                color:["yellow","black","red"]
            }; //자바스크립트의 객체 = java의 HashMap

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

            var area1=document.querySelector("#area1");
            area1.innerHTML += "product : "+product+"<br>";
            //product : [object Object] 타입을 알려주는 형태로 출력

            //객체 내부 속성에 직접적으로 접근하려면
            //방법1 : 대괄호를 이용해서 접근 : 객체명["속성명"]
            area1.innerHTML += "<b>방법1. 객체명['속성명']으로 접근하기 </b>";
            area1.innerHTML += "product['pName'] : "+product['pName']+"<br>";
            area1.innerHTML += "product['price'] : "+product['price']+"<br>";
            area1.innerHTML += "product['color'] : "+product['color']+"<br>";
            area1.innerHTML += "product['color'][0] : "+product['color'][0]+"<br>";

            //방법2 : .을 이용하는 방법 : 객체명.속성명
            area1.innerHTML += "<b>방법2. 객체명.속성명으로 접근하기 </b>";
            area1.innerHTML += "product.pName : "+product.pName + "<br>";
            area1.innerHTML += "product.price : "+product.price + "<br>";
            area1.innerHTML += "product.color : "+product.color + "<br>";
            area1.innerHTML += "product.color[1] : "+product.color[1] + "<br>";
        }
    </script>

 

 

 

• 객체의 속성명 제시시 공백이나 특수문자가 포함될 경우 반드시 문자열의 형태로 제시해야 한다.

<script>
        function test2(){
            //속성명 제시시 공백이나 특수문자가 포함될 경우 반드시 문자열의 형태로 제시해야 한다.
            var user ={
                "user name":"이승기",
                "age!!!":35
            };
            console.log(user);
            
            var area2=document.querySelector("#area2");
            
            // area2.innerHTML+="user name : "+user."user name"+"<br>";
            // area2.innerHTML+="age!!! : "+user."age!!!"+"<br>";
            
            area2.innerHTML+="user name : "+user["user name"]+"<br>";
            area2.innerHTML+="age!!! : "+user["age!!!"]+"<br>";
        }
    </script>

 

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

<script>
        function test3(){

            let area3 = document.querySelector("#area3");

            let place={
                name:"당산",
                weather:"구름낌",
                flooer:20,
                class:["a","b","c","d","e"],
                service:true,
                key:"키키"
            };

            console.log(place);

            for(var key in place){  //j)let 타입(let,const,var) key 변수명)
                //객체명.속성을 통한 방법을 사용하면 진짜 place.key라는 속성을 찾기 때문에 원하는 결과가 나오지 않음
                // area3.innerHTML+=key + ":" +place.key + "<br>"; //key속성에 담긴 "키키"만 나온다
                area3.innerHTML+=key + ":" +place[key] + "<br>";
                //in뒤에 객체를 제시하면
                //반복문이 수행될때마다 객체의 속성명들이 in앞에있는 변수에 담긴다.
            } 
        }
    </script>

 

 

 

 

• 객체의 속성 중 함수 자료형인 속성을 메소드라고 부른다.
• 메소드 속성내에 같은 객체 속성을 호출할땐 this. 을 붙여서 제시해줘야한다.

<h3>객체의 메소드 속성</h3>
    <p>
        객체의 속성 중 함수 자료형인 속성을 메소드라고 부른다.
    </p>

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

    <script>
        function test4(){

            var area4 = document.getElementById("area4");

            var name = "이지민";

            var dog = {
                name:"뭉가",
                kind:"푸숑",
                eat:function(food){
                    // area4.innerHTML +="eat 메소드가 호출되었습니다.";

                    //푸숑종류인 뭉가가 개껌을 먹고있어요
                    area4.innerHTML+=this.kind+"종류인 "+this.name+"가 "+food+"을 먹고있어요. <br>";
                    //메소드 속성내에 같은 객체 속성을 호출할땐 this. 을 붙여서 제시해줘야한다. 
                }
            };
            dog.eat("개껌");
        }
    </script>

 

 

 

• In : 객체 내에 해당 속성이 있는지 확인 시켜주는 키워드
• with: 객체명을 제시하는것을 생략할 수 있음(코드를 줄여주는 키워드)

    <h3>in과 with 키워드</h3>
    <p>
        in : 객체 내에 해당 속성이 있는지 확인 시켜주는 키워드 <br>
        with : 객체명 제시하는것을 생략할 수 있음 (코드를 줄여주는 키워드)
    </p>

    조이름 : <input type="text" id="name"> <br>
    주제 : <input type="text" id="topic"> <br>
    점수 : <input type="number" id="score"> <br>

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

    <script>
        function test5(){

            var name = document.getElementById("name").value;
            var topic = document.querySelector("#topic").value;
            var score = Number(document.getElementById("score").value); //j)number은 문자열로 와서 Number로 함

            var student={
                name:name,
                topic:topic,
                score:score,
                toString:function(){
                    return this.name + " " + this.topic + " "+ this.score+"이건 내가 정의한 tostring";
                }
            };

            var area5 = document.getElementById("area5");
            area5.innerHTML +="student :"+student+"<br>";
            area5.innerHTML +="조이름 : "+name +"<br>";
            area5.innerHTML +="주제 : "+topic+"<br>";
            area5.innerHTML +="점수 : "+score+"<br>";
            //"속성명" in 객체명 : 해당 객체 내에 해당하는 속성이 존재할경우 true 없으면 false 반환
            area5.innerHTML +="name이라는 속성이 있나? : "+("name" in student)+"<br>";
            area5.innerHTML +="topic이라는 속성이 있나? : "+("topic" in student)+"<br>";
            area5.innerHTML +="cash라는 속성이 있나? : "+("cash" in student)+"<br>";
        
        
            with(student){
                area5.innerHTML +="조이름 "+name +"<br>";
                area5.innerHTML +="toString"+toString+"<br>";
            }
            //with(객체명) 을 적으면 안에서 객체명. 을 생략해도 된다.
            with(Math){
                var a=random();
                var b=PI;
            }
            console.log(a);
            console.log(b);
        }
    </script>

 

 

 

 

• 객체내에 중복된 속성은 존재가 불가하다(나중에 선언된 속성을 갖게 된다.)
• with 키워드로 속성추가는 불가능하다 단지 속성값을 가져오는 용도로 사용한다.
• delete 키워드로 속성을 제거할 수 있다.

<h3>객체의 속성 추가 및 제거</h3>

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

    <script>
        function test6(){
            var student ={}; //object 빈 객체 생성

            //console.log(student);

            //객체에 속성 추가
            student.name="페이커";
            student.hobby=["게임","독서"];
            student.job="프로게이머";
            student.age=25;

            student.job="프로그래머"; //객체내에 중복된 속성은 존재 불가 (나중에 선언된 속성을 갖게 된다.)

            with(student){
                address="서울";
            }//with : 속성추가는 불가능 단지 속성값을 가져오는 용도로 사용

            student.toString=function(){
                return "name : "+this.name + " hobby : "+this.hobby+" job : "+this.job+" age : "+this.age+"<br>";
            };

            console.log(student);

            var area6=document.getElementById("area6");
            area6.innerHTML+="student : "+student/*.toString()*/+"<br>";

            //객체에 속성 제거해보기
            delete(student.hobby);
            area6.innerHTML+="hobby제거 후 student : "+student + "<br>";
        }
    </script>