there is a checkbox and there is such a script :
-why lastChecked = this in the console gives the last and the penultimate selected item ?;
-why at this location in the handleCheck() function in the console handleCheck() last and penultimate selected item, but if lastChecked = this put before console.log will lastChecked = this the same last marked item?
- where can I find out more about reassigning this inside a function, trying to find it, do all links of this lead to this in object ?

 const checkboxes = document.querySelectorAll('.item input[type="checkbox"]'); let lastChecked; function handleCheck() { console.log(this); console.log(lastChecked); lastChecked = this; } checkboxes.forEach(checkbox=> checkbox.addEventListener('click', handleCheck)) 
  <div class="inbox"> <div class="item"> <input type="checkbox"> <p>item one</p> </div> <div class="item"> <input type="checkbox"> <p>item two</p> </div> <div class="item"> <input type="checkbox"> <p>item three</p> </div> </div>

    1 answer 1

    why at lastChecked = this in the console gives the last and the penultimate selected item ?;

    this is a link to an element object, if you select the same checkbox, then this === lastChecked (same objects), if different - then they will not be equal.

    but if lastChecked = this put before console.log will issue the same last selected item ?;

    Yes, it will assign this object to lastChecked, then the output

     console.log(this); lastChecked = this; console.log(lastChecked);

    will output the same objects.

    - where you can learn more about reassigning this inside a function

    For example, there is a VERY good article .

     const checkboxes = document.querySelectorAll('.item input[type="checkbox"]'); let lastChecked; function handleCheck() { console.log(this); console.log(lastChecked); lastChecked = this; } checkboxes.forEach(checkbox=> checkbox.addEventListener('click', handleCheck)) 
     <div class="inbox"> <div class="item"> <input type="checkbox"> <p>item one</p> </div> <div class="item"> <input type="checkbox"> <p>item two</p> </div> <div class="item"> <input type="checkbox"> <p>item three</p> </div> </div>