<p>You can't pass a JS variable into a JS file (that doesn't quite make sense). What you <em>can</em> do is to <em>create</em> a JS variable, and make it accessible to the script you are including.</p>

<p>So you'd include your JS file as you are already doing:</p>

<pre><code>{% includeJsFile 'path/to/file' %}
</code></pre>

<p>And then you would create your variable, and <strong>in JavaScript</strong> pass that variable back into the script which you called.</p>

<pre class="lang-javascript prettyprint-override"><code>{% includejs %}
    var myData = 'whatever your data needs to be';
    functionFromIncludedScript(myData);
{% endincludejs %}
</code></pre>

<p>The snag you're going to run into here is, <strong>the order matters</strong>. When you use Craft's <code>include</code> methods, they will always include any <em>files</em> before any <em>raw scripts</em>. So using this method, your variable will be defined after the file has already been included.</p>

<blockquote>
  <p>It's important to note, the "files before raw scripts" will happen <strong>regardless</strong> of which order you defined them in Twig.</p>
</blockquote>

<p>Similarly, be aware that your file include and raw script include will both happen <strong>at the bottom of the page</strong>, just before the closing <code>&lt;/body&gt;</code> tag.</p>

<hr>

<p>Now I'm going to make an assumption... You're about to say "But I need my variable declared before the file is included!"</p>

<p>Fair enough, and the solution is pretty simple. Just declare your JS variable <strong>in the middle of the page</strong>, while you're rendering the main Twig code:</p>

<pre class="lang-html prettyprint-override"><code>&lt;script&gt;
    var myData = 'whatever your data needs to be';
&lt;/script&gt;
</code></pre>

<p>So your variable declaration gets rendered along with the rest of your HTML, and your <code>includeJsFile</code> still happens at the bottom of the page. By the time that file is included, your JS variable is sitting around waiting for it.</p>

CC BY-SA 3.0
2015-08-11T19:16:16.510Z
Thanks for your answer! I can't get anything in a <script> tag to work, though - even just a console.log. Also, am I able to use twig outputs in the <script> tag like {{ craft.tags }}?
Andrea Hall
CC BY-SA 3.0
2015-08-11T19:55:40.147Z
Sounds like a separate question... Would you mind [posting a new question](http://craftcms.stackexchange.com/questions/ask) with some code examples of what you've tried so far?
Lindsey D
CC BY-SA 3.0
2015-08-11T19:58:34.520Z
Also, if this solution answered your original question, feel free to mark it as "accepted" :)
Lindsey D
CC BY-SA 3.0
2015-08-12T20:18:55.823Z
Sure, I'll post a new question about the script tags. I think your explanation will work, but since I can't declare the variable in the script tag, I can't verify yet.
Andrea Hall
CC BY-SA 3.0
2015-08-12T20:52:15.063Z
I've posted my new question [here](http://craftcms.stackexchange.com/questions/10949/can-i-set-a-js-variable-to-a-twig-output-tag). I was able to print to the console after a little more debugging, but I still can't get it to accept a twig output.
Andrea Hall
CC BY-SA 3.0
2015-07-24T21:37:02.907Z
2015-07-24T21:37:02.907Z
Lindsey D
<p>Can you do something similar to using "with" in twig's include tag (<a href="http://twig.sensiolabs.org/doc/tags/include.html" rel="nofollow">http://twig.sensiolabs.org/doc/tags/include.html</a>), but instead with includeJsFile?</p>

<p>I am using a plugin to filter my entries by their tags. The js initiation for this plugin requires me to list all the tags I'm using as a variable. I'd love to assign a variable to the tag group I'm using and pass it to the javascript file, rather than hard code the tag names. Is this possible?</p>

<variable><javascript><include>
Can you pass a variable with includeJsFile?
# Can you pass a variable with includeJsFile?

(Asked by: username_0 on 2015-07-24)

Can you do something similar to using "with" in twig's include tag (<http://twig.sensiolabs.org/doc/tags/include.html>), but instead with includeJsFile?

I am using a plugin to filter my entries by their tags. The js initiation for this plugin requires me to list all the tags I'm using as a variable. I'd love to assign a variable to the tag group I'm using and pass it to the javascript file, rather than hard code the tag names. Is this possible?

**Tags:** variable, javascript, include

---

## 1 answers

### Answer by username_1 on 2015-07-24. Score: 5 | Accepted answer

You can't pass a JS variable into a JS file (that doesn't quite make sense). What you can do is to create a JS variable, and make it accessible to the script you are including.
So you'd include your JS file as you are already doing:
{% includeJsFile 'path/to/file' %}

And then you would create your variable, and in JavaScript pass that variable back into the script which you called.
{% includejs %}
    var myData = 'whatever your data needs to be';
    functionFromIncludedScript(myData);
{% endincludejs %}

The snag you're going to run into here is, the order matters. When you use Craft's include methods, they will always include any files before any raw scripts. So using this method, your variable will be defined after the file has already been included.

It's important to note, the "files before raw scripts" will happen regardless of which order you defined them in Twig.

Similarly, be aware that your file include and raw script include will both happen at the bottom of the page, just before the closing  tag.

Now I'm going to make an assumption... You're about to say "But I need my variable declared before the file is included!"
Fair enough, and the solution is pretty simple. Just declare your JS variable in the middle of the page, while you're rendering the main Twig code:


So your variable declaration gets rendered along with the rest of your HTML, and your includeJsFile still happens at the bottom of the page. By the time that file is included, your JS variable is sitting around waiting for it.

> **Comments:**
> **username_0**: Thanks for your answer! I can't get anything in a <script> tag to work, though - even just a console.log. Also, am I able to use twig outputs in the <script> tag like {{ craft.tags }}?  
> **username_1**: Sounds like a separate question... Would you mind [posting a new question](http://craftcms.stackexchange.com/questions/ask) with some code examples of what you've tried so far?  
> **username_1**: Also, if this solution answered your original question, feel free to mark it as "accepted" :)  
> **username_0**: Sure, I'll post a new question about the script tags. I think your explanation will work, but since I can't declare the variable in the script tag, I can't verify yet.  
> **username_0**: I've posted my new question [here](http://craftcms.stackexchange.com/questions/10949/can-i-set-a-js-variable-to-a-twig-output-tag). I was able to print to the console after a little more debugging, but I still can't get it to accept a twig output.  

---

