One of the first topics you learn about when you get introduced to programming is “The Truth Table”, Do you remember that topic?
In case you don’t, here’s a reminder:
I remember memorizing that table, I kept repeating it day and night, but I never had any real application for it (or so I thought…)
Today I realized that I’ve been using it all the time but I never knew 🤯
The most common use case is showing/hiding a component based on conditions with the && operator
true && <Component/> {/* will render the component*/}
false && <Component/> {/* will hide the component*/}
Does this code block look familiar?
It’s !!
Actually, these conditions resolve to
true && true => true
false && true => false
Which is the result expected if you know the truth table
Another use-case is using the || operator to assign a default value
Ignoring that we could set the initial state to [] instead of null , using the || operator could come in handy.
In this example, we pass a prop called data to the Blog component, posts have a falsy initial value (null ) and the empty array is a truthy value
data={false || []} {/* sends the empty array to Blog component */}
so that expression will resolve to
false || true => true
After the API call resolves successfully and our posts become populated, posts become truthy
true || true => true
But which true value is sent
|| behaviour is to return the first truthy value, opposite to && which returns last truthy value
and since our posts are truthy now
data={true || []} {/* sends posts array to Blog component*/}
Hope you found this post useful,
If you know of any other use cases, feel free to share them in the comment section.
Ciao👋
Top comments (0)