아이템 24. 일관성 있는 별칭 사용하기 #
- 별칭의 값을 변경하면 원래 속성값도 변경된다.
- 별칭 남발 시, 코드를 분석하기 어렵다.
const borough = {
name: 'Brooklyn',
location: [40, -73]
}
const loc = borough.location
// 별칭의 값을 변경하면 원래 속성값도 변경된다.
loc[0] = 0;
console.log(borough.location) // [0, -73]
타입 체크 시에도 신경써야한다. #
function isPointinPolygon(polygon: Polygon, pt: Coordinate) {
polygon.bbox; // 타입 : BoundingBox | undefined
const box = polygon.bbox; // 타입 : BoundingBox | undefined
if (polygon.bbox) {
polygon.bbox // 타입 : BoundingBox
box // 타입 : BoundingBox | undefined
}
}
위 예시에서 타입 체크(속성 체크, if
)는
polygon.bbox
의 타입을 체크했다.(정제했다.)box
의 타입을 체크하지는 않았다. (정제하지는 않았다.)
(일관된 이름 사용을 위해) 비구조화를 이용할 수 있다. #
객체 비구조화를 통해 간결한 문법으로 일관된 이름(변수명)을 사용할 수 있다.
function isPointinPolygon(polygon: Polygon, pt: Coordinate) {
const {bbox} = polygon; // 타입 : BoundingBox | undefined
if (bbox) {
const {x, y} = bbox;
...
}
}
별칭은 타입 체커뿐만 아니라 런타임에도 혼란을 야기할 수 있다. #
아래 예시는 별칭과 원본 값이 다른 값을 참조하는 예시이다.
별칭 대입 시 위 예시들을 봤을 때는 주소 참조인 줄 알았는데,
주소 참조도 아닌 것 같고 어떻게 동작하는 건지 알아봐야할 것 같다.
const {bbox} = polygon;
if (!bbox) {
calculatePolygonBbox(polygon); // 이 함수에서 polygon.bbox 가 채워진다고 가정한다.
// 이제 polygon.bbox 와 bbox 는 다른 값을 참조한다.
}
(제어 흐름 분석) 객체 속성에 대해서는 주의해야한다. #
아래 예시는 (객체에 대해서) 함수 호출 후, 객체의 속성이 변경될 수 있는 예시이다.
function fn(p: Polygon) { /* ... */}
polygon.bbox // 타입 : BoundingBox | undefined
if (polygon.bbox) {
polygon.bbox // 타입 : BoundingBox
fn(poylgon); // 이 함수에서 polygon.bbox 의 값이 제거될 수 있다고 가정해보자. 그럼 밑의 polygon.bbox 의 타입은 BoundingBox | undefined 가 되어야할 것이다.
polygon.bbox // 타입 : BoundingBox
}
위 예시에서 fn(polygon)
과 같이 객체의 속성이 변경된다고 한다면
맨 밑의 polygon.bbox
의 타입은 BoundingBox | undefined 가 되어야할 것이다.
= 즉, 타입 정제에 대해서 무효화가 되는 것이다.
= 이렇게 되면 함수를 호출할 때마다 속성 체크를 반복해야할 것이다.
하지만 타입스크립트는 함수가 타입 정제를 무효화하지 않는다고 가정한다.
그러나 실제로는 무효화될 가능성이 있다는 것을 인지해야 한다.
요약 & 정리 #
- 별칭은 타입스크립트가 타입을 좁히는 것을 방해한다.
- 별칭 사용 시 일관되게 사용해야 한다.
- 비구조화 문법을 사용할 수 있다.
- 함수 호출이 객체 속성 타입 정제에 대해 무효화할 수 있다는 것을 인지해야 한다.
- 속성보다 지역변수 사용하면 타입 정제를 믿을 수 있다.
이번 아이템에서 ‘변수’와 ‘별칭’은 다른 의미로 쓰이고 있는 것 같으니, 주의한다.