javascript - Routing doesn't work when in for-loop -

i building website using polymer (>= 1.2.0) based on psk (polymer starter kit).

i running (probably noob) problem attempting centralize and/or automatize router configurations.

i have appended following code end of psk's app.js file:

//note: app.baseurl set psk's original code earlier in file: app.baseurl = '/'; app.routemap = [   {name: "home", text: "home", icon: "home", url: app.baseurl},   {name: "about", text: "about", icon: "face", url: app.baseurl + "about"},   {name: "portfolio", text: "portfolio", icon: "build", url: app.baseurl + "portfolio"},   {name: "contact", text: "contact", icon: "mail", url: app.baseurl + "contact"} ]; 

i replaced original routing-configuration code in routing.html new version, uses routemap:

page('*', scrolltotop, closedrawer, function (ctx, next) {   next(); });  page('/', function () {   app.route = app.routemap[0].name; });  page(app.routemap[0].url, function () {   app.route = app.routemap[0].name; });  page(app.routemap[1].url, function () {   app.route = app.routemap[1].name; });  page(app.routemap[2].url, function () {   app.route = app.routemap[2].name; });  page(app.routemap[3].url, function () {   app.route = app.routemap[3].name; });  //404 page('*', function () {   app.$.toast.text = 'can\'t find: ' + window.location.href + '. redirected home page';   app.$.toast.show();   page.redirect(app.baseurl); }); 

the above code works fine! breaks when try use for-loop instead of hard-code:

page('*', scrolltotop, closedrawer, function (ctx, next) {   next(); });  page('/', function () {   app.route = app.routemap[0].name; });  //doesn't work for-loop... (i = 0; < app.routemap.length; i++) {   //debug   console.log("registering route: " + + " - name: " + app.routemap[i].name + " - url: " + app.routemap[i].url);   page(app.routemap[i].url, function () {     app.route = app.routemap[i].name;   }); }  //404 page('*', function () {   app.$.toast.text = 'can\'t find: ' + window.location.href + '. redirected home page';   app.$.toast.show();   page.redirect(app.baseurl); }); 

the debug console.log() prints items of routemap expected, routes don't work (the page(app.routemap[i].url, function () { /*...*/ }); part doesn't work?), , uncaught typeerror: cannot read property 'name' of undefined located at (anonymous function) (app/elements/routing.html:86:36)

can identify problem here? it's noob one, it's flying straight on head...

(i know bit of languages involved [html, css & js], first time making website, , putting knowledge serious use in project, rather in exercise/learning-assignment)

my first guess scoping. take @ examples below (output console). try doing console.log on i inside anonymous callback function. expect may not think are.

my expectation i length of array out of bounds when used index (because index starts @ 0).

i created code below show how scope of callback can effect expect. basically, scope of callback not same scope created anonymous function (because called later).

var = [11, 22, 33, 44, 55, 66];    function pass(arr) {    (var = 0; < arr.length; i++) {      settimeout(function(v) {   // function returns function copy of current iterator value (non-object type)        return function() {          console.log("i in pass: i=" + v);        }      }(i), 0)    }  }    function nocb(arr) {    (var = 0; < arr.length; i++) {      console.log("i not in cb: i=" + i); // executed here    }  }    function fail(arr) {    (var = 0; < arr.length; i++) {      settimeout(function() {               // function define not run here        console.log("i in fail: i=" + i)  // here same being iterated loop.      }, 0)                                  // value looked @ after loop completed when callback called later    }  }      fail(a);  nocb(a);  pass(a);

i changed i in pass() v copy. can use i in place there show copy , not same reference.