0

I'm working on a legacy system where an endpoint sends an HTML content that when received in the frontend is added to a div: $('#some-div').html(htmlContent).

That works fine, but I am observing something strange, when I define some constants in a <script> they appear as undefined in the scripts that continue:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // This simulates the content retrieved from the server
  let contentFromBackend = JSON.parse("{\"text\":\"<script>\\n    const someConst = \'hello\'\\n\\n    function someConstFn() {\\n        return \'hello\'\\n    }\\n<\/script>\\n\\n<script>\\n    console.log(someConstFn()) \/\/ This works!\\n    console.log(someConst) \/\/ This fails saying that someConst is undefined!\\n<\/script>\"}")['text']

  // Appends to div
  $('#some-div').html(contentFromBackend)
})
</script>

<div id="some-div"><div>

If the content is generated statically (for example, with a Template Renderer like Twig or plain HTML) both the constant and the functions work perfectly. var also works fine. Why does this happen?

Genarito
  • 3,027
  • 5
  • 27
  • 53
  • 1
    Turned your example into a snippet (so we can run it) it works. I see "hello" twice – Jeremy Thille Dec 01 '21 at 14:45
  • Your code works as intended. Maybe your code is actually different? E.g. you first log it and only then define? – Justinas Dec 01 '21 at 14:45
  • Because the snippet is not retrieved from a Symfony backend and appended with JQuery to an existing div – Genarito Dec 01 '21 at 14:46
  • Does this answer your question? [const keyword scope in Javascript](https://stackoverflow.com/questions/12272836/const-keyword-scope-in-javascript) – Justinas Dec 01 '21 at 14:46
  • 1
    @Genarito So show us how you get that script. – Justinas Dec 01 '21 at 14:47
  • Unfortunately I don't think so @Justinas as const scope works fine when the content is static (like the snippet). I've worked in projects with React where several const are defined in different scripts in the HTML and the transpiled code can access them perfectly. This doesn't happen with JQuery append – Genarito Dec 01 '21 at 14:48
  • 2
    And changing `const` to `var`? – Nat Dec 01 '21 at 14:55
  • `var` works! Wtf!? I'll edit and add and simulated example later to get my point. Thanks @Nat – Genarito Dec 01 '21 at 15:17
  • 1
    @JeremyThille, Justinas. I've added a simulated example. Check that the second 'hello' is never printed... Please, don't downvote as the question is not answered in the proposed link... – Genarito Dec 01 '21 at 15:47
  • @Justinas check the above comment. I can only tag one user per comment – Genarito Dec 01 '21 at 15:48
  • @Genarito it was probably downvoted (before I even saw it) because the code *provided* did not demonstrate the problem described, at the time (and not everyone notices when someone else has converted it to a (non-demonstrable) snippet - so might have been ok without the snippet, but that just confirmed it didn't show the issue (as provided) – freedomn-m Dec 01 '21 at 15:55
  • 1
    This is actually a really interesting issue! Can confirm that changing `const` to `var` in the json payload makes it work correctly. I assume this is something to do with `const` being ES6 but I don't really understand why appending it into the DOM would fall back to ES5 – Daniel Beck Dec 01 '21 at 15:57
  • @Genarito a vote up to useful comments always helps new contributors like me :) – Nat Dec 01 '21 at 17:20
  • Sorry! Done, thanks! – Genarito Dec 01 '21 at 17:51

0 Answers0