title: Ternary not working correctly in array .find method JavaScript
body: <p>I encountered some perplexing behavior in using a ternary within the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find" rel="nofollow noreferrer">.find</a> method of an array. When searching for an object:</p>
  <p>Consider this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const list = [
    { id: 1, name: "dave"},
    { id: 3, name: "choi"},
    {id: 4, name: "bob"}
  ]
  
  // this works
  let isBoy = true
  console.log(list.find(v =&gt; v.name === isBoy ? "dave" : "choi"))
  
  
  // this don't work
  isBoy = false
  console.log(list.find(v =&gt; v.name === isBoy ? "dave" : "choi"))
  
  // this always works: use () around ternary
  console.log(list.find(v =&gt; v.name === (isBoy ? "dave" : "choi")))
  isBoy = true
  console.log(list.find(v =&gt; v.name === (isBoy ? "dave" : "choi")))</code></pre>
  </div>
  </div>
  </p>
  <p>What surprised me was that</p>
  <pre><code>// this don't work
  isBoy = false
  console.log(list.find(v =&gt; v.name === isBoy ? &quot;dave&quot; : &quot;choi&quot;))
  </code></pre>
  <p>It will return <code>&quot;dave&quot;</code> instead of <code>&quot;choi&quot;</code>. This was the cause of a recently very hard to find bug today. Can anyone elucidate what is going on here and why this is expected behavior?</p>
  <p>Why does the parenthesis matter? What should I read up on to understand this better? Is this an order of operations thing? My javascript IDE linter did not complain or warn about this which it usually does when vague order of operations stuff.</p>
  <h4>What I tried</h4>
  <p>I tried searching for SA questions similar to mine that might shed light on this problem but didn't find anything that explained what I was seeing.</p>