title: In Svelte JS, how does reactive variable work if some variable is just printed but doesn't participate in giving out a value?
body: <p>The code in <a href="https://svelte.dev/repl/f8db4771ba794c658d7c25a6e72d1b46?version=3.18.1" rel="noreferrer">https://svelte.dev/repl/f8db4771ba794c658d7c25a6e72d1b46?version=3.18.1</a></p>
  
  <p>has two "reactive variables":</p>
  
  <pre><code>$: nameUpperCase = name.toUpperCase();
  
  $: if (name === "city") { 
      console.log("RUNNING HERE 01", age);
  } else {
      console.log("RUNNING HERE 02", age);
  }
  </code></pre>
  
  <p>if the value of <code>name</code> changes, then <code>nameUpperCase</code> also get changed. This one is easy.</p>
  
  <p>But for the second part, it seems when the value of <code>name</code> or <code>age</code> is changed, then the <code>if</code> line is evaluated.  If the <code>age</code> is removed from the <code>console.log()</code>, as in <a href="https://svelte.dev/repl/68c2cdea2bfd462caa5ac5519fb8b99d?version=3.18.1" rel="noreferrer">https://svelte.dev/repl/68c2cdea2bfd462caa5ac5519fb8b99d?version=3.18.1</a> then it doesn't matter if <code>age</code> changes. The <code>if</code> line is not evaluated.</p>
  
  <p>But the <code>age</code> never participate in generating any final value for the <code>if</code> statement. It is merely printed out, and the <code>console.log</code> always return <code>undefined</code>.  So what is the rule?  Somehow Svelte "magically" gathers all variables after the <code>$:</code>, and then if any of them change, then execute the line after the <code>$:</code>?  So even if the variable doesn't participate in forming some final value, it still is considered?</p>