What is the difference between displayName(); and return displayName;?

Question

I am an aspiring front-end developer. I was reading an MDN article about closure in JavaScript. The MDN article used the following two code examples to explain the basic concept. Though I understood the basic concept, I have the following doubt.

What is the difference between displayName(); and return displayName ?

function init() {
  var name = 'Mozilla'; // name is a local variable created by init
  function displayName() { // displayName() is the inner function, a closure
    alert(name); // use variable declared in the parent function    
  }
  displayName();    
}
init();

**

function makeFunc() {
  var name = 'Mozilla';
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

`displayName();` calls the function that `displayName` references. `return displayName;` returns the reference, in this case making `myFunc` reference the same function. — Paul, May 28 '18 at 16:28
`displayName` is the variable name, in that case, a function and `displayName()` is how you call a function passing zero params. — Ele, May 28 '18 at 16:28
When you use `()` you are calling the function whereas returning **without** `()` is passed as a reference. — Mr. Alien, May 28 '18 at 16:28
This may help: [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — Jonathan Lonowski, May 28 '18 at 16:30
@ Paulpro I understand that we call/execute a function by putting paranthesis and a semi-colon after the function name, which is the case with displayName();. But what is the use of "returning a reference"? What does it mean? Can you pls. elaborate? Thanks. — HKS, May 28 '18 at 16:36
I didn't get notified because of the space between `@` and `Paulpro`. Make sure not to put a space after `@` if you want to notify people. — Paul, May 28 '18 at 21:32
You probably understand what `return name;` would do, right? That would return a string, because the value of `name` is a string. `return displayName;` returns a reference to a function because the value of `displayName` is a reference to a function. — Paul, May 28 '18 at 21:43
The reason it's a reference is because functions are objects in JavaScript and variables can only store references to objects in JavaScript. The distinction is important because objects (hence functions) are not copied. `var a = {}; var b = a; var c = {}; console.log( a == b ); console.log( a == c ); console.log( b == c );` — Paul, May 28 '18 at 21:48

score 0 · Accepted Answer · answered May 28 '18 at 16:32

0

In the first case it is executing the function , while in second case makeFunc is returning another function.Check the console.log. That is the reason there is a () after myFunc() which will execute the function returned from makeFunc

function init() {
  var name = 'Mozilla';

  function displayName() {
    alert(name);
  }

  displayName();
}
init();

function makeFunc() {
  var name = 'Mozilla';

  function displayName() {
    alert(name);
  }
  // this is returning a function
  console.log(displayName)
  return displayName;
}

var myFunc = makeFunc();
// since it is returning a function it is getting executed ony after adding () with it
myFunc();

answered May 28 '18 at 16:32

brk

48,835
10
56
78

so, these two code examples are structured differently but give the same output. I am wondering what is the need to write the second example, which is a bit lengthier than the first one? – HKS May 28 '18 at 16:54
@hemanta The example would be much more interesting if `name` was a parameter of `makeFunc`: `function makeFunc(name) { ...`. Also remove the first line of makeFunc that sets the value of name to `Mozilla`. – Paul May 28 '18 at 21:28
@hemanta Then you can do `var mFunc = makeFunc('Mozilla'); var sFunc = makeFunc('StackOverflow'); sFunc(); mFunc(); sFunc(); sFunc(); mFunc();` – Paul May 28 '18 at 21:30

score 0 · Answer 2 · answered May 28 '18 at 16:32

What's the difference between displayName() and return displayName?

The difference is that the first is invoking the function displayName while the second is returning it. To see an example of what that means:

const log = () => console.log('I was invoked!')

const getLog = () => {
  return log
}

const doLog = () => {
  log()
}

We have some function that, when invoked, prints to the console. We also have two other functions, one that returns log and one that invokes it. When we call getLog(), we don't see anything printed to the console. When we call doLog(), we do.

Another point is that getLog returns the value of log. So we can do this as well:

const logByDifferentName = getLog()

which wouldn't cause log to be invoked but assign it to another value.

What is the difference between displayName(); and return displayName;?

2 Answers2