[operator] + !! || &&

+ !! || &&

• ||와 &&는 잘쓰면 if문을 훨씬 덜 쓸수 있어서 평범하게 if문을 쓰지 못하는 jsx에서 매우 유용
• !!는 이중부정으로 boolean 값으로 형변환 해준다.
• • 는 덧셈 연산자이지만 숫자형 문자열 앞에 쓰면 number 값으로 형변환 해준다

+

• parseInt()메소드나 Number() 생성자 함수대신 사용할 수 있다.
• 숫자형 문자열을 숫자랑 === 비교해야 할때 간단하게 사용하기 좋다.

let str = "1234";
console.log(typeof parseInt(str), parseInt(str); // number, 1234
console.log(typeof +str, +str); // number, 1234

!!

• 값이 있으면 true 값이 없는 것들을 전부 false로 변환해줌
• 값이 없는 것들 : null, undefined, "", 0

let _null = null;
let _undefined;
let _0 = 0;
let _empty = '';
console.log(_null, _undefined, _0, _empty); // null undefined 0 ''
console.log(!!_null, !!_undefined, !!_0, !!_empty); // false false false false
var _num = 1;
let _str = "abc";
let _obj = {}; // 내부에 할당이 안되있어도 메모리에 존재하므로 true
let _arr = []; // 배열도 객체와 마찬가지
console.log(!!_num, !!_str, !!_obj, !!_arr); // true true true true

||

• 없으면으로 해석

// 함수에서 value 값이 0이면 '' 아니면 value 값 그대로 return 해야 하는 경우

// if문
if(value === 0) return value = '';
else value = return value;

// 삼항 연산자
return value === 0 ? '' : code;

// || 연산자
return value || '';

&&

• 있으면으로 해석

const App = () => {
  const nameHook = useInput("");
  const { payload, loading, error } = useFetch("http://aws.random.cat/meow");

  return (
    <div>
      {loading && <span>loading your cat</span>} // 로딩중이면
      {!loading && error && <span>{error}</span>} // 로딩중이 아니면서 에러가 있으면
      {!loading && payload && <img src={payload.file} width="150" />} // 로딩중이 아니면서 페이로드가 있으면
    </div>
  );
};