Since the start of the year I have been pretty good about my resolution to get better with JavaScript. One of the things that I initially stumbled on was the difference between functions and methods in JavaScript. I have watched several tutorials on JavaScript from Lynda, Udemy, Nettuts, CodeSchool, AppendTo and Treehouse. Ultimately, the clearest answer to my question came from Treehouse.

One of the courses that I recently completed on Treehouse was on jQuery. After that course, I became even more confused about the difference between JavaScript functions and methods. I went ahead and posted a question in the recently launched forums at Treehouse and received an answer from the course’s instructor, Andrew Chalkley. It was such a good/thorough response, that I requested permission to re-post the it here.

So without further adieu, here is the difference between functions and methods in JavaScript.

I’ve made several changes to the original response and included examples where I felt necessary. While this isn’t a direct quote, the gist of Andrew’s answer in the Treehouse forums is still present.

Hi John,

I tend to use the terms interchangeably because in most, if not all cases, they’re identical in meaning.

I found a stackoverflow that discusses it more — note the replies to the answer on how the definitions slightly change language to language. But I don’t think this definition helps either, so I’ll try to explain.

You can do some pretty crazy-cool things in JavaScript like passing functions around from the global scope in to an object and vice versa. The key with JavaScript the scope in which a function is executed.

For example when you define the whoIsThis function below:

function whoIsThis() {
    console.log(this); // logs window to the console when executed

This function is now a method on the window object. Any function defined in the global scope (in browsers) gets bound to window. Whilst we haven’t implicitly passed in window, we can access it and all the variables in the global scope. Within the context of the whoIsThis function, this points to the window object.

// Define a function in the global scope
function sayHi() {
// Which means I can call
window.sayHi(); // shows an alert with the string "Hi" 

In the example above, there is a function declared on the second line. If you look at last line, we call this function on the window object. So, you could say that the sayHi() function is a method since it’s being explicitly called on the window object.

Screenshot of developer console in chrome showing jQuery being called
Calling jQuery on the window object

Similarly, jQuery is called on the window object. If you open your browser’s JavaScript console and type in window.jQuery, you can verify this. So, I find that definition proposed on StackOverflow confusing.

To be honest, I wouldn’t get too hung up on the definitions. Scope is what you should be focusing on, not the semantics of functions vs methods. The context of this within the function/method is the key.

In your day to day developer life, someone may call it the fooBar() function rather than the fooBar method. There is no issue. People understand these terms as interchangeable.

Eventually you’ll be writing code that doesn’t pollute the the global scope unnecessarily. CoffeeScript does this straight out of the box wrapping all of your code in a self-executing anonymous function when it’s compiled down to JavaScript.

Regards, Andrew

Fantastic answer! I hope this makes the JavaScript functions vs methods issue as clear to you as it does to me.

Posted by: John Dugan