javascript / beginner
Snippet
Displaying Boolean State with Conditional Expressions
Boolean values store truthy or falsy states. In Svelte templates, JavaScript ternary operators allow dynamic inline formatting based on boolean state variables.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
<script>let isSubscribed = false;function toggleStatus() {isSubscribed = !isSubscribed;}</script><p>Status: {isSubscribed ? 'Active' : 'Inactive'}</p><button on:click={toggleStatus}>Toggle</button>
svelte
Breakdown
1
let isSubscribed = false;
Initializes a boolean variable to represent subscription status.
2
isSubscribed = !isSubscribed;
Inverts the boolean flag using the logical NOT operator.
3
<p>Status: {isSubscribed ? 'Active' : 'Inactive'}</p>
Evaluates the boolean inline and outputs 'Active' if true and 'Inactive' if false.