[js] hasOwnProperty vs in 차이

작업개요

component에 흩어져 있는 공통 기능을
app.component 전역에서 한 번에 처리하도록 수정하는 가운데 각 component에 조건에 맞는 속성이 있는지 확인하기 위해 in 연산자를 사용했다.

그러다 코드 리뷰 시간에 in보다는
hasOwnProperty가 더 많이 쓰이고
이 경우에 적합한 방법이라는 피드백을 들어 조사하던 중
얼핏 보고 지나갔을 때는 이게 뭐가 달라? 라고 생각하고 넘어갔지만 다시 확인해 보니 차이점이 있어 기록에 남긴다.
 
 

'in' Operator

연산자 in는 객체의 프로토타입 체인 어딘가에 속성이 존재하는지 확인
이는 자신의 속성과 상속된 속성을 모두 찾을 수 있음을 의미
hasOwnProperty와의 차이점은
prototype chain을 따라 올라가 객체가 가지는 프러퍼티 까지 조회하는 특징
 

'hasownproperty' Method

'hasOwnProperty'에서 나온 방법 'Object.prototype'
속성이 객체의 직접적인 속성 으로 존재하는지(즉, 객체의 프로토타입 체인에서 상속되지 않은지) 확인한다
일반적으로 속성 이름이 실제로 개체의 구성원인지 또는
프로토타입 체인에서 발견되었는지 확인하려면 object.hasOwnProperty(변수) 사용
 
 
(예시)

// Base object
let vehicle = {
  wheels: 4
};

// Derived object
let car = Object.create(vehicle);
car.engine = 'V8';
car.doors = 4;

// hasOwnProperty checks
console.log(car.hasOwnProperty('engine'));  // true
console.log(car.hasOwnProperty('wheels'));  // false

// 'in' operator checks
console.log('engine' in car);  // true
console.log('wheels' in car);  // true

 
in 연산자
- 'engine' in car 자동차의 직접적인 속성으로
존재하기 때문에 true 반환
- 'wheels' in car 또한 true를 반환
'wheels'은 자동차의 직접적인 속성은 아니지만, 자동차가 조상인 프로토타입 체인을 통해 접근할 수 있기 때문

hasOwnProperty
- car.hasOwnProperty('engine')은 'engine'이 
자동차 객체의 직접적인 속성이기 때문에 true 반환
- car.hasOwnProperty('wheels')은 
'wheels'가 차량 개체로부터 상속되기 때문에 false 반환
(즉, 자동차의 고유 속성이 아님)
 
 
 

결론

- 프로퍼티가 어디에서 왔는지(소유 또는 상속됨)에 관계없이 속성을 확인해야 한다면 in 연산자를 사용
- 프로퍼티가 개체 자체에 특별히 정의되어 있는지(상속되지 않음) 확인해야 한다면 hasOwnProperty를 사용
- 이러한 차이점을 이해하는 것은 자바스크립트에서 프로토타입 상속 구조가 명확한 개체를 설계할 때 매우 중요