Error with multiple self-invoking functions in one script: a case for a semicolon
anonymous-function, javascript, runtime-error, self-invoking-function
Solution
You forgot the semicolons:
(function () {
console.log('1/2')
})();
(function () {
console.log('2/2')
})();
Otherwise the returned value of the previous expression (`undefined`) tries to execute the next expression. Obviously `undefined` is not a function.
In the semicolonless JavaScript world, you'll often see the semicolon preceding any raw expression, such as `()`:
;(function(){}())
;['1','2','3'].map(Number)
JavaScript will attempt to fill in the semicolons you "forgot" but those expressions are ambiguous so you need to add it.
Problem
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?