Javascript closure unexpected result

Question

The closure code is very short:

var fn = function() {     return function() {         console.log(arguments);     } }  (function(arg) {     console.log('bar'); })('foo'); 

Why ["foo"] is printed instead of bar? If I comment out var fn = ... , the result is as expected and bar is printed. How can those 2 pieces of code be related?

Answer 1

Without the semicolon after the } of the fn, you are actually calling the fn with argument (function...).

If you add the missing semicolon, it works as you expect:

var fn = function () {     return function () {         console.log(arguments);     } };  (function (arg) {     console.log('bar'); })('foo'); 

Answer 2

Why ["foo"] is printed instead of 'bar'? How can those 2 pieces of code be related?

With the parenthesis around the (function(arg) {…}) it is considered as a function expression's argument, just as you expected ('foo') to be the argument of the IEFE. Actually, foo is now passed to the function that is the result of the first invocation:

var fn = (         (function() {             return function() {                 console.log(arguments);             };         })         (function(arg) {             console.log('bar');         })     )     ('foo'); 

To fix this, either always put a semicolon after your assignments, or use a function declaration:

function fn() {     return function() {         console.log(arguments);     } } (function(arg) {     console.log('bar'); })('foo');