Нужно ли объявлять пустой массив внутри объекта в Javascript перед его использованием?

Question

Итак, я только начал изучать Javascript, и одной из проблем, с которыми я столкнулся, был расчет чаевых на основе выплаченной суммы.Это была моя первая попытка:

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);

Но я получил такую ​​ошибку:

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

Затем я объявил пустой массив внутри объекта:

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);

И это сработало просто отлично.

Мой вопрос

Когда я делал обычную переменную внутри функции внутри объекта, а не в массиве, у меня не былообъявить это заранее.Всегда ли это так с массивами, и если кто-то может объяснить ошибку, я получил немного больше?

Answer 1

Это просто ссылка на тот факт, что в любом объявленном объекте JS вы можете ссылаться на любое имя свойства (у вас просто будет неопределенное значение):

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

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

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

Но в вашем случае вы пытаетесьчтобы получить доступ к определенному индексу вкладки, которая не существует, поэтому не индексируется

Ваша ошибка относится к первому заданию, которое вы пытаетесь:

Uncaught TypeError: Cannot set property '0' of undefined

В этой строке, когда i = 0:

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

Answer 2

Да, вы должны объявлять сложные объекты, прежде чем получить к ним доступ.Это просто причина, по которой вы должны это делать - каждое поле объекта имеет значение undefined, если значение не было установлено вообще.В этом случае вы просто пытаетесь получить доступ к первому элементу значения undefined, который вызвал ошибку.Та же ошибка будет выдана, если вы захотите получить доступ к под-свойству свойства, которое undefined

var a = {
    b: '111'
}

a.c.d = '222'

не будет работать, потому что свойство c отсутствует и его значение равно undefined.Вы должны создать свойство c first

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

}

a.c.d = '222'

будет работать