javascript - Does order of functions and objects really matter in Angular JS file containing module?

Question

Here is app.js from my Angular JS App:

var app = angular.module('store',[]); // [] is for dependencies which we don't have yet so it's empty

(function(){
    app.controller('StoreController',function(){
        this.blabla = student;
    });
})();



(function(){
    app.controller('ControllerForArrayOfStudents',function(){
        this.students = student1;
    });
})();

var student = 
{
    name:"Abc Def",
    rollNumber:12,
    isBrilliant: true,
    isMale:false,
    isFemale: false
}



var student1 = 
[
{
    name:"Abc Def",
    rollNumber:12,

},

{
    name:"Ghi",
    rollNumber:13,
}
]

This works fine unless I change the order of functions and objects as follows:

var app = angular.module('store',[]); // [] is for dependencies which we don't have yet so it's empty

(function(){
    app.controller('StoreController',function(){
        this.blabla = student;
    });
})();

var student = 
{
    name:"Abc Def",
    rollNumber:12,
    isBrilliant: true,
    isMale:false,
    isFemale: false
}


(function(){
    app.controller('ControllerForArrayOfStudents',function(){
        this.students = student1;
    });
})();




var student1 = 
[
{
    name:"Abc Def",
    rollNumber:12,

},

{
    name:"Ghi",
    rollNumber:13,
}
]

Error I am getting on changing order is this:

Does order of functions and objects really matter in Angular JS file containing modules?

Answer 1

How to fix it

That happens because you're missing all the semicolons after the variable declarations. If you add them, it works fine. AngularJs has nothing to do with it.

In the first case it works, because the JavaScript parser of Chrome notices that the next term after the object initializer for student is var, which could only stand at the beginning of a statement, so it assumes that it is a new statement and inserts the semicolon for you thanks to automatic semicolon insertion.

But it can't do that in your second example, because the ( after the object initializer is valid and looks like the beginning () operator that does a function call, expecting what's in front of it to be a function reference. So you need the semicolon, it can't be inserted for you:

var app = angular.module('store',[]); // [] is for dependencies which we don't have yet so it's empty

(function(){
    app.controller('StoreController',function(){
        this.blabla = student;
    });
})();

var student = 
{
    name:"Abc Def",
    rollNumber:12,
    isBrilliant: true,
    isMale:false,
    isFemale: false
};  // <======================= here

(function(){
    app.controller('ControllerForArrayOfStudents',function(){
        this.students = student1;
    });
})();

var student1 = [
  {
      name:"Abc Def",
      rollNumber:12,

  },

  {
      name:"Ghi",
      rollNumber:13,
  }
];

About automatic semicolon insertion (ASI)

The standard declares that JavaScript interpretes must insert semicolons in the token stream in certain situations, where the syntax is somewhat clear and a newline is involved. (Automatic semicolon insertion) In the first snippet all the missing semicolons are in those special cases, as they do not form a valid grammar without semicolons, so they are inserted. (The statement cannot continue with another var, or an eof) In the second one, the following token is a (, which is allowed by some production of the grammar, and is not a restricted production. Specifically it is a CallExpression, of the first form, as an ObjectLiteral is a MemberExpression, as stated in the syntactic grammar.

P.S.: Moral of the story: use semicolons. Semicolons introduce redundancy in the grammar, and programming languages need a healthy level of redundancy in order to be able to notice typos. A language with no redundancy would mean that any random sequence of characters would be a valid code.