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.

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. They’re sorta of skirting the issue by having methods off of invisible objects.

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

Drew: 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 originally (IIRC).

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

Mathias: 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 and Kit!

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: 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).

Comment on “JavaScript foo.prototype.bar notation”

Name *

Email *

Website

Some Markdown is allowed; HTML isn’t. Keyboard shortcuts are available.

It’s possible to add emphasis to text:

_Emphasize_ some terms. Perhaps you’d rather use **strong emphasis** instead?

Select some text and press ⌘ + I on Mac or Ctrl + I on Windows to make it italic. For bold text, use ⌘ + B or Ctrl + B.

To create links:

Here’s an inline link to [Google](http://www.google.com/).

If the link itself is not descriptive enough to tell users where they’re going, you might want to create a link with a title attribute, which will show up on hover:

Here’s a [poorly-named link](http://www.google.com/ "Google").

Use backticks (`) to create an inline <code> span:

In HTML, the `p` element represents a paragraph.

Select some inline text and press ⌘ + K on Mac or Ctrl + K on Windows to make it a <code> span.

Indent four spaces to create an escaped <pre><code> block:

    printf("goodbye world!"); /* his suicide note
                                 was in C */

Alternatively, you could use triple backtick syntax:

```
printf("goodbye world!"); /* his suicide note
                             was in C */
```

Select a block of text (more than one line) and press ⌘ + K on Mac or Ctrl + K on Windows to make it a preformatted <code> block.

Quoting text can be done as follows:

> Lorem iPad dolor sit amet, consectetur Apple adipisicing elit,
> sed do eiusmod incididunt ut labore et dolore magna aliqua Shenzhen.
> Ut enim ad minim veniam, quis nostrud no multi-tasking ullamco laboris
> nisi ut aliquip iPad ex ea commodo consequat.

Select a block of text and press ⌘ + E on Mac or Ctrl + E on Windows to make it a <blockquote>.

Spammer? (Enter ‘no’) *

Mathias Bynens

JavaScript `foo.prototype.bar` notation

A note about jQuery

Comments

Leave a comment