New to Javascript (Svelte) - how do functions have access to variables?

I am new to Javascript, but have a few years of experience with Python. I have been following the 7GUIS exercises, to understand basic frontend development.

I have a very small svelte file, as follows:

<script>
let t1 = "2022-09-11" ;
let t2 = "2022-09-12" ;

function compareDates(){
  if (t2 < t1) {
    console.log("Warning! You return before you fly!")
  }
}
</script>

<input type="date" bind:value={t1} on:change={compareDates}>
<input type="date" bind:value={t2} on:change={compareDates}>

There are two date selection inputs, t1 and t2. Each time they are changed, the function compareDates checks to see if t2 < t1. If it is, it logs a string in the console.

But how does compareChange have access to these variables? My guess, is that the <script></script> area is a singular namespace. If that is the case, is this best practice? Or would it be better to pass t1 and t2 from the "input objects"* somehow?

• I assume the HTML elements can be accessed, I believe through bind:this={}