0

I have a web application that has several script tags.

Suppose I have a variable called customPage within the tag: 

<script type="text/javascript">
    var customPage = callSomeFunction();
<script>

Elsewhere in the page...

<script type="text/javascript">
    var customPage = callSomeOtherFunction();
<script>

What is the scope of these JavaScript variables, since they are all defined using the same name? Will they overwrite each other? Or do they all have value within their own scope?

Jose
  • 1,616
  • 4
  • 26
  • 38
  • Partial views should not contain scripts. –  Feb 16 '17 at 21:17
  • head over to [this](http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) question – m87 Feb 16 '17 at 21:36
  • My answer is no longer valid after your edit, because your variables are now inside function invocations. Each function has its own local variables. – Phrogz Feb 16 '17 at 22:06
  • So each call to jquery init $(function () {}) then has its own scope? Because each is an anonymous function? – Jose Feb 16 '17 at 22:07
  • The new question is [here](http://stackoverflow.com/questions/42285662/how-does-the-jquery-document-ready-function-handle-variable-scoping) – Jose Feb 16 '17 at 22:15

1 Answers1

0

Variables declared at the 'top' level of a <script> element are part of the Global JavaScript object. In web browsers, this makes them properties of the window object.

Whichever code is run second will overwrite the value of the variable from the first code sample.

<script>
var foo = "hello";
console.log(foo, window.foo);
</script>

<script>
var foo = "world";
console.log(foo, window.foo);
</script>

The above code snippet shows:

hello hello
world world

(Which also shows that you could have tested out the answer to this question yourself. TIAS!)

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • What is the best practice for keeping variables in a web page? Suppose I have several div tags that represent tables on my page, but each table contains a specific javascript object called TableDataManager. How would I keep track of each table's TableDataManager instance? – Jose Feb 16 '17 at 21:41
  • @JoseChavez Don't use global variables? Store JS objects associated with each element as an expando property on the element itself? It's hard to advise without knowing more details. – Phrogz Feb 16 '17 at 21:43
  • @JoseChavez To give a general answer, use a project named object, like `var myproj = { foo: 'hello', bar: 'world'}` – Asons Feb 16 '17 at 21:54
  • Updated my question with more details. – Jose Feb 16 '17 at 22:05
  • 1
    FYI, what you did was over-simplified your question and asked the wrong one. You've now changed your question to one that has a very different answer. – Phrogz Feb 16 '17 at 22:07
  • 1
    @JoseChavez I recommend you roll back the edit and ask a new question with the new requirements – Asons Feb 16 '17 at 22:11
  • 2
    Thanks for the input; created new question [here](http://stackoverflow.com/questions/42285662/how-does-the-jquery-document-ready-function-handle-variable-scoping) – Jose Feb 16 '17 at 22:13
  • You are right, I could have TIAS :) But I would not have known about the global window object, and how global variables become members of the window object! – Jose Feb 16 '17 at 22:19