1. Technology

Learn Modern Unobtrusive JavaScript

Functions and Methods


Woman working from home
Sara Wight/Photodisc/Getty Images

Perhaps one of the biggest differences between structured programming and object oriented programming is the terminology used to refer to the component parts of the programming language. One of the main reasons for this is that the actual relationships between some of the language components are actually different. On object oriented programming a method works very similarly to how a function works except that a method belongs to a particular class and can therefore only be run for objects that belong to that class.

JavaScript is not (pre version 2.0) an object oriented language but it does use objects and therefore a lot of the terminology used in object oriented languages to refer to the components of classes and objects is also used to refer to objects in JavaScript. (The draft for JavaScript version 2.0 does convert JavaScript into an object oriented language but at this stage there is no browser that supports JavaScript 2.0 apart from treating those keywords that will have a special meaning in JavaScript 2.0 as reserved words). Any "function" that is directly associated with a specific object or type of object in JavaScript can therefore be considered to be a "method" of that object.

The distinction between functions and methods in JavaScript is not as great as would be the case in some other languages because, with the exception of a couple of predefined functions, all functions in JavaScript including all of those that you define yourself are actually associated with a specific object. All of the functions that you define in your code that you do not specifically associate with a particular object are considered by JavaScript to be methods of the window object. This effectively makes the terms "function" and "method" equivalent at least in so far as JavaScript is concerned.

You don't normally need to worry about the way that the functions are defined as methods of the window object as most of the time the way that you reference the functions in your code it will be unnecessary to take that into account. What you will have to remember if the situation ever arises is that a method that is defined for the windows object is exactly equivalent to a function that is separately defined that has the same name and that any of the processing that can be performed on other objects to access the methods attached to that object can also be run on the window object to access all oof the functions that you define.

The way that you define a method is a little different from how you define a function. As we have seen we can define a function like this:

function myfunction() {..}

In defining a method we need to use an alternative construct that allows us to specify the object to which the method is to be attached. We do this by specifying the object name, a dot, and then the method name so myobject.mymethod represents a method called mymethod belonging to an object named myobject. We can define this method like this:

myobject.mymethod = function() {...} ;

One problem with defining a method this way is that if we create multiple objects based on myobject (which we will see how to do in a later tutorial) then the code for the mymethod will be copied for each separate object. Since the actual code that we will want it to run should be the same for each object, it will be far more efficient if we can define our method so that it can be shared between all of the objects of the same type. We do this by making a minor change to the way that we define the method.

myobject.prototype.mymethod = function() {...} ;

By adding the reference to prototype between the object and method names like this we allow this method to be shared with any copies that are made of this object rather than the copying of the object also creating a copy of the method.

As all functions are actuually methods of the window object, our earlier stand alone function definition can actually be defined as

window.myfunction = function() {...} ;

As the window object is created for us automatically and we never need to create our own objects based on the window object, it doesn't really matter whether the prototype reference is there or not with functions. Of course the earlier method we looked at for creating functions is shorter, simpler code and so we will usually define those functions that we don't need to associate with a specific object the first way that I demonstrated and will generally overlook the fact that it is actually being created as a method attached to the window object.

So as you can see there is not really any distinction between functions and methods in JavaScript. Also all methods are created using code that involves the "function" keyword. You might therefore just consider functions and methods in JavaScript as being two ways of referring to the same thing with function perhaps being the more obvious term to use since that is actually included in the command that defines one.

More of This Tutorial

  1. About.com
  2. Technology
  3. JavaScript
  4. Javascript Tutorials
  5. Learn Modern JavaScript
  6. Unobtrusive JavaScript - Functions and Methods

©2014 About.com. All rights reserved.