hasOwnProperty등 builtin 메소드 안전하게 사용하기

hasOwnProperty등 builtin 메소드 안전하게 사용하기

참고

문제 상황

eslint 세팅 작업을 하다가 hasOwnProperty 메소드에 빨간 줄이 가는 걸 보았다.

no-prototype-builtins 라는 eslint 규칙인데, 이는 Object.prototype의 builtin으로 제공되는 메서드를 객체에서 직접 호출하기 않도록 하는 규칙이다.

// bad
if (result.data.hasOwnProperty('error')) {
  alert(result.data.error.msg);
}

// good
if (Object.prototype.hasOwnProperty.call(result.data, 'error')) {
  alert(result.data.error.msg);
}

위와 같이 객체에 직접 메소드를 사용하지 않고 Object.prototype.hasOwnProperty.call 등을 사용하는 이유는 다음과 같다.

1. Object.create(null)

Object.create() 메소드에 null을 인자로 주어 객체를 생성하게 되면 Object.prototype을 상속받지 않게 된다.

위와 같이 만들어진 객체에 builtin 메소드를 직접 호출하게 되면 에러가 발생한다.

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: 'simyeong'
}

badObj.hasOwnProperty('name'); // Uncaught TypeError
Object.prototype.hasOwnProperty.call(badObj, 'name'); // true

결론

hasOwnProperty() 등 Object builtin 메소드를 사용할 때는 객체에 직접 호출하지 말고 Object.prototype을 이용하자.