1

An example of my question can be duplicated with the following three files...

index.htm:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
</head>
<body>
Hello, world!
</body>
</html>

script1.js:

$(function() {
    const THE_TEXT = 'This is THE_TEXT';
});

script2.js:

$(function() {
    function log_THE_TEXT() {
        console.log(THE_TEXT);
    }

    log_THE_TEXT();
});

I expect to see "This is THE_TEXT" in the console log after loading the page. Instead there's this error:

ReferenceError: THE_TEXT is not defined script2.js:6:3

and:

jQuery.Deferred exception: THE_TEXT is not defined log_THE_TEXT@http://example.com/js-test/script2.js:6:3

If I define the constant in script2.js, it works as expected. So why doesn't it work, and is there a way to make it?

Vega
  • 27,856
  • 27
  • 95
  • 103
Mark Almighty
  • 33
  • 5

4 Answers4

2

This is because

A function serves as a closure in JavaScript, and thus creates a scope, so that (for example) a variable defined exclusively within the function cannot be accessed from outside the function or within other functions

Read more about scope here.

One way to fix this is to use window global object:

script1.js

$(function() {
    window.THE_TEXT = 'This is THE_TEXT';
});

script2.js

$(function() {
    function log_THE_TEXT() {
        console.log(window.THE_TEXT);
    }

    log_THE_TEXT();
});

...but using global variables is considered as a bad practice. There are many other ways but it all adds complexity and it really depends what you want to achieve in a long run.

Buszmen
  • 1,978
  • 18
  • 25
1

This is nothing to do with jQuery but JavaScript scope.

In the first script you are declaring a variable inside a function, so it is part of that function scope. In the second script you are trying to access the variable from another function. This function doesn't have access to the scope of the other function. They are independent function with independent scope.

and is there a way to make it?

In script one define the variable in the global scope:

const THE_TEXT = 'This is THE_TEXT';

Variable in scope even thought it is not part of the window object.

enter image description here

Johnny Zabala
  • 2,285
  • 1
  • 12
  • 14
  • 2
    Seems like a good explanation of the issue to me - an answer doesn't have to contain code, even if most of them do. It just has to answer the question - which this does. – Robin Zigmond Feb 09 '20 at 00:16
  • 1
    This declaration creates a constant whose scope can be either global or local to the block in which it is declared. Global constants do not become properties of the window object, unlike var variables. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const). `const` and `let` won't work between files, but `var` will. – Emiel Zuurbier Feb 09 '20 at 00:17
  • @EmielZuurbier you are right. const declaration don't become part of the window object but even thought it was declared in another script it is in scope for all others. You can try it yourself. – Johnny Zabala Feb 09 '20 at 00:33
1

It's because of block scope:

https://www.w3schools.com/js/js_const.asp

var x = 10;
// Here x is 10
{
  const x = 2;
  // Here x is 2
}
// Here x is 10
Community
  • 1
  • 1
rattybag
  • 381
  • 2
  • 8
1

It's actually quite simple, it all has to do with Scope. Things defined in a function cannot be used outside of that function in JavaScript.
For example, a simple way of how Scope works

function foo() {
    var bar = true;
    console.log(bar); // true
};
console.log(bar); // Error

Simply define your variables like this

var bar = true;
function foo() {
    console.log(bar); // true
};
console.log(bar); // true

Now bar is globally defined! It can be used in any file!

TL;DR Define your variables outside of the functions if you plan on using them later also outside of that function.

theParadox42
  • 65
  • 1
  • 7