title: All elements push into array despite if (should act as filter)
body: <p>I have a little form in my HTML that takes data for a reservation. The correspondent submit button is associated with a function (<code>saveReserve</code>). The idea is that the function could take the data and push it into an array, but also detects when a similar reservation has already been made, and so if it's the case, left the new one out (don't push it into the array with the one that is similar).</p>
  <p>The issue is that all reservations are push even if they are the same, ignoring the IF element:</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>let allReservation = [];
  var NR = 0
  
  const saveReserve = () =&gt; {
      var date= $("#date").val();    //These are the form inputs//
      var hour= $("#hour").val();
      var gameRes = $("#reserveG").val();
      NR++
  
     
      var reservation = ({date, hour, gameRes})
      let exist = allReservation.find(e=&gt; e.date == reservation.date &amp;&amp; e.hour == reservation.hour &amp;&amp; e.gameRes == reservation.gameRes);
      console.log(reservation, exist)
      
      if (exist == undefined) {
          allReservation.push( NR + ": " + $("#nameR").val() + Object.values(reservation) );
          alert ("All good")
      }else{   
        alert ("Invalid, try again")
      }
  
      //nameR is the name input in the form//
  
  
      console.log (allReservation)
      $("input").val('') 
  }
  $('[type="submit"]').click(saveReserve)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="date" value="2021-08-05" id="date" /&gt;
  &lt;input type="number" id="hour" min="0" max="23" value="7" /&gt;
  &lt;input type="text" id="reserveG" value="A" /&gt;
  &lt;input type="text" id="nameR" value="B" /&gt;
  &lt;input type="submit" /&gt;</code></pre>
  </div>
  </div>
  </p>
  <pre><code>let allReservation = [];
  var NR = 0
  
  const saveReserve = () =&gt; {
      var date= $(&quot;#date&quot;).val();    //These are the form inputs//
      var hour= $(&quot;#hour&quot;).val();
      var gameRes = $(&quot;#reserveG&quot;).val();
      NR++
  
     
      var reservation = ({date, hour, gameRes})
      let exist = allReservation.find(e=&gt; e.date == reservation.date &amp;&amp; e.hour == reservation.hour &amp;&amp; e.gameRes == reservation.gameRes);
      
      if (exist == undefined) {
          allReservation.push( NR + &quot;: &quot; + $(&quot;#nameR&quot;).val() + Object.values(reservation) ),
          alert (&quot;All good&quot;) )
      }else{   
        alert (&quot;Invalid, try again&quot;)
      }
  
      //nameR is the name input in the form//
  
  
      console.log (allReservation)
      $(&quot;input&quot;).val('') 
  }
  </code></pre>
  <p>The only way the .find works is if I add this at the end of the function:</p>
  <pre><code>allReservation.push (reservation)
  </code></pre>
  <p>Then it recognise the repeat elements and alerts them, but also push them in.</p>