typescript undefined 조건문 검사 spread syntax 와 &&를 사용하여 코드 단축하기

코드리뷰를 받으면서 더 깔끔한 코드를 작성하기위하여 한가지 트릭을 피드백 받아 정리한다.

 

이를 이해하기 위해서는 spread에 대한 기본 지식이 필요하다.

먼저 spread syntax 부터 찾아 보았다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문 - JavaScript | MDN

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));
// expected output: 6

다음과 같이 spread를 이용할때 적용되는 특성이 있다. 우선 spread를 하게 되면 해당 객체의 모든 property를 다시 불러오게 된다.  또한 이 과정에서 만약 spread에서 false 값이 리턴되게 되면 아무일도 일어나지 않는다고 한다. 이를 이용하여 undefined를 검사하는 코드를 짧게 단축 시킬 수 있다고 한다. 

 

원래 코드

  static fromJson(json) {
    const addressType = json.addressType;
    let department;


    if (json.department) {
      department = json.department;
    }

    return new Address({
      addressType,
	  department
    });
  }
}

수정된 코드

  static fromJson(json) {
    return new Address({
      ...(json.addressType && { addressType: json.addressType }),
      ...(json.department && { department: json.department }),
    });
  }
}

수정된 코드를 보면 json.addressType이 만약 없는 경우 false 값이 나오게 된다. 그러면 &&에 의하여 자동적으로 해당 값은 아무일도 일어나지 않은 상태로 패스가 되게 된다. 만약 값이 있는 경우 해당 값이 Address의 생성자로 들어가게 된다. 이런 식으로 코드를 짜게 되면 불필요한 if문을 통한 빈값이 들어왔을 때의 검사를 생략할 수 있다.