웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 객체의 프로퍼티 값을 비교할때 효과적인 방법은?

Last Modified : 2019-08-12 / Created : 2017-06-16
4,418
View Count
자바스크립트에서 객체의 프로퍼티 값을 비교할때 가장 효과적인 방법은 무엇일까요?




# 자바스크립트 객체의 프로퍼티 값 비교 방법

자바스크립트에서 객체의 프로퍼티 값을 비교할때 주의할 부분이 있습니다. 객체의 존재 여부프로퍼티 또는 메소드가 존재하느냐 .. 그리고 타입은 일치하느냐입니다. 다시 말하면 아래를 확인해야합니다.

  • 객체의 존재여부 체크
  • 비교 할 프로퍼티 및 메소드 체크
  • 타입의 일치 여부

이때 객체 및 프로퍼티, 메소드 등이 존재하지 않는 undefined라면 코드의 실행과정에서 에러가 발생할 수 있습니다. 이에 대한 예외처리를 할 수 있으나 에러가 End 유저에게 발생하지 않도록 하려면 이를 확인 비교하는 검증과정이 필요합니다.

아래는 타입 에러를 고려하지 않을 경우의 코드값입니다. 넘겨줄 파라미터의 값이 항상 정확하다면 에러는 발생하지 않을지도 모릅니다. 하지만 어떤 값이 넘어갈지는 항상 보장할 수 없으므로 여러가지를 체크 확인하기 위한 방법이 필요합니다. 만약 myObj라는 객체의 name값을 확인 및 비교하는 경우를 예로 들어보겠습니다.
var myObj;

이제 객체의 프로퍼티가 가진 값을 비교하기 위한 코드로 아래와 같이 작성이 가능합니다.
if (myObj !== undefined) {
  // myObj 객체가 실제로 존재하는지를 확인하기
  if (myObj.name !== undefined) {
    // myObj 객체가 name 프로퍼티를 가지고 있는지 확인하기
    if (typeof myObj.name === 'string') {
      // 실행할 코드 구문
    }
  }
}

위 코드는 조금 복잡해보이지만 정상적인 코드 구문입니다. 다만 검증하는 과정에서 다수의 if문으로 가독성이 심하게 떨어집니다. 코드의 길이도 매우 길다 할 수 있습니다. 이를 좀 더 효과적으로 사용하기 위한 방법은 무엇이 있을까요? 아래 코드를 봐주세요.



# 수정 후 객체 내부의 프로퍼티 값을 비교하는 코드

위 코드와 동일하게 작동하는 또 하나의 코드입니다.
var myObj;

if (myObj ? myObj.name ? typeof myObj.name === 'string' ? true : false : false : false) {
  console.log(myObj.name);
}

일단 코드의 길이가 확인하게 줄었습니다. 그리고 가독성 역시 이 전보다 확연하게 차이난다고 말할 수 있습니다. 이처럼 간단한 코드이지만 자주 사용되는 코드임으로 코드 스타일을 개선하면 코드의 길이와 가독성 역시 크게 향상할 수 있을 것입니다.


! Tips. 모든 실행단위 코드, 함수등은 에러가 발생해서는 안되므로 위와 같이 코드를 작성하여 과정이 필요합니다.

더 나은 방법이 있다면 추가하도록 하겠습니다.

Previous

자바스크립트 생성자함수의 상속 알아보기

Previous

자바스크립트 익명함수 알아보기