In certain circumstances, having more than one self-invoking function in a single JavaScript file provokes an error. Getting the second function to return a value averts the error.
I have a barebones HTML file...
<script src="two.js"></script>
<script src="one.js"></script>
... using these scripts:
// two.js
(function () {
console.log('1/2')
})()
(function () {
console.log('2/2')
})()
// one.js
(function () {
console.log('1/1')
})()
When I open the file in Chrome, I get this output:
1/2 two.js:2
Uncaught TypeError: undefined is not a function two.js:6
1/1
Other browsers complain in their own way. In other words, having two self-invoking functions in the same script causes a problem. Having one self-invoking function per script works fine. If I comment out the second function script two.js, there is no problem.
However, if I get the second function to return a value, then there is no problem either. Everything works fine if I change two.js to this:
(function () {
console.log('1/2')
})()
foo = (function () {
console.log('2/2')
return 'bar'
})()
Why does the first version fail and the second succeed?