Calling a function without parentheses returns whole function as a string

Question

I created a JavaScript object like this:

var obj = {
  a: 10,
  b: 20,
  add: function(){
     return this.a + this.b;
  }
};

I executed the function as obj.add and it returns the whole function as string a like this:

function(){
  return this.a + this.b;
}

But later, I tried to call the function again, including the parentheses, like `obj.add()` and it returns the value `30`. I couldn’t figure out why I get such a different output upon calling the function with `obj.add` and with `obj.add()`. What is the main difference between calling an object’s function with parentheses and without parentheses?

You can't *call* a function without parenthesis. Adding `()` is how you call a function. Without the `()`, you are just getting the function itself. In JavaScript, functions are just variables, like strings or ints or whatever. — gen_Eric, Jan 02 '15 at 16:27
`add` is [a `Function` object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function). When you use it without the parenthesis, you're *most likely* converting it to a `string` through the caller's [type coercion](http://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript) — blgt, Jan 02 '15 at 16:28
but as i see in dev tools i by calling obj.add i am not getting object, but litteral string. i dont get this — ambes, Jan 02 '15 at 16:30
@blgt You're not converting it to a string, the console converted it to a string so it can display it, — Ruan Mendes, Jan 02 '15 at 16:30
@AmbesagerEstifanos, the default behavior of console is to convert it to a string. Try doing `console.log(typeof(ambes.add))` and you should get 'function' — musicfuel, Jan 02 '15 at 16:33

Ruan Mendes · Accepted Answer · 2016-11-17T12:10:55.487

5

Without parentheses, you're retrieving a reference to the function, you are not calling (executing) the function

With parentheses, you're executing the function.

function a() {
  return 2;
}

var b = a(); // called a, b is now 2;
var c = a; // c is referencing the same function as a
console.log(c); // console will display the text of the function in some browsers
var d = c(); // But it is indeed a function, you can call c(), d is now 2;

edited Nov 17 '16 at 12:10

answered Jan 02 '15 at 16:28

Ruan Mendes

90,375
31
153
217

`c is the same thing as a now` not true, it's passed by value, not reference. Changing `c` won't change `a`, nor vice-versa. – Shomz Jan 02 '15 at 16:32
@Shomz OK, `c` now references the same function object as `a` does. – Ruan Mendes Jan 02 '15 at 16:33

score 3 · Answer 2 · answered Jan 02 '15 at 16:28

3

You didn't execute the function with obj.add, you only looked it up in the object and the environment you're in happened to render the function as a string. You execute it by adding the parentheses.

answered Jan 02 '15 at 16:28

Andrew E

7,697
3
42
38

adeneo · Answer 3 · 2015-01-02T16:36:10.577

2

Without the parenthesis you're not really calling anything, nor are you returning anything, it's just a reference !

I'm guessing you did something like this

var result = ambes.add;

console.log(result);

and that doesn't call the function, it logs the actual content of the add property, which is the function, and logging a function will log the string content of the function, not what it would return had you called it.

edited Jan 02 '15 at 16:36

answered Jan 02 '15 at 16:28

adeneo

312,895
29
395
388

Technically you are returning the function object itself. You could thereafter call `result()` to execute the function and receive any returned value. – musicfuel Jan 02 '15 at 16:30
your code also result same , the whole function as string – ambes Jan 02 '15 at 16:31
@musicfuel - isn't that what I wrote ".. content of the add property, which **is** the function" ? – adeneo Jan 02 '15 at 16:32
@AmbesagerEstifanos - Uhm, yes! The code posted does exactly what you described, it doesn't solve the issue, as there is no way to solve this, other than adding the parenthesis. – adeneo Jan 02 '15 at 16:33
@adeneo, yes. I was clarifying to the 'Without the parenthesis you're not really calling anything, nor are you returning anything'. – musicfuel Jan 02 '15 at 16:34
@musicfuel - Oh okay, I could probably be clearer on the fact that it's a reference, added! – adeneo Jan 02 '15 at 16:36

score 1 · Answer 4 · answered Jan 02 '15 at 16:28

It's quite simple: functionName just returns the function body, while functionName() executes the function and returns its return value (or undefined, if there's no explicit return). The same principle works for when a function is an object property, like you had obj.add.

score 0 · Answer 5 · answered Jan 02 '15 at 16:29

Calling a function requires the () because they are the function invocation operator. To execute a function you will always need to include parentheses.

When you call ambes.add you are returning the function object itself. If you do so inside console.log() or concatenate it onto a string JavaScript will return the function definition as a complete string which explains the first output you receive.

score 0 · Answer 6 · answered Jan 02 '15 at 16:30

You must use () to call a function in JavaScript.

If you do not use parenthesis, you are simply referencing the function, which can be useful in a case where you would like to pass a function to another code block for deferred execution.

In your situation, because you wish to call add right away, you should be sure to use ()

obj.add();

Calling a function without parentheses returns whole function as a string

6 Answers6

Related