Question: I am currently maintaining a large number of JS files and the dependency issue is growing over my head. Right now I have each function in a separate file and I manually maintain a database to work out the dependencies between functions.

This I would like to automate. For instance if I have the function f

```
Array.prototype.f = function() {};

```

which is referenced in another function g

```
MyObject.g = function() {
    var a = new Array();
    a.f();
};

```

I want to be able to detect that g is referencing f.

How do I go about this? Where do I start? Do I need to actually write a compiler or can I tweak Spidermonkey for instance? Did anyone else already do this?

Any pointers to get me started is very much appreciated

Thanks
Dok

Answer: 
Whilst you could theoretically write a static analysis tool that detected use of globals defined in other files, such as use of `MyObject`, you couldn't realistically track usage of `prototype` extension methods.

JavaScript is a dynamically-typed language so there's no practical way for any tool to know that `a`, if passed out of the `g` function, is an `Array`, and so if `f()` is called on it there's a dependency. It only gets determined what variables hold what types at run-time, so to find out you'd need an interpreter and you've made yourself a Turing-complete problem.

Not to mention the other dynamic aspects of JavaScript that completely defy static analysis, such as fetching properties by square bracket notation, the dreaded `eval`, or strings in timeouts or event handler attributes.

I think it's a bit of a non-starter really. You're probably better of tracking dependencies manually, but simplifying it by grouping related functions into modules which will be your basic unit of dependency tracking. OK, you'll pull in a few more functions that you technically need, but hopefully not too much.

It's also a good idea to namespace each module, so it's very clear where each call is going, making it easy to keep the dependencies in control manually (eg. by a `// uses: ThisModule, ThatModule` comment at the top).

Since extensions of the built-in prototypes are trickier to keep track of, keep them down to a bare minimum. Extending eg. `Array` to include the ECMAScript Fifth Edition methods (like `indexOf`) on browsers that don't already have them is a good thing to do as a basic fixup that all scripts will use. Adding completely new arbitrary functionality to existing prototypes is questionable.
It would be nice to have a tool that can automatically detect those dependencies for you and choose how they are loaded. The best solutions today are a bit cruder though. I created a dependency manager for my particular needs that I want to add to the list ([Pyramid Dependency Manager](http://joel.inpointform.net/software-development/pyramid-js-a-web-dependency-manager/)). It has some key features which solve some unique use cases.

1. Handles other files (including inserting html for views...yes, you can separate your views during development)
2. Combines the files for you in javascript when you are ready for release (no need to install external tools)
3. Has a generic include for all html pages. You only have to update one file when a dependency gets added, removed, renamed, etc

Some sample code to show how it works during development. 

File: **dependencyLoader.js**

```
//Set up file dependencies
Pyramid.newDependency({
    name: 'standard',
    files: [
    'standardResources/jquery.1.6.1.min.js'
    ]
});

Pyramid.newDependency({
name:'lookAndFeel',
files: [
    'styles.css',
    'customStyles.css',
    'applyStyles.js'
    ]
});

Pyramid.newDependency({
name:'main',
files: [
    'createNamespace.js',
    'views/buttonView.view', //contains just html code for a jquery.tmpl template
    'models/person.js',
    'init.js'
    ],
    dependencies: ['standard','lookAndFeel']
});

```

**Html Files**

```
<head>
    <script src="standardResources/pyramid-1.0.1.js"></script>
    <script src="dependencyLoader.js"></script>
    <script type="text/javascript">
        Pyramid.load('main');
    </script>
</head>

```

It does require you to maintain a single file to manage dependencies. I am thinking about creating a program that can automatically generate the loader file for you based on includes in the header but since it handles many different types of dependencies, maintaining them in one file might actually be better.