javascript hasOwn 과 hasOwnProperty의 차이는 뭔가요?

https://fe-developers.kakaoent.com/2022/220728-es2022/#3-objecthasown 요 글 참고해 보세요 hasOwn이 hasOwnProperty를 보완하기 위해 생긴겁니다. (질문자님의 코드를 좀 수정했습니다.) 아래 코드와 같은 경우 hasOwnProperty는 문제가 있네요

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const test = {
  test1: 1,
  hasOwnProperty() {
    return 'hello world'
  },
  hasOwn() {
    return 'hello world'
  }
}

Object.hasOwn(test, 'test1')
// true
test.hasOwnProperty('test1')
// 'hello world'

`hasOwn` 과 `hasOwnProperty` 이 두 메서드 모두 객체의 속성 존재 여부를 확인하는 데 사용되지만 기능적인 면에서 약간의 차이가 있어요. 1) hasOwnProperty: hasOwnProperty는 객체의 프로토타입 체인을 무시하고 객체 자체에 속성이 존재하는지 확인하는 메서드입니다. 이 메서드는 Object.prototype에서 상속받아 사용할 수 있습니다. 2) hasOwn: hasOwn은 hasOwnProperty와 동일한 기능을 수행하지만, Object의 정적 메서드로 사용됩니다. 이로 인해 프로토타입 체인에 영향을 받지 않고 사용할 수 있다는 장점이 있습니다. 같은 기능을 하는 두 메서드가 존재하는 이유는 다음과 같아요. hasOwnProperty는 오래된 자바스크립트 메서드로, 최근 ECMAScript 2021(ES12)에 도입된 hasOwn과 동일한 기능을 합니다. 그러나 hasOwnProperty 는 프로토타입 체인에서 상속받아 사용되기 때문에, 객체가 Object.prototype에서 상속받지 않거나 hasOwnProperty 속성을 재정의한 경우 문제가 발생할 수 있습니다. 이에 대한 해결책으로 hasOwn이 도입되었고, 객체의 프로토타입 체인에 상관없이 안전하게 속성 존재 여부를 확인할 수 있습니다.

JavaScript에는 'hasOwn' 메소드가 내장되어 있지 않습니다. 실제로 존재하지 않는 메소드입니다. 'Object.hasOwnProperty' 메소드를 사용하여 객체가 특정 속성을 직접 소유하고 있는지 확인할 수 있습니다. 따라서, 'Object.hasOwnProperty('test1')'은 객체 test가 'test1' 속성을 직접 소유하고 있는지를 확인합니다. 이 경우, 'hasOwnProperty'는 'Object' 생성자의 프로토타입 체인에 정의된 메소드입니다. 'hasOwn' 메소드가 어떤 라이브러리나 커스텀 코드에서 사용되는 것이라면, 해당 라이브러리나 코드에서 정의한 것으로 보입니다. 이 경우, 'hasOwn' 메소드가 'hasOwnProperty'와 동일한 기능을 수행하는 경우일 수 있습니다. 그러나 이는 JavaScript의 내장 기능이 아니므로 정확한 동작과 사용법은 해당 라이브러리나 코드의 문서나 소스 코드를 확인해야 합니다. 같은 기능을 하는 두 개의 메소드가 혼용되어 사용되는 이유는 개발자의 개인적인 스타일이나 선호도에 따라 다를 수 있습니다. 어떤 라이브러리나 프레임워크에서는 'hasOwn'과 같은 메소드를 제공하여 특정한 코드 스타일이나 가독성을 강조하기 위해 사용할 수도 있습니다. 하지만 일반적으로는 JavaScript의 표준 메소드인 'hasOwnProperty'를 사용하는 것이 가장 일반적입니다.