[JavaScript] 객체2: 객체의 메소드 참조/ 객체내 속성호출(this) in, with / toString메소드

객체의 메소드 참조

객체의 속성중 함수자료형인 속성을 메소드라고 부름
(객체 내부에 존재하는 함수를 메소드라 부름)

객체의 메소드를 참조하는 방법
: 객체이름.메소드이름()
메소드를 참조할 때 메소드 이름 뒤에 괄호(())를 붙이지 않으면,
메소드가 아닌 프로퍼티 그 자체를 참조하게 됨
.따라서 괄호를 사용하지 않고 프로퍼티 그 자체를 참조하게 되면 해당 메소드의 정의 그 자체가 반환

 같은 객체 내 속성 호출

함수 실행코드 중 같은 객체 내 속성 호출시 경우 this.을 앞에 붙여야함
==> 만약 속성명과 변수명이 동일한 경우 this.를  붙이지 않으면 변수가 호출됨

 <button onclick="test4();">실행확인</button>
    <div id="area4" class="area small"></div>
    <script>
        function test4(){
            var area4 = document.getElementById('area4');
            var name='가나다';
            var cat = {
                name : '고순이',
                kind : '길냥이',
                eat: function(food){// 이 경우 속성명이 function의 이름이 되므로 익명함수로 작성
                
                    area4.innerHTML += this.kind +'종류인'+this.name+'가'+food+'를 먹고있어요.<br>';
                    // 메소드 속성 안에서 같은 객체 내의 속성을 호출할 경우 this.을 앞에 붙여야함
                    // 만약 속성명과 변수명이 동일한 경우 this.을 안붙이면 변수가 호출됨 
                }
            };
            cat.eat('츄르');
        }
    </script>

*** 속성의 속성값으로 일반 값(연산식)이 아닌 함수를 대입하는 이유:

일반 연산식을 속성값으로 대입하게 되면,
클래스 내 { 속성: 속성값} 으로 기입되는 순간 속성=속성값이 대입되므로
추후 속성값이 덮어쓰기로 변경되었을 경우 변경된 속성값을 인지하지 못하며, 원 대입값이 유지된다

반면,
속성값으로 함수를 사용하게 되면,
클래스 { 속성 : 함수() } 에서 속성=함수 (가변) 이 대입되므로 
해당 함수가 호출되는 순간의 속성값을 가져오게 되어
추후 속성값이 덮어쓰기로 변경되었을 경우 변경된 속성값을 인지한다

toString메소드 오버라이딩

객체 내 toString메소드는 Object프로토타입의 toString()메소드를 이어받음

Object프로토타입의 toString()
- 출력문에서 toString생략가능
- 출력시 object Object 반환
- 일반적으로 오버라이딩하여 해당 객체의 모든 속성값을 반환하도록 재정의

    이름: <input type="text" id="name"><br>
    국어: <input type="text" id="kor"><br>
    수학: <input type="text" id="math"><br>
    영어: <input type="text" id="eng"><br>
    <button onclick="test5();">실행확인</button>
    <div id="area5" class="area big"></div>
    <script>
        function test5(){
         var name= document.getElementById('name').value; 
         // 요소객체
         var kor= Number(document.getElementById('kor').value); 
         // Number형으로 형변환 하지 않을시 text형임
         var math= Number(document.getElementById('math').value); 
         var eng= Number(document.getElementById('eng').value); 
            
         var student =  {
             name : name,
             kor: kor,
             math: math,
             eng : eng,

            getSum: function(){
                return this.kor+this.math+this.eng;
                // Number형으로 형변환을 안했다면 문자+문자+문자 = 문자! 였을것,,
                // --> + 산술연산 불가 (NaN)
            },

            getAvg: function(){
                return this.getSum()/3;
            }, 
            
            toString : function(){
                return this.name + ','+ this.kor + ','+this.math +','+this.eng;
          

          
          } // object프로토타입의 toString -> [object object] 반환
              // 따라서, 객체의 각 속성값을 반환받으려면 toString속성을 오버라이딩하여야함
        
            

            };
         console.log(student);

 

* in과 with

in: 객체가 가지고 있는 프로퍼티 및 메소드의 존재 여부를 Boolean으로 반환

특정 메소드, 프로퍼티 key값 이름의 존재 여부를 검증하기 위한 목적으로 사용
존재하지 않는 메소드, 프로퍼티 동작시 에러 발생 --> 사전확인 목적

[표현법]
'속성명' in 객체명 
반환타입:  boolean
객체 내 해당 속성이 존재할 시 true
                                 존재하지 않을 시 false

with: 객체 제어문, 코드를 줄여주는 키워드

객체에 포함된 속성이나 메소드를 여러 번 사용해야할 때
with문을 이용하게 되면 반복적인 코드를 생략
단, with키워드를 이용한 객체 속성 추가는 불가함 (getter역할은 가능)


[표현법]
with (반복이 발생하는 객체명A) {
       원 코드에서 A를 제외한 코드
}

 

 var area5 = document.getElementById('area5')
         area5.innerHTML += 'student: ' + student +'<br>'; // student: [object Object]
         area5.innerHTML += 'student: ' + student.toString() +'<br>'; // student: [object Object]
      
         
         
         // 해당객체에 해당 속성이 존재하나? => 속성명 in 객체명 : 있으면 true, 없으면 false
         area5.innerHTML += 'student에 name 속성이 존재하나? : '+('name' in student) + '<br>'; // true
         area5.innerHTML += 'student에 kor 속성이 존재하나? : '+('kor' in student) + '<br>'; // true
         area5.innerHTML += 'student에 math 속성이 존재하나? : '+('math' in student) + '<br>'; // true
         area5.innerHTML += 'student에 eng 속성이 존재하나? : '+('eng' in student) + '<br>'; // true
         area5.innerHTML += 'student에 test 속성이 존재하나? : '+('test' in student) + '<br>'; // false
       
         // 괄호를 붙이지 않으면 연산자우선순위때문에 앞 문자열과 name이 붙어버림


         area5.innerHTML += 'student.name'+student.name+'<br>';
         area5.innerHTML += 'student.kor'+student.kor+'<br>';
         area5.innerHTML += 'student.name'+student.name+'<br>';
         area5.innerHTML += 'student.kor'+student.kor+'<br>';
         // 해당 객체의 속성에 반복하여 접근할 때- with (객체명)(속성명으로만 접근)

         with(student){
            area5.innerHTML += '학생이름: '+ name +'<br>';
            area5.innerHTML += '국어점수: '+ kor +'<br>';
            area5.innerHTML += '수학점수: '+ math +'<br>';
            area5.innerHTML += '영어점수: '+ eng +'<br>';
            area5.innerHTML += 'toString: '+ toString() +'<br>';
            area5.innerHTML += 'getSum: '+ getSum() +'<br>';
            area5.innerHTML += 'getSum: '+ getAvg() +'<br>';
            

         }
    
            // 출력문 작성시 toString메소드가 있으면 
            // 객체를 출력하면 toString메소드가 붙음(배열과 마찬가지)
        }


        //JavaScript
        // typeof:string, number, boolean, function, object (배열, 객체)

    </script>

객체의 속성 **추가 및 제거

추가
[표현법]
객체명.속성명 = 속성값;
객체명['속성명']= 속성값;

제거
[표현법]
delete(객체명.속성명);
delete(객체명['속성명']);

 <button onclick="test6();">실행확인</button>
    <div id="area6" class="area small"></div>
    <script>
        function test6(){
            // 빈 배열 생성
            var arr = [];
            // 빈 객체
            var student = {  };
            // *객체의 속성을 추가하는 방법
            // 객체.속성명 = 속성값;
            student.name = '홍길동';
            console.log(student);
             // name:"홍길동"
            student.hobby = ['등산'];
            student.dream = ['선생님'];
            student.age = 18;

            // 주의사항: 속성추가시 속성명이 중복된다면? : 덮어쓰기!

            student.dream = '돈많은 백수';
            console.log(student);
            //with 키워드를 쓴다면?

            with (student){
                address = '한양';
                phone = '010-123-2345';
            }
            // 불가능!! with 키워드로 속성 추가는 불가능함/ 속성값을 가져오는 getter용도로만 사용 
            
            document.getElementById('area6').innerHTML = student+'<br>'; // [object Object]
            // object 프로토타입의 toString메소드를 이어받음
            // 내부적으로는 toString메소드가 붙어서, student.toString()
            // 따라서 원래  [object Object]라고 나오는 toString을 오버라이딩

            student.toString =  function(){
                return 'name : '+this.name + '<br>';
                    +  'hobby: '+this.hobby +'<br>';
                    +  'dream: '+this.drea +'<br>';
                    + 'age: '+ this.age + '<br>'
            }
            // this: 나 자신이라는 객체에 접근한 것!
            // this.name 나 자신이 가지고 있는 name 속성에 접근한 것
            document.getElementById('area6').innerHTML += student; // [object Object]

            // 객체의 속성 제거
            // delete(객체명.속성명) : 객체의 속성을 제거할 수 있는 함수
            delete(student.toString);
            document.getElementById('area6').innerHTML += student;
            console.log(student);
            //toString요소가 제거된 후에는, 오버라이딩한 속성이 사라졌으므로 
            // 프로퍼티로부터 프로퍼티 속성으로 출력됨
            /// 프로퍼티로부터 속성을 물려받는건가..? toString은 속성을 물려받은것?

        }

    </script>