[React] Do not access Object.prototype method 'hasOwnProperty' from target object. 에러 해결 방법

🎯 Do not access Object.prototype method 'hasOwnProperty' from target object. 에러 해결 방법

• hasOwnProperty를 사용하려고 했는데 eslint 오류가 발생했다.

 

📝 해결 방법 (Object.prototype.hasOwnProperty.call)

// error
var hasBarProperty = foo.hasOwnProperty("bar");
var isPrototypeOfBar = foo.isPrototypeOf(bar);
var barIsEnumerable = foo.propertyIsEnumerable("bar");

// correct
var hasBarProperty = Object.prototype.hasOwnProperty.call(foo, "bar");
var isPrototypeOfBar = Object.prototype.isPrototypeOf.call(foo, bar);
var barIsEnumerable = {}.propertyIsEnumerable.call(foo, "bar");

// 나의 사용 예
// error
languageCountObj.prototype.hasOwnProperty(it.language)

// correct
Object.prototype.hasOwnProperty.call(languageCountObj, it.language)

• Object.prototype의 builtin 메서드(hasOwnProperty, isPrototypeOf)를 호출하는 방법으로는
  • 객체에서 직접 호출
  • Object.prototype을 이용하여 호출이 있다.
• Object.prototype의 builtin으로 제공되는 메서드를 객체에서 직접 호출하지 않도록 하는 규칙이다.
  1. Object.create(null)
     1. Object.create 메서드에 null을 인자로 주어 객체를 생성하게 되면 Object.prototype을 상속받지 않게 된다.

     const obj = Object.create(null);
     obj.name = 'simyeong';
     
     obj.hasOwnProperty; // undefined
     obj.hasOwnProperty('name'); // Uncaught TypeError
     Object.prototype.hasOwnProperty.call(obj, 'name'); // true

  2. 속성이 builtin 메서드의 이름과 같은 경우
     • 객체에 builtin으로 제공되는 메서드와 같은 이름의 키를 객체가 가지고 있다면 예상한 대로 동작하지 않을 수 있다.

     const badObj = {
       hasOwnProperty: '1',
       name: 'hong'
     }
     
     badObj.hasOwnProperty('name'); // Uncaught TypeError
     Object.prototype.hasOwnProperty.call(badObj, 'name'); // true

 

📝 해결 코드

const getUsersReposLanguage = async () => {
    const res = await api.getReposLanguage();
    const languageCountObj = {};

    if (res.success) {
      const reposLanguageArray = res.data;
      reposLanguageArray.forEach((it) => {
        if (
          Object.prototype.hasOwnProperty.call(languageCountObj, it.language)
        ) {
          languageCountObj[it.language] += 1;
        } else {
          languageCountObj[it.language] = 1;
        }
      });

      const languageCountArray = [];
      const language = Object.keys(languageCountObj);
      const values = Object.values(languageCountObj);

      for (let i = 0; i < language.length; i += 1) {
        languageCountArray.push({
          name: language[i],
          value: values[i],
        });
      }

      languageCountArray.sort((a, b) => b.count - a.count);
      console.log(languageCountArray);
    }
  };

 

📌 참고

• How do I access the Object.prototype method in the following logic?
• hasOwnProperty등 builtin 메소드 안전하게 사용하기
• 코딩 컨벤션 업무를 하며 알게 된 것들 - 2