How to use data from model in javascript files?

Question

Django

Why can't I get a variable in a javascript file? For example, I define a variable in the main.js
file in this way and it does not work. I have to first define this variable in the HTML file and then only connect main.js to the end of the file, in this way, and only then in the main.js file can I access this "bar" variable:
var bar = "{{ user.username }}"

<script src="/static/demo/js/main.js"></script>

Answer 1

Obviously because JS files are not rendered by the Django template engine.

Answer 2

For one variable

<div
id="user" 
data-username="{{ user.username }}">

<script>
var _user = document.getElementById('user');
var username = _user.dataset.username;

https://developer.mozilla.org/en-US/docs/Learn/HTM...