?

zmin·2022년 8월 4일
0

Nullish coalescing operator

??

비교연산자 && 과 언뜻 하는 일이 비슷해보이지만 약간 다르다

falsy한 값이 들어오더라도 값이라고 인지할 수 있는 연산자! 오로지 undefined와 null만 거짓으로 판정

null ?? 'hi' // hi
null ?? false // false
false ?? null // false
undefined ?? 'hi' // hi

Logical Nullish Assignment

??=

할당 받을 대상이 null 또는 undefined라면 오른쪽의 값을 할당하겠다는 의미

만약 빈 값이 아니라면 할당하지 않음

const obj = {};
console.log(obj.greeting); // undefined

obj.greeting ??= 'hi';
obj.greeting ??= 'hello';

console.log(obj.greeting); // hi

Optional Chaining

?.

어떤 객체에서 존재하지 않는 프로퍼티에 대해 접근하려 하면 그저 값이 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)에 대해 무시한다고 나와있기 때문에 결과가 크게 문제되진 않지만

공식 docs

또 다른 라이브러리들은 문제가 생길 수도 있기 때문에 이를 확실하게 해주어야함 → 되도록이면 사용하지 않고 예상가능하게 코드를 짜는 것이 좋을 듯함

profile
308 Permanent Redirect

0개의 댓글