angularjs service can't access property -

i have class set this:

.factory('designerservice', function () {     var kit = {         clubname: 'moss side archery club',         teamname: 'the flying arrows',          selectedcolours: ['082140', '841c3d'],         selectedgarments: ['hoody'],         selecteddesign: "angelus",          total: '00.00',         templates: []     };      var gettemplates = function () {         var templates = [];          console.log(kit);          (var = 0; < kit.selectedgarments.length; i++) {             var garment = kit.selectedgarments[i];              kit.templates.push('/assets/garments/' + garment + '.svg');         }          return kit;     };      var getcolours = function () {         return ['000000', 'ffffff', '00adef', 'ed008c', 'fef200', '2e3192', '00a652', 'ed1b24', 'c7c8ca', 'f14e23', '6c9d30', 'c0d731', 'f5a3c7', '816ab0', '082140', '1e4f2f', '5bcaf5', 'f04e3f', 'f68b1f', 'cdbe01', 'ee4d9b', '007193', '5f1e08', '841c3d'];     };      var getgarments = function () {         return ['shirt', 'track top', 'skirt', 'hoody', 'socks', 'shorts', 'track pants', 'polo shirt', 'beanie hat', 't - shirt'];     };      var getdesigns = function () {         return ['angelus', 'claudius', 'equitius', 'octavius', 'valerius']     }      var addtoarray = function (array, item) {         array.push(item);     };      var removefromarray = function (array, item) {         var index = array.indexof(item);          if (index > -1) {             array.splice(index, 1);         }     };      var modifyarray = function (array, value) {         var = array.indexof(value);          if (i > -1) {             removefromarray(array, value);         } else {             addtoarray(array, value);         }     }      var setcolour = function (colour) {         return modifyarray(kit.selectedcolours, colour);          return kit;     };      var setgarment = function (garment) {         console.log(kit);          modifyarray(kit.selectedgarments, garment);          var kit = gettemplates();          console.log(kit);          return kit;     };      var setdesign = function (design) {         kit.selecteddesign = design;          return kit;     };      return {         kit: kit,          gettemplates: gettemplates,         getcolours: getcolours,         getgarments: getgarments,         getdesigns: getdesigns,          setcolour: setcolour,         setgarment: setgarment,         setdesign: setdesign     }; }) 

if call function setgarment first console.log(kit) returns undefined modifyarray errors @ kit.selectedgarments. if comment out line:

//modifyarray(kit.selectedgarments, garment);

then gettemplates logs kit object , returns updated object.

can explain why?

update 1

ok, understand hoisted stuff, have redesigned service this:

.factory('designerservice', function () {     var self = this;      var addtoarray = function (array, item) {         array.push(item);     };      var removefromarray = function (array, item) {         var index = array.indexof(item);          if (index > -1) {             array.splice(index, 1);         }     };      var modifyarray = function (array, value) {         var = array.indexof(value);          if (i > -1) {             removefromarray(array, value);         } else {             addtoarray(array, value);         }     }      self.kit = {         clubname: 'moss side archery club',         teamname: 'the flying arrows',          selectedcolours: ['082140', '841c3d'],         selectedgarments: ['hoody'],         selecteddesign: "angelus",          total: '00.00',         templates: []     };      self.gettemplates = function () {         var templates = [];          (var = 0; < self.kit.selectedgarments.length; i++) {             var garment = self.kit.selectedgarments[i];              self.kit.templates.push('/assets/garments/' + garment + '.svg');         }          return self.kit;     };      self.getcolours = function () {         return ['000000', 'ffffff', '00adef', 'ed008c', 'fef200', '2e3192', '00a652', 'ed1b24', 'c7c8ca', 'f14e23', '6c9d30', 'c0d731', 'f5a3c7', '816ab0', '082140', '1e4f2f', '5bcaf5', 'f04e3f', 'f68b1f', 'cdbe01', 'ee4d9b', '007193', '5f1e08', '841c3d'];     };      self.getgarments = function () {         return ['shirt', 'track top', 'skirt', 'hoody', 'socks', 'shorts', 'track pants', 'polo shirt', 'beanie hat', 't - shirt'];     };      self.getdesigns = function () {         return ['angelus', 'claudius', 'equitius', 'octavius', 'valerius']     }      self.setcolour = function (colour) {         return modifyarray(self.kit.selectedcolours, colour);          return self.kit;     };      self.setgarment = function (garment) {         modifyarray(self.kit.selectedgarments, garment);          self.gettemplates();          return self.kit;     };      self.setdesign = function (design) {         self.kit.selecteddesign = design;          return self.kit;     };      return self; }) 

would correct way go it?

since you're approaching angular factory oop side , referring public 'class' member, practice refer this.kit instead of kit (they won't equal if service's kit property changed). makes code unambiguous , readable.

the issue local var kit classic js hoisting problem, bill bergquist's answer thoroughly explains.