Difference between javascript modularisation and dependency Injection

Question

What 's the difference with the modularisation of a javascript code (with browserify by example) and the dependency injection?

Are they synonymes? Are the two going together? Or Am I missing some point?

Answer 1

Modularisation refers to breaking code into individual, independent "packages".
Dependency injection refers to not hardcoding references to other modules.

As a practical example, you can write modules which are not using dependency injection:

import { Foo } from 'foo';

export function Bar() {
    return Foo.baz();
}

Here you have two modules, but this module imports a specific other hardcoded module.

The same module written using dependency injection:

export function Bar(foo) {
    return foo.baz();
}

Then somebody else can use this as:

import { Foo } from 'foo';
import { Bar } from 'bar';

Bar(Foo());

You inject the Foo dependency at call time, instead of hardcoding the dependency.

Answer 2

You can refer this article:

Modules are code fragments that implement certain functionality and are written by using specific techniques. There is no out-of-the box modularization scheme in the JavaScript language. The upcoming ECMAScript 6 specification tends to resolve this by introducing the module concept in the JavaScript language itself. This is the future.

and Dependency injection in JavaScript

The goal

Let's say that we have two modules. The first one is a service which makes Ajax requests and the second one is a router.

var service = function() {
    return { name: 'Service' };
}
var router = function() {
    return { name: 'Router' };
}

We have another function which needs these modules.

var doSomething = function(other) {
    var s = service();
    var r = router();
};

And to make the things a little bit more interesting the function needs to accept one more parameter. Sure, we could use the above code, but that's not really flexible. What if we want to use ServiceXML or ServiceJSON. Or what if we want to mockup some of the modules for testing purposes. We can't just edit the body of the function. The first thing which we all come up with is to pass the dependencies as parameters to the function. I.e.:

var doSomething = function(service, router, other) {
    var s = service();
    var r = router();
};

By doing this we are passing the exact implementation of the module which we want. However this brings a new problem. Imagine if we have doSomething all over our code. What will happen if we need a third dependency. We can't edit all the function's calls. So, we need an instrument which will do that for us. That's what dependency injectors are trying to solve. Let's write down few goals which we want to achieve:

• we should be able to register dependencies
• the injector should accept a function and should return a function which somehow gets the needed resources
• we should not write a lot, we need short and nice syntax
• the injector should keep the scope of the passed function
• the passed function should be able to accept custom arguments, not only the described dependencies

A nice list isn't it. Let's dive in.