2

I am new to javascript and I might have dove into the deep end first. I have came across the following definition while reading design patterns in js. I don't understand the syntax used here, why is the "log" function definition in "()",

var log = (function() {
    var log = "";
    return {
        add: function(msg) { log += msg + "\n"; },
        show: function() { alert(log); log = ""; }
    }
})();

Please point me in the right direction.

royhowie
  • 11,075
  • 14
  • 50
  • 67
user3364902
  • 123
  • 1
  • 2
  • 9
  • 2
    [Immediately-Invoked Function Expression](http://en.wikipedia.org/wiki/Immediately-invoked_function_expression). `log` is not a function, it ends up as a module, exporting two functions (`log.add` and `log.show`). – Amadan Jun 03 '15 at 08:48
  • If you don't care about the return value, you can save a character with `!function(){/* code */}()` – royhowie Jun 03 '15 at 09:00
  • Partly a duplicate, but this also involves the **module pattern**, which is not part of the other question/answers. – connexo Jun 03 '15 at 09:02
  • @royhowie: The module pattern is all about the return value :) – connexo Jun 03 '15 at 09:07

2 Answers2

3

Without the parenthesis, the right hand side of your assignment is a function expression, and log is assigned a reference to that (anonymous) function expression, allowing to call log() later.

If you include the parenthesis, the wrapped function turns into a self-invoking function expression (and is immediately executed), so log is assigned whatever this function call returns.

As someone else already stated, your code shows an example of the so-called module pattern. Read much more about it here.

connexo
  • 53,704
  • 14
  • 91
  • 128
  • Nitpick: in `log = function(...) { ... }`, the right hand side is already an expression - a function expression. It is not the parentheses that turn it into one. – Amadan Jun 03 '15 at 08:50
  • Thanks for the hint, I tried to correct my answer accordingly. More about function declaration vs expression here: https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/ – connexo Jun 03 '15 at 09:00
0

I don't understand the syntax used here, why is the "log" function definition in "()"

Its basically self executing anonymous function. There are several ways of writing such functions.

(function() {
  alert('hi there');
})();

! function() {
  alert('hello');
}();

+ function() {
  alert('plus');
}();

- function() {
  alert('minus');
}();

Now such function can also return values:

var msg = (function() {
  return 'hello';
})();

alert(msg);

var calc = (function() {
  return {
    add: function(a, b) {
      return a + b;
    },
    sub: function(a, b) {
      return a - b;
    }
  };
})();

alert(calc.add(4, 5));
  • The `(function(...) {...})(...)` is considered standard; `!` is used by some as a hack that saves a couple of characters; But `+` and `-` are *bad practices* (`if (true) return 1+function() { return 2 }()` returns an unexpected result - `3` instead of `1` that other methods would return). – Amadan Jun 03 '15 at 08:55