[JavaScript] 단축평가(Short circuit) & truthy와 falsy

[학습 관련 질문]

const [inStockOnly, setInStockOnly] = useState<boolean>(false)

const filteredProducts = filterProducts(products, filterText)
.filter((product) => !inStockOnly || product.stocked);

 

inStockOnly 가 아니거나 product.stocked 가 true 일때 새로운 배열에 product 값을 담는다.

 

질문

.filter((product) => !inStockOnly product.stocked); !inStockOnly 이 부분은 어떤걸 위해 존재하는 조건인지 궁금합니다.

 

 

답변

inStockOnly는 재고가 존재하는지를 boolean 값으로 판단하고 있는 state.

그런데 !inStockOnly 라는 조건 없이 product.stocked 라는 조건만 넣게 되면

처음부터 재고가 있는 것들만 보여지기 때문에,

inStockOnly를 앞에 둬서 inStockOnly가 true일때(체크가 되었을 때)만,

product.stocked(재고가 있는 것)을 가져온다는 조건식으로 보면 된다.

 

JavaScript의 단축평가(Short circuit)의 문법

앞에 조건이 true이면, ||이기 때문에 앞에서 끝나버리고,

앞에 조건이 false이면 뒤에 조건까지 보고 true,false인지 판단

 

inStockOnly가 false이면 (체크박스에 체크가 되지 않은 상태) 바로 true로 평가되므로 어떠한 필터없이 모든 제품이 보여지고,

만약 inStockOnly가 true이면 앞에 조건이 false이기 때문에 뒤에 조건을 판단해서 true,false를 본다.

 

어떻게 평가되는지 더 정확하게 공부하시려면 truthy와 falsy를 꼭 살펴보자.

---

단축평가(Short circuit)

 

논리 연산자들은 왼쪽 -> 오른쪽 순으로 실행된다.

이 연산자들은 결가를 얻게 되는 순간 단축 평가 (평가의 중단)를 실행한다.

 

앞에 조건이 true이면, ||이기 때문에 앞에서 끝나버린다.

앞에 조건이 false이면 뒤에 조건까지 보고 true,false인지 판단한다.

 

 

예시

let today = "기뻐";
let tommrow = (today || "슬퍼");

내용을 가진 문자열은 true 이므로 tomorrow에 today값이 대입된다.

 

let today = "";
let tommrow = (today || "슬퍼");

tomorrow가 빈 값인 경우 뒤의 조건이 실행된다.

 

---

truthy와 falsy

 

falsy 값은 뭘까?

 

https://developer.mozilla.org/en-US/docs/Glossary/Falsy

Falsy - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

 

아래 값들은 false로 평가되는 Falsy 값이다.

• false
• undefined
• null
• 0, -0
• NaN
• ''(빈 문자열)

 

falsy로 평가되는것들 앞에 ! 를 붙이면 truthy 값이 된다.