Javascript basics: accessing nested-functions

Question

I'm trying to learn JavaScript. I'm working on a problem where I'm making a grocery list: an array of sub-arrays that contain item, quantity and price. From there I plan to add items, read back the list, remove items, etc. My current issue is I cannot access sub-methods. I can't seem to find documentation on how to do it - but I keep reading that these methods are private? So maybe I'm way off base. I can't figure out how else I could set this up so multiple methods all talk to each other.

var groceryList = function(food, quantity, price) {
  this.item = {};
  this.items = {food:food, quantity:quantity, price:price};
  return this.items

  this.addStuff = function(food, quantity, price) {
  this.items.push({food:food, quantity:quantity, price:price});
  return this.items
  };
  this.tallyList = function() {
    return items.length;
  }
}



var myList = new groceryList("cookie", 2, 1.00);
console.log(myList)
myList.addStuff("brownie", 1, 2.50);
console.log(myList.tallyList);

Remove the `return this.items` in the middle of the function. Also, `tallyList` is a method, so you need to call it (`myList.tallyList()`). Also, you can't declare something with `this.` and then not use it later (in `tallyList`). Also, you declared `this.items` as an object literal, yet you're treating it as an array - declare it as an array: `this.items = [{food:food, quantity:quantity, price:price}];`. Here's an example: http://jsfiddle.net/m8hwsj6a/ — Ian, Oct 14 '14 at 21:50

score 1 · Accepted Answer · edited May 23 '17 at 12:11

var groceryList = function(food, quantity, price) {
    this.items = [];
    this.items.push({food:food, quantity:quantity, price:price});

    var that = this;
    this.addStuff = function(food, quantity, price) {
        that.items.push({food:food, quantity:quantity, price:price});
        return that.items;
    };

    this.tallyList = function() {
        return that.items.length;
    };

    this.getItems = function() {
        return that.items;
    };

    return this;
};

var myList = new groceryList("cookie", 2, 1.00);
console.log(myList);
myList.addStuff("brownie", 1, 2.50);
console.log(myList.tallyList());

This is the correct(-ish) version of what you are trying to accomplish.

Issues with your code:

this.items should be any array, not an object. Notice the square brackets, instead of curly braces.
Your constructor (the groceryList function) is not returning the entire class - it's returning just the list/array. So you cannot call myList.addStuff() or myList.tallyList() - they don't exist!
Please checkout How does the "this" keyword work?. Unlike other OO languages, "this" in JS does NOT refer the current "instance" but the current "scope". This page describes the usage of "this" better than I could :-)
I have added an extra function (getItems()) - you can now fetch the array of items with

myList.getItems()

Gaston Sanchez · Answer 2 · 2014-10-15T02:04:21.247

That code is kind of weird.

A list is an array in JavaScript and each item in the list you can treat it as an object just as you are doing it.

In your example, groceryList is an object that defines private "methods". Convention in JavaScript and many other programming languages is to name "classes" as UpperCamelCase, so groceryList is GroceryList.

Inside the "function" GroceryList this means the object itself, so you can attach it functions like this.addStuff = function ... or "properties" this.items = []. Arrays variables always call them in plural because they contain a collection of stuff.

this.items is an array (list) of groceries and each grocery has 3 properties: food, quantity and price. And you can add them to they array with the array method this.items.push(grocery) where grocery is a grocery object.

var GroceryList = function() {
    this.items = []; // array to store groceries

    // add to object method to add groceries to list
    this.addStuff = function(food, quantity, price) {
        this.items.push({
            food: food,
            quantity: quantity,
            price: price
        });
    };
};

var groceryList = new GroceryList();
groceryList.addStuff('cookie', 2, 1.00);
groceryList.addStuff('brownie', 1, 2.50);

console.log(groceryList.items);

There is nothing private in this "class". Don't worry about that.

Fiddle to play with http://jsfiddle.net/42cna2d3/.

Javascript basics: accessing nested-functions

2 Answers2