0

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={}
rorance_
  • 349
  • 1
  • 10
  • 1
    Related if not duplicate of: https://stackoverflow.com/questions/111102/how-do-javascript-closures-work – H.B. Sep 13 '22 at 11:58
  • 1
    FWIW, this would work exactly the same in Python (as far as this is comparable)… – deceze Sep 13 '22 at 11:58
  • @deceze in the sense that `` is the equivalent of a namespace? – rorance_ Sep 13 '22 at 12:00
  • 1
    Yes, it's *one scope*. – deceze Sep 13 '22 at 12:02
  • Welcome to the `window` – Ian Brindley Sep 13 '22 at 12:07
  • @IanBrindley, so if i'm understanding correctly, variables inside `` become members of the `window` object. However, enclosing variables within curly braces e.g. `` means they are in a separate scope, and cannot be accessed by HTML elements? – rorance_ Sep 13 '22 at 12:15
  • 2
    no they are not in `window` object!! Svelte constructs a class from your component code so all of that code is within the same _enclosure_ as H.B. linked – Stephane Vanraes Sep 13 '22 at 12:21
  • Thanks @StephaneVanraes, that makes sense. To clarify, that class has access to global components, like `console` and `document`. Is there a way to see what is contained in the class? – rorance_ Sep 13 '22 at 12:24
  • you can look at the compiled code if you want, but in general just what you write in your style block – Stephane Vanraes Sep 13 '22 at 12:51
  • Go to [svelte repl](https://svelte.dev/repl/), paste your code. On the right “output panel”, find the “js output” tab, there you can see the compiled code. – hackape Sep 13 '22 at 22:52
  • 2
    Svelte is not normal JS, it’s compiler magic that bends JS semantics (in a very elegant way IMO) to serve the purpose of fast web app authoring. So don’t bother because what you learn about svelte doesn’t apply to normal JS. – hackape Sep 13 '22 at 22:58
  • @rorance_ if you're curious to see the scopes and what they contain, put a debugger statement inside the compareDates function, then open your browser's devtools. If you then trigger that function, the browser will pause the program and expose a step debugger. At that point, you can look at the scope and every variable it contains, while also manually stepping through your code. – ambiguous58 Sep 17 '22 at 19:48

0 Answers0