2023-06-19 TIL

[js] || 연산자

🚫 문제 발생

...
if (!quizType) {
    quizzes = await getQuizApi();
  } else {
    quizzes = await getQuizApi(quizType);
  }
  quizCounts = quizzes["counts"];
  quizzesOneOfTwo = quizzes["one_of_two"];
  quizzesMeaning = quizzes["meaning"];
  quizzesFillInTheBlank = quizzes["fill_in_the_blank"];
...

지금 코드 구성이 이렇게 되어있는데,

quizzes를 받아왔을 때 quizzes["one_of_two"], quizzes["meaning"], quizzes["fill_in_the_blank"] 같은 친구들이 아예 데이터에 존재하지 않을 경우가 생긴다.

그럼 iterable 하지 않다는 오류를 뱉어버린다.
근데 우리는 없는 경우에도 넘어갈 수 있게 처리를 해줘야 한다!

그럴 때 쓰는게 || 연산자다.

💡 논리 연산자 ||

참고 글

보통 불리언(논리) 값과 함께 사용해서 불리언 값을 반환하는 연산자

간단히 말하자면 OR같은 역할을 한다.
예시를 보면 더 쉽다.

let a = 'me' || 'you';    // t || t는 me 반환
let b = false || 'you';    // f || t는 you 반환
let c = 'me' || false;    // t || f는 me 반환
let d = false || false;    // f || f는 false 반환

이런식으로, 둘다 True값이면 왼쪽걸 반환하고
한쪽이 False면 True인 쪽을 반환한다.
둘다 False면 마지막에 검증 한 값을 반환한다.

✅ 코드에 실전 적용

  quizzesOneOfTwo = quizzes["one_of_two"] || [];
  quizzesMeaning = quizzes["meaning"] || [];
  quizzesFillInTheBlank = quizzes["fill_in_the_blank"] || [];

간단하다!!
값이 있으면 왼쪽걸 반환하고,
없으면 빈 리스트를 반환한다!!

실행해보니 아주 잘됨.