Javascript – What’s the difference between application- and router level- middleware when routing in Express

expressjavascriptnode.jsurl-routing

Application level middleware are bound to an instance of express, using app.use() and app.VERB().

Router level middleware work just like application level middleware except they are bound to an instance of express.Router(). The middleware system created at the application level in the example above, can be replicated at the router level using the following code.

In the app provided by the Express generator, I see in the main app.js, there is:

var routes = require('./routes/index');
app.use('/', routes);

And in ./routes/index.js, I see this:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

What is the purpose of app.use passing it to router.get instead of simply using app.get? And generally, what's the difference between app.VERB and router.VERB in terms of routing?

Best Answer

What is the purpose of app.use passing it to router.get instead of simply using app.get?

This is all just designing for modularity. It allows an application to be divided into several smaller loosely-coupled pieces and because they all do not have any direct knowledge of the shared app instance that combines them together, the modularity is achieved.

For example, you could build a whole user account subsystem that handles sign up, login, forgot password, etc, and share it between several different applications by "mounting" it within them via app.use(require("my-user-system")).

That's the only purpose behind this. There no functional, technical, or performance difference otherwise.

And generally, what's the difference between app.VERB and router.VERB in terms of routing?

No difference. The app has it's own main/primary router and app.VERB is just convenience sugar for the equivalent of app.router.VERB.

Scoping rules

The main difference is scoping rules. Variables declared by var keyword are scoped to the immediate function body (hence the function scope) while let variables are scoped to the immediate enclosing block denoted by { } (hence the block scope).

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar); // Foo Bar

  {
    var moo = "Mooo"
    let baz = "Bazz";
    console.log(moo, baz); // Mooo Bazz
  }

  console.log(moo); // Mooo
  console.log(baz); // ReferenceError
}

run();

The reason why let keyword was introduced to the language was function scope is confusing and was one of the main sources of bugs in JavaScript.

Take a look at this example from another stackoverflow question:

var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value: " + i);
  };
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

My value: 3 was output to console each time funcs[j](); was invoked since anonymous functions were bound to the same variable.

People had to create immediately invoked functions to capture correct values from the loops but that was also hairy.

Hoisting

While variables declared with var keyword are hoisted (initialized with undefined before the code is run) which means they are accessible in their enclosing scope even before they are declared:

function run() {
  console.log(foo); // undefined
  var foo = "Foo";
  console.log(foo); // Foo
}

run();

let variables are not initialized until their definition is evaluated. Accessing them before the initialization results in a ReferenceError. The variable is said to be in "temporal dead zone" from the start of the block until the initialization is processed.

function checkHoisting() {
  console.log(foo); // ReferenceError
  let foo = "Foo";
  console.log(foo); // Foo
}

checkHoisting();

Creating global object property

At the top level, let, unlike var, does not create a property on the global object:

var foo = "Foo";  // globally scoped
let bar = "Bar"; // not allowed to be globally scoped

console.log(window.foo); // Foo
console.log(window.bar); // undefined

Redeclaration

In strict mode, var will let you re-declare the same variable in the same scope while let raises a SyntaxError.

'use strict';
var foo = "foo1";
var foo = "foo2"; // No problem, 'foo1' is replaced with 'foo2'.

let bar = "bar1"; 
let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared

Javascript – the difference between call and apply

The difference is that apply lets you invoke the function with arguments as an array; call requires the parameters be listed explicitly. A useful mnemonic is "A for array and C for comma."

See MDN's documentation on apply and call.

Pseudo syntax:

theFunction.apply(valueForThis, arrayOfArgs)

theFunction.call(valueForThis, arg1, arg2, ...)

There is also, as of ES6, the possibility to spread the array for use with the call function, you can see the compatibilities here.

Sample code:

function theFunction(name, profession) {
    console.log("My name is " + name + " and I am a " + profession +".");
}
theFunction("John", "fireman");
theFunction.apply(undefined, ["Susan", "school teacher"]);
theFunction.call(undefined, "Claude", "mathematician");
theFunction.call(undefined, ...["Matthew", "physicist"]); // used with the spread operator

Best Answer

Related Solutions

Javascript – What’s the difference between using “let” and “var”

Scoping rules

Hoisting

Creating global object property

Redeclaration

Javascript – the difference between call and apply

Related Topic