avoid Javascript variable modification from browser console

No. The browser is the user's domain. They have the possibility to modify your scripts and inject their own functionality in various ways (through the console or browser plug-ins). That's one of the reasons why you should never blindly trust user input on the server side.

They could even manually forge a complete request, tricking your server into thinking that your JavaScript code made that request.

If you want these values to be secure, you need to keep them on the server. You can send them to the client, of course, as long as you keep a possibility to validate the values against those on the server.

The only way to make the variables not (easily) modifiable by a user is to remove them from global scope - something like

!function() {
  foo = null;
  bar = null;
}()

You'll need to redesign the way your modules interact with each other to accomplish this. An MVC Framework like Angular.js will help.

You should never rely on this as a security mechanism, though - the browser is fully in the user's control.

Still for them who are searching solution to this problem, use const modifier while assigning variable instead of var. Now try to change value of variable from browser console. It will throw error Uncaught TypeError: Assignment to constant variable that will prevent your data from being modified.

A possible way to avoid to (easily) modify javascript variables from the browser console is to either use the get operator (ECMAScript 5) or a getter-function.

To make it possible to define "private" variables, an anonymous function defines the variables in the local scope, so that it is not globally available. (as mentioned in joews' answer)

As mentioned before, this does not make it impossible to manipulate the variables.

Via get operator:

window.app = (function () {
    var _foo = 123; // private variable
    return {
        get foo () { return _foo; }
    };
}());

// --- accessing app from the console ---
// app.foo is readable from console, but not modifiable
console.log(app.foo);
app.foo = 234;
console.log(app.foo); // 123
// However, app.foo can still be modified via Object.defineProperty or
// removed with the delete operator

Via getter-function (older browsers, e.g IE < 9):

window.app = (function () {
    var _foo = 123; // private variable
    return {
        foo: function() { return _foo; }
    };
}());

// --- accessing app from the console ---
console.log(app.foo()); // 123
// However, the foo function can still be overwritten.
// But at least, the internal _foo variable is unaffected.
app.foo = function () { return 234; }