??
비교연산자 && 과 언뜻 하는 일이 비슷해보이지만 약간 다르다
falsy한 값이 들어오더라도 값이라고 인지할 수 있는 연산자! 오로지 undefined와 null만 거짓으로 판정
null ?? 'hi' // hi
null ?? false // false
false ?? null // false
undefined ?? 'hi' // hi
??=
할당 받을 대상이 null 또는 undefined라면 오른쪽의 값을 할당하겠다는 의미
만약 빈 값이 아니라면 할당하지 않음
const obj = {};
console.log(obj.greeting); // undefined
obj.greeting ??= 'hi';
obj.greeting ??= 'hello';
console.log(obj.greeting); // hi
?.
어떤 객체에서 존재하지 않는 프로퍼티에 대해 접근하려 하면 그저 값이 undefined로 나올 뿐이지만 거기서 다시 프로퍼티에 접근하려 하면 에러가 난다.
그러니까 undefined 나 null 값의 프로퍼티에 접근하려하면 에러가 나는 것
→ 이 에러처리를 알아서 해줌
앞의 값이 undefined/null 이라면 더이상 탐색하지 않고 바로 undefined 값을 반환하고
값이 존재한다면 일단 계속 탐색한다 (물론 그 뒤 프로퍼티가 비어있다면 undefined/null가 나오겠지만)
→ 그래서 값이 undefined/null인지 아닌지에 따라 계속 값을 탐색해 나간다고 해서 Optional Chaining
const obj = {
test: {
greeting: 'hi',
value: null
},
};
obj.text.value // error!!
obj.text?.value // undefined
obj.test?.greeting // hi
obj.test?.value // null
obj.test?.values // undefined
💡 옵셔널 체이닝은 오류를 발생하지 않도록, 어쩌면 조건문을 길게 쓸 것을 짧게 줄여쓰며 오류를 회피하게 만들어주긴 하지만 정말 회피이기 때문에 정말 오류가 일어나서 이를 고쳐야할 때 고치지 못 할 수도 있다. 이를 잘 고려하여 정말 필요할 때 사용해야함 → 모르는 걸 쓰면 안된다
3항 연산자의 경우 참 거짓에 대한 반환 값을 개발자가 직접 컨트롤 할 수 있어 좋다. 단축평가의 경우 해당 값이 반환되기 때문에 편리하다면 편리할 수 있겠지만 어떤 값이 반환될 지를 잘 고려해야한다.
리액트의 jsx에서 &&을 써도 되는 이유는 불리언 값이 그냥 나올 경우 무시하기 때문 → 렌더링에 상관 없음(’true’라는 글이 들어가지 않음)
남들이 쓴다고 무조건 쓰는게 좋은게 아님
이 경우 clickableType에 잘못된 값이 들어가면 undefined가 나온다는 것을 인지하고 이 처리가 어떻게 되는 지에 대해 고민해야함
이 경우 styled component는
null
undefined
‘’
(empty string)에 대해 무시한다고 나와있기 때문에 결과가 크게 문제되진 않지만또 다른 라이브러리들은 문제가 생길 수도 있기 때문에 이를 확실하게 해주어야함 → 되도록이면 사용하지 않고 예상가능하게 코드를 짜는 것이 좋을 듯함