How to call the value of a property outside of a constructor function in Javascript?

Question

EDIT: I've included my more code for clarity I've created a table using a constructor function to create multiple table bodies, but I don't want the header and footer repeated so I've created those separately. However, one the properties of the created is an empty array that gets filled. I can't currently access it.

function Store(storeId, minCustomer, maxCustomer, avgSale) {
    this.storeId = storeId;
    this.minCustomer = minCustomer;
    this.maxCustomer = maxCustomer;
    this.avgSale = avgSale;
    this.arrCookie = [];
    this.addDom();
};
Store.prototype.addDom = function() {
    this.cookiesPerHour();
    var findTable = document.getElementById('table');
    var tBody = document.createElement('tbody');
    var trtBody = document.createElement('tr');
    var tdstoreId = document.createElement('td');
    tdstoreId.innerHTML = this.storeId;
    findTable.appendChild(tBody);
    tBody.appendChild(trtBody);
    trtBody.appendChild(tdstoreId);
    var totalStoreCookies = 0;
    for (var i = 0; i < this.arrCookie.length; i++) {
        var info1 = document.createElement('td');
        info1.innerHTML = this.arrCookie[i];
        trtBody.appendChild(info1);
    };
    for (var i = 0; i < this.arrCookie.length; i++) {
        totalStoreCookies += this.arrCookie[i];
    };
    var info2 = document.createElement('td');
    info2.innerHTML = totalStoreCookies;
    trtBody.appendChild(info2);
};

function makeTHF() {
    var totalCookies = 0;
    var findTable = document.getElementById('table');
    var tHead = document.createElement('thead');
    var trtHead = document.createElement('tr');
    var findTable = document.getElementById('table');
    var tFoot = document.createElement('tfoot');
    var trtFoot = document.createElement('tr');
    var hourlyTotal = document.createElement('td');
    findTable.appendChild(tHead);
    tHead.appendChild(trtHead);
    findTable.appendChild(tFoot);
    tFoot.appendChild(trtFoot);
    for (var i = 0; i < 17; i++) {
        var time = document.createElement('th');
        time.innerHTML = arrTime[i];
        trtHead.appendChild(time);
    };
    for (var i = 0; i < arrCookie.length; i++) {
        var storeName = [PDXAirport, PioneerSquare, Powells, StJohns, Waterfront];
        hourlyTotal.innerHTML = 'Total';
        var colTotal = 0;
        for (var j = 0; j < storeName.length; j++) {
            colTotal += storeName[j].arrCookie[i];
            hourlyTotal.innerHTML = colTotal;
        };
        trtFoot.appendChild(hourlyTotal);
        console.log(storeName);
    };
};
var PDXAirport = new Store('PDX Airport', 23, 65, 6.3);
var PioneerSquare = new Store('Pioneer Square', 3, 24, 1.2);
var Powells = new Store('Powell\'s', 11, 38, 3.7);
var StJohns = new Store('St. John\'s', 20, 38, 2.3);
var Waterfront = new Store('Waterfront', 2, 16, 4.6);
makeTHF();

When I try use arrCookie during the makeTHF function I get an error saying undefined when I try to use arrCookies.length as an instruction for the "for" loop. placing "this." before it doesn't change the outcome. I can't think of any reasons why this wouldn't work. The array is being properly populated during the prototype function. I've deleted some of the code not relevant to the problem for brevity.

"Call"? Do you mean access? Why not `this.arrCookie` (where *this* is an instance of *Store*)? — RobG, Aug 13 '17 at 23:31
It's not clear what you're asking. I would suggest posting examples of "populated using function prototypes and subsequent object creation" and how you're expecting to be able to access the array. What do you mean by "regular function"? — Evan Trimboli, Aug 13 '17 at 23:32
We call them *property values*, regardless whether inside a constructor or not. — Bergi, Aug 13 '17 at 23:39
Thanks for your edit. Yes, there is no global `arrCookie` variable. There is no store instance either of which it would be a property! You will have to swap the two loops - iterate the stores, and then for each store iterate its cookies. Only then you will know how many cookies *that particular store* have - a global length variable doesn't make any sense. — Bergi, Aug 14 '17 at 00:08

score -1 · Answer 1 · answered Aug 13 '17 at 23:40

You can either call the property directly store.arrCookies or create a prototype function as a getter:

Store.prototype.getCookies = function() {
  return this.arrCookie;
};

Here's a working example:

function Store(storeId, minCustomer, maxCustomer, avgSale) {
    this.storeId = storeId;
    this.minCustomer = minCustomer;
    this.maxCustomer = maxCustomer;
    this.avgSale = avgSale;
    this.arrCookie = [];
    this.addDom();
};

Store.prototype.addDom = function() {};

Store.prototype.addCookie = function(cookie) {
  this.arrCookie.push(cookie);
};

Store.prototype.getCookies = function() {
  return this.arrCookie;
};

var store = new Store(1, 0, 1, 10);
store.addCookie('cookie1');
store.addCookie('cookie2');
console.log(store.arrCookie);
console.log(store.getCookies());

You can run this code on repl.it.

score -1 · Answer 2 · answered Aug 13 '17 at 23:43

If you do something like var s = new Store(...);, you can then access the arrCookie property by s.arrCookie. If you also transform your function to return this at the end, you could as well be having access to arrCookie by simply var s = Store(...);.

If you use Store.prototype.arrCookie = 'abc';, will actually have no effect because it's going to be overridden by this.arrCookie = []; inside your function's body which acts as a constructor but if you add a property via a prototype you will be able to access it in your new objects (eg. Store.prototype.myNewArrCookie = 123; will be accessible by objects created later).

Long story short, I think there is a misconception here, you could simply change your code to incorporate the encapsulation pattern as described in this tutorial and this SO question to get the desired results

score -2 · Answer 3 · answered Aug 13 '17 at 23:32

-2

You could just do an accessor method.

var theStore = new Store()
theStore.getArrCookie();

Where getArrCookie returns this.arrCookie.

answered Aug 13 '17 at 23:32

whatoncewaslost

2,216
2
17
25

Or you just used `theStore.arrCookie`. – Bergi Aug 13 '17 at 23:40

How to call the value of a property outside of a constructor function in Javascript?

3 Answers3