객체에 속성이 있는지 JavaScript 확인

개체에 특정 속성이 있는지 확인해야 할 수도 있습니다.

사용자 개체가 있다고 가정해 보겠습니다. 선택적으로 이메일 속성을 설정할 수 있습니다. 그렇지 않은 경우 사용자가 이메일을 작성할 수 있도록 양식을 표시하려고 합니다.

이 필드가 존재하는지 어떻게 확인할 수 있습니까?

const userOne = {
  name: 'Chris Bongers',
  email: '[email protected]',
};

const userTwo = {
  name: 'John Do',
};

이에 답하기 위해 여러 가지 방법이 있습니다. 가장 일반적인 세 ​​가지를 살펴 보겠습니다.

객체에 속성이 있는지 확인하기 위해 hasOwnProperty 사용

hasOwnProperty를 사용하여 개체에 Own 속성이 있는지 평가할 수 있습니다.

예제 데이터에서 어떻게 작동하는지 봅시다.

console.log(userOne.hasOwnProperty('email'));
// Returns: true

console.log(userTwo.hasOwnProperty('email'));
// Returns: false

그것은 완벽하다. 하지만 이 방법을 사용하는 데는 함정이 있습니다. 확장 객체 속성이 아닌 속성Own에 대해서만 작동합니다.

아시다시피 객체는 toString 메소드와 함께 제공되며 이것이 존재하는지 확인하려고 하면 false를 반환합니다. (존재하는 동안)

console.log(userOne.toString());
// Returns: [object Object]

console.log(userOne.hasOwnProperty('toString'));
// Returns false

객체에 속성이 있는지 확인하기 위해 in 사용

개체에 속성이 있는지 확인하는 또 다른 더 명확한 방법은 using in 입니다.

이것은 자체 및 상속된 속성을 체크인할 수 있습니다.

console.log('email' in userOne);
// Returns: true

console.log('email' in userTwo);
// Returns: false

console.log('toString' in userOne);
// Returns: true

undefined를 사용하여 객체에 속성이 있는지 확인

마지막 방법은 정의되지 않은 검사를 사용하는 것입니다. 이 방법은 생략된 속성에 대해 작동하지만 속성이 존재하지만 정의되지 않은 값이 있는 경우 두통을 유발할 수 있습니다.

console.log(userOne.email !== undefined);
// Returns: true

console.log(userTwo.email !== undefined);
// Returns: false

console.log(userOne.toString !== undefined);
// Returns: true

이제 다음 예제에서 어떤 일이 발생하는지 살펴보겠습니다.

const userThree = {
  name: 'Steve Stevenson',
  email: undefined,
};

console.log(userThree.email !== undefined);
// Returns: false

수표는 허용되지만 우리가 찾고 있는 것이 아닙니다.

결론

개체가 특정 속성을 보유하고 있는지 알아내려고 할 때 우리는 얼마나 안전한지 고려해야 합니다.

일반적으로 undefined 수표를 사용하지 않는 것이 좋습니다.
Own 속성만 평가하는 경우 hasOwnProperty는 솔리드 솔루션입니다.

그러나 안전한 편에 서서 in 검사를 사용하여 개체에 속성이 있는지 확인하는 것이 좋습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나