JavaScript `foo.prototype.bar` notation

Published 12th August 2011 · tagged with JavaScript

As a follow-up to the post documenting a few popular HTML element + attribute notations, here’s a similar one about JavaScript.

When writing (in text, not in JavaScript) about properties on specific prototypes, you may use the JavaScript notation, foo.prototype.bar. However, this shorter (non-JavaScript) notation is often used instead: foo#bar. Basically, the hash (#) stands for .prototype. — fancy huh?

Let’s see an example:

var numbers = [1, 2, 3]; // array literal
numbers.push(42); // `numbers` is now `[1, 2, 3, 42]`

Here, the Array.prototype.push method is called. You could also say Array#push is called.

A note about jQuery

For convenience, jQuery aliases jQuery.prototype to jQuery.fn. Don’t let this fool you! Whenever you use e.g. jQuery(elem).remove() you’re still calling jQuery.prototype.remove (to which jQuery.fn.remove is a reference), or — using the short notation — jQuery#remove.

Also note the difference between e.g. jQuery#map and jQuery.map:

jQuery(elems).map(fn); // jQuery#map, which is jQuery.prototype.map (or jQuery.fn.map)
jQuery.map(arr, fn); // jQuery.map

Similarly, when using a jQuery plugin that extends jQuery.fn, you’re really extending jQuery.prototype. I’ve been using the short notation when talking about jQuery plugins, e.g. jQuery#placeholder.

IDL attributes

In the spec world, sometimes the Foo#bar notation is used to refer to the bar IDL attribute of Foo rather than foo.prototype.bar.

Comments

Drew Wells wrote on 12th August 2011 at 17:07:

This is a pretty good idea; you should really share these ideas with [jQuery’s API](http://api.jquery.com/?s=map "map()"). They’re sorta of skirting the issue by having methods off of invisible objects.

Mathias wrote on 12th August 2011 at 17:12:

[**Drew:**](#comment-1) I don’t take credit for the idea though — this notation has been around for quite a while, and to be honest I don’t know who came up with it. I’m just trying to document it here since a lot of people are confused the first time they see it. I know I once was :)

Gianni Chiappetta wrote on 12th August 2011 at 17:20:

FWIW this representation method is used in Ruby documentation to differentiate instance/class methods, it was adopted by [Prototype](http://api.prototypejs.org/dom/Element/prototype/addClassName/) originally (IIRC).

Kit Cambridge wrote on 12th August 2011 at 19:58:

[**Mathias:**](#comment-2) I believe Java uses member dot notation (e.g., `Array.push`) for class **and** instance methods, though this is clearly problematic in JavaScript for the reasons outlined in your post. I’ve also occasionally seen Ruby’s `::` operator used to refer to instance methods (e.g., `Array::push`).

Mathias wrote on 12th August 2011 at 20:20:

Thanks for the info, [**Gianni**](#comment-3) and [**Kit**](#comment-4)!

sexyprout wrote on 13th August 2011 at 16:30:

Are there any historical reasons why `#` means `.prototype.`?

sexyprout wrote on 13th August 2011 at 16:32:

Whoops, forget my last question. It’s answered by the previous comments.

Tobie Langel wrote on 13th October 2011 at 00:06:

[**Kit:**](#comment-4) That’s for static methods in Ruby, actually.

@nsolsen wrote on 16th October 2011 at 09:54:

I like this kind of notation. I have been developing a lot of C++ over the years. In C++ the notation is double colon (`foo::bar`).

@jayferd wrote on 10th June 2012 at 17:10:

I’ve been using `Foo::bar`, which in CoffeeScript actually expands to `Foo.prototype.bar`. It also helps me remember that JS prototypes are quite different from Ruby’s class/module system. It also gives you a couple of neat extras: Foo::bar # => Foo.prototype.bar Foo:: # => Foo.prototype @:: # => this.prototype (only really useful on Function.prototype)

Mathias Bynens

JavaScript `foo.prototype.bar` notation

A note about jQuery

IDL attributes

Comments

Leave a comment