Calling a function in JavaScript without parentheses

Question

Is there a way in JavaScript to call a function without parentheses?

For example in jQuery:

$('#wrap').text("asdf"); will work and so will $.ajax(ajaxOptions);

I'm mapping a function (class) to window.$ that has a set of functions I want to be able to call with or without parentheses. Like jQuery.

Here's a code example:

function Test(asdf) {
  this.test = function(testVar) { return testVar + ' asdf'; }
}

And I map Test() to $:

window.$ = new Test();

I have to call the function (class) like this:

$('asfd').test('ASDF');

But I want to be able to call it like this:

$.test('asdf');

Answer 1

JavaScript is extremely flexible since objects are basically a map and can contain any number of key value pairs, where the value itself can be an object and thus you get nesting. Another interesting aspect of JavaScript is that functions are themselves first class objects, so in a key value pair, you can have a function as a value.

To get something like jQuery then becomes very simple. You start off with a function (constructor function, or class if you will),

function myFunction() {
    // do some awesome web 2.0 stuff
}

Since myfunction is a function and also an object, so you attach key value pairs to it as well which is what jQuery does. To verify that myFunction is also an object, do an instanceof check:

myFunction instanceof Function; // true
myFunction instanceof Object; // true

So we can add properties to a function which could be simple values, or functions themselves.

// adding a simple property that holds a number
myFunction.firstPrime = 2;

// adding a function itself as a property to myFunction
myFunction.isPrime = function(number) {
    // do some magic to determine if number is prime
};

But if that is not your question, and you really want to know if you can literally call a function without using parentheses, then the answer is yes, you can, using the additions in ECMAScript 5th ed.

Here's an example of calling a function without using parentheses using Object.defineProperty and defining it as a getter:

var o = {};

Object.defineProperty(o, "helloWorld", {
    get: function() {
        alert("hello world");
    },
    set: undefined
});

o.helloWorld; // will alert "hello world"

Try this example in Chrome or Safari, or Firefox nightly.

Answer 2

new

---

You can call a function using new. The twist is, within the function this becomes an object being constructed by the function instead of whatever it would normally be.

function test () { alert('it worked'); }
...
new test; // alerts "it worked"

call and apply

---

You can use call or apply to call a function indirectly. You'll still need parentheses (unless you use new), but you won't be directly invoking the function with parentheses.

Answer 3

function message() {return "Hello crazy world!"; }
Function.prototype.toString = function() { return this.call(this); };
alert(message);

Answer 4

The difference in those examples is that .text() is a function on jQuery objects (instances of them, wrappers of elements), it's on $.fn (jQuery's prototype shortcut) so it's specifically for jQuery objects.

$.ajaxSetup() is a method on the jQuery object/variable itself.

If you look at the API it's easy to tell which methods are where, the jQuery.something() methods are methods on the jQuery variable/object, not related to an element set, everything else that's just .something() are the methods to run against element sets (on jQuery object instances).

For what you want to do, yes it is possible, but it doesn't make much sense, for example:

$.myFuntion = $.fn.myFunction = function() { alert('hi'); };

You should place your methods where it makes sense, if it's for a set of elements, use $.fn.myFunction and this refers to the set of elements inside. If it's a static method unrelated to an element set place it outside separately or possibly at $.myFunction.

Answer 5

You can make a function reference, but you won't be able to pass arguments:

function funky() { alert("Get down with it"); }

obj.onclick = funky;

Answer 6

You can try something like this

var test = {
    method1 : function(bar) {
        // do stuff here
        alert(bar);
    },
    method2 : function(bar) {
        // do stuff here
        alert(bar);
    }
};

test.method1("foo");
test.method2("fooo");

Answer 7

Use template literals:

alert`WOW`

It is cleaner and shorter, without having to rely on jQuery, call, etc.