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?
consttovar?consttovarin the json payload makes it work correctly. I assume this is something to do withconstbeing ES6 but I don't really understand why appending it into the DOM would fall back to ES5