타입스크립트를 쓰다보면 undefined를 고려하는 경우가 많다.
나같은 경우에는 제일 많이 쓰는 경우는 optional chaining인데,
그거 외에도 몇가지가 있어서 알찬 내용이라 참을 수가 없었다.
default parameter
const defaultZooObj = {
cat: { age: 4, color: 'red' },
dog: { age: 5, color: 'black' },
elephant: { age: 34, color: 'green' },
};
function getElephantAge(zooObj = defaultZooObj) {
return zooObj.elephant.age;
}
const elphantAge = getElephantAge(undefined); //34제일 유명한 방법이다.
값이 들어오지 않았을 때 default 값을 줘서 이를 막는 방법이다.
double negation
const elephantAge = !!zooObj.elephant.age; // undefined가 아닌 false!!는 자바스크립트에서 전부터 존재했던 논리 연산자의 한 종류입니다. 어떤 형태의 값이든 불리언 값으로 강제 변환되고 값의 참/거짓 여부에 따라서 true와 false가 됩니다. 어떤 부수효과로 인해 elephant의 값이 undefined일 경우, 이 연산자를 통해 elephant에 접근하면 false값을 얻습니다. undefined를 제거할 수 있는 것이죠! 에어비엔비 자바스크립트 스타일 가이드에서 자칫 불필요할 수 있는 삼항연산자의 대용으로 추천하고 있는 문법입니다.
이를 통해 타입스크립트에서 boolean 만으로 대처할 수 있다.
nullish coalescing operator
/ undefined가 아니라 0이 할당됩니다.
const elephantAge = zooObj.elephant ?? 0;
// 얼추 위와 같습니다
if (zooObj.elephant) {
return true;
} else {
return false;
}
// optinal chaining과 궁합이 좋습니다.
const elephantAge = zooObj.elephant?.age ?? 0;
널 병합 연산자는 왼쪽의 값이 거짓이라면 오른쪽 값을 할당한다.
https://maxkim-j.github.io/posts/protect-var-against-undefined/
해당 사이트에서는 여기서 끝나지만 객관적으로 추가해서 다루고 싶다.
논리합 ||
왼쪽의 값이 있으면 무조건 왼쪽 값을 넣고,
아닐 경우에는 왼쪽 값을 넣는다.
만약에 둘다 false|| false 라면 왼쪽이 아니어서 오른쪽으로 가고
오른쪽 값이 false라서 false다
논리곱 &&
둘다 트루일 경우에는 오른쪽 값을
둘중 하나라도 false면 false를 뱉는다.
const obj = null;
const myName = obj.name; // TypeError: Cannot read property 'name' of null
이런 것을 활용하면
const obj = null;
const myName = obj && obj.name; // 에러가 발생하지 않는다.
console.log(myName); // null
이런 식으로 막을 수 있다.
https://curryyou.tistory.com/193
마무리
객관적으로 알고 있는 사실을 추가해서 만족한다.
연산자들은 계속해서 복습해서 내가 계속해서 고려하게 하고 싶다.
