Why is a javascript function unaccessible from another script file?

Question

I have a problem I've been searching SO for answers to, but nothing seem to do it for me. I've referenced a question that mimics my problem but the solution still don't solve my problem.

Accessing function in another .js file with $.getScript

My problem is as I've mentioned similar. I can't access a method inside a script file from another script file. These are my codes:

page.js

$(document).ready(function () {
    $.getScript('script.js').done(function () {
        $('#build').append(literals.test()); // $('#build') is a span tag in the HTML-file.
    }).fail(function () {
        console.warn('Unable to load script file.');
    });
});

script.js

(function ($) {
    var literals = {
            test: function () {
                return 'Hello world!';
            }
        };
})(jQuery);

This still returns the following error even though I've built it almost exactly the same way as in the answer of the referenced question.

Uncaught ReferenceError: literals is not defined at Object.<anonymous>

What am I doing wrong here?

The symbol `literals` is a **local** variable in that function where it's defined. — Pointy, Jan 16 '18 at 19:37
Did you mean to add `literals` to the `window` object instead? — David, Jan 16 '18 at 19:38
@Pointy - I think you're up to something here. I'm trying to grasp how I should declare it as a global variable? — Kristofer Gisslén, Jan 16 '18 at 19:40

I wrestled a bear once. · Accepted Answer · 2018-01-16T19:56:52.990

2

Because when you create a closure, anything inside of it is only visible to other things in that scope.

In JS, all functions are closures.

(function(){
    // this is a closure
})()

If you want to be able to get the literals functions from outside of the closure, one option is to return it from the function...

const literals = (function($){
    return {
        test: function () {
            return 'Hello world!';
        }
    };
})(jQuery);

console.log(literals.test());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Jan 16 '18 at 19:56

answered Jan 16 '18 at 19:43

I wrestled a bear once.

22,983
19
69
116

It seems as the problem moved one step further: Uncaught TypeError: Cannot read property 'test' of undefined. – Kristofer Gisslén Jan 16 '18 at 19:53
1

I figured it out... I had the 'test' property inside a getScript method... I moved it outside it and now it works fine. Thank you for your help! :) – Kristofer Gisslén Jan 16 '18 at 19:57
@KristoferGisslén - hit the "run code snippet" button in my answer - it works. make sure you have `script.js` above `page.js`. – I wrestled a bear once. Jan 16 '18 at 19:58

Why is a javascript function unaccessible from another script file?

1 Answers1