티스토리 뷰

Object 객체란? 

  • Object객체는 객체의 가장 기본적인 형태를 가지고 있는 객체이다. 
  • 아무것도 상속받지 않는 순수한 객체라는 의미 (최상위 객체) -> 모든 객체는 Object객체로 부터 상속받는다. 생략이 되어있을 뿐
  • 모든 객체는 Object 객체를 상속받고, 그런 이유로 모든 객체는 Object 객체의 프로퍼티를 가지고 있다.
  • 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object 를 사용한다. 
  • MDN references를 보면 Object 객체의 카테고리는 2022기준으로  Standard built-in objects(구 Fundamental objects)이다. 

Object API 사용법 

- API를 보면 메소드의 형태가 Object.keys() 인 형태와 Object.prototype.toString()으로 프로토타입(원형)을 끼고있는 형태 두 가지가 있다.

▶이 둘의 차이점은 무엇일까?

'Object.prototype.~' -> 모든객체가 활용가능
'Object.~' - > 하위객체는 사용불가능

 //Object.keys() 객체가 가지고 있는 key을 배열로 만들어서 리턴해주는 메소드
      // 배열과, 객체 두 가지 예시 array는 순서대로 key값을 지정
      const arr = ["a", "b", "c"];
      const obj = {
        name: "cong",
        id: 1132,
        address: "silver town 112",
      };
      console.log("Object.keys(arr)", Object.keys(arr));
      // output ['0', '1', '2']
      console.log("Object.keys(obj)", Object.keys(obj));
      // output   ['name', 'id', 'address']

      //Object.prototype.toString()
      //어떤 객체가 있을 때, 그 객체가 담고있는 값이 무엇인지 사람이 보기 좋게 출력하는 메소드
      const o = new Object();
      console.log("o.toString()", o.toString());

      const a = new Array(1, 2, 3);
      console.log("a.toString()", a.toString());
  • 생성자 함수를 사용하지 않고 리터럴값을 넣고 생성한 객체 역시도 똑같은 작동을 한다.
  • 배열객체 리터럴값 생성

Object 확장

- Object 객체를 확장하면 모든 객체가 접근할 수 있는 API를 만들 수 있다. 

주의) 아래의 코드는 사용할 수 있는 예시를 보여준 것이지 Object객체를 확장하는 것은 권장되지 않습니다. 

// Object 객체의 원형에 needle이라는 인자를 받는 contain 메소드 추가 
 Object.prototype.contain = function (needle) {
        for (let name in this) {
          if (this[name] === needle) {
            // 전달받은 인자와 해당객체의 값이 같으면 true
            return true;
          }
          //for 문을 다 돌았음에도 해당 객체에서 값을 못찾았다면 false반환
          // = 존재하지 않는 값이라면
        }
        return false;
      };

      const o = {
        name: "박말자",
        city: "화성시",
      };
      console.log(o.contain("박말자")); //output: true
      const a = ["햄릿", "오셀로", "리어왕", "맥베스"];
      console.log(a.contain("밤부")); // output: false

Object 객체를 확장하지 않는 것이 바람직한 이유-> 모든 객체에 영향을 주기 때문이다. 

 const a = ["햄릿", "오셀로", "리어왕", "맥베스"];

for (let key in a) {
        console.log(key);
      }
    
      /* output: 
      0
      1
      2
      3
      contain  <- Object객체를 확장시켜서 a 배열에도 contain이 포함됐다.
      */
  • for in 문을 사용할 일이 없고 Object 객체를 확장할 때 내부에 내가 직접 지정한 메소드가 들어간 것을 정확하게 알고 쓴다면 상관이 없지만 객체가 기본적으로 가지고 있을 것으로 예상하고 있는 객체 외에 다른 객체를 가지고 있는 것은 혼란을 야기한다. 
  • 위의 문제를 해결하기 위해서는 프로퍼티가 해당 객체의 직속소속인지를 체크해볼 수 있는 hasOwnProperty()메소드를 사용하면 된다. 
  • hasOwnProperty는 인자로 전달된 속성의 이름이 객체의 속성인지 여부를 판단하여 true or false를 반환한다. 즉, 상속받지 않은 직속 프로퍼티라면 true를 반환하고 prototype으로 상속을 받은 것이라면 false를 반환한다. 
 for (let key in o) {
        if (o.hasOwnProperty(key)) {
          console.log(key, o[key]);
        }
      }
      
  //hasOwnProperty를 활용하면 직속 프로퍼티만 출력된다. 상속받은 contain메소드가 제외되서 출력되겠죠
   //output: name 박말자
 //	    city 화성시

 

 

 

댓글