Do I have to declare a empty array inside of a object in Javascript before using it?

Question

So, I just started learning Javascript, and one of the problems I did was calculating a tip based on a amount paid. This was my first attempt:

var john = {
    bills: [124, 48, 268, 180, 42],
    calculateTip: function() {
        for (var i = 0; i < this.bills.length; i++) {
            if (this.bills[i] < 50) {
                this.tips[i] = this.bills[i] * 0.2;
            } else if (this.bills[i] < 200) {
                this.tips[i] = this.bills[i] * 0.15;
            } else {
                this.tips[i] = this.bills[i] * 0.1;
            }
        }
        return this.tips;
    }
};

john.calculateTip();
console.log(john.tips);

But this was the error I would get:

Uncaught TypeError: Cannot set property '0' of undefined
    at Object.calculateTip (script.js:8)
    at script.js:17
calculateTip @ script.js:8
(anonymous) @ script.js:17

Then I just declared a empty array inside of a object:

var john = {
    bills: [124, 48, 268, 180, 42],
    tips: [],
    calculateTip: function() {
        for (var i = 0; i < this.bills.length; i++) {
            if (this.bills[i] < 50) {
                this.tips[i] = this.bills[i] * 0.2;
            } else if (this.bills[i] < 200) {
                this.tips[i] = this.bills[i] * 0.15;
            } else {
                this.tips[i] = this.bills[i] * 0.1;
            }
        }
        return this.tips;
    }
};

john.calculateTip();
console.log(john.tips);

And it worked just fine.

My question is

When I was making a normal variable inside a function inside of a object, and not an array, I didn't have to declare it beforehand. Is this always the case with arrays, and if someone can explain the error I got a bit more?

Yes because this.tips (without declaration) returns "undefined" which is not a array. And indexing a non array (more generally object in case of javascript) throws error. — RK_15
– RK_15, Commented Feb 21, 2019 at 12:51
A solution is that before for loop declare this.tips = []; and then run for loop — RK_15
– RK_15, Commented Feb 21, 2019 at 12:52

Seba99 · Accepted Answer · 2019-02-21 13:02:18Z

1

It's just link to the fact that in any declared JS Object you can refers to any property name (You'll just have an undefined value) :

var test = { name: "Hello" }
console.log(test.anything) // Would print undefined

var test2 = { 
             name: "Hello"
             test3 : {}
            }

console.log(test2.test3.anything) // Would print undefined

But in your case you're trying to acces a specific index of a tab that doesn't exist so isn't indexed

Your error refers to the first assignement you're trying :

Uncaught TypeError: Cannot set property '0' of undefined

At this line when i = 0 :

this.tips[i] = this.bills[i] * 0.2;
      ^
   undefined
Then undefined[0] would throw the error

edited Feb 21, 2019 at 13:02

answered Feb 21, 2019 at 12:56

Seba99

1,3391 gold badge17 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andry Shutka · Accepted Answer · 2019-02-21 12:53:18Z

0

Yes, you have to declare complex objects before accessing them. There is simply reason why you should do that - every object field has a value undefined if value wasn't set at all. In this case you just trying to access first element of undefined value which is caused the Error. The same Error will be thrown if you want to access sub-property of property that is undefined

var a = {
    b: '111'
}

a.c.d = '222'

won't work because property c is missing and it's value is undefined. You should create property c first

var a = {
    b: '111',
    c: {}

}

a.c.d = '222'

will work

answered Feb 21, 2019 at 12:53

Andry Shutka

4132 silver badges4 bronze badges

Collectives™ on Stack Overflow

Do I have to declare a empty array inside of a object in Javascript before using it?

My question is

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My question is

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related