Свойства в квадратных скобках

Есть и другой способ прочитать свойство: квадратные скобки с ключом в кавычках.

const stock = {
    apples: 12,
    lemons: 0,
    peaches: 30
};

console.log(stock["peaches"]);

30

stock["peaches"] означает то же, что и stock.peaches, просто записано длиннее. Зачем же он нужен? Затем, что внутри скобок можно написать любое значение, в том числе переменную. Тогда вам не нужно знать ключ в момент написания программы:

const stock = { apples: 12, lemons: 0, peaches: 30 };

const fruit = "apples";
console.log(stock[fruit]);

12

Сначала JavaScript заглядывает в переменную fruit, находит в ней текст "apples" и только потом читает свойство apples. Больше всего это полезно в функциях, где ключ приходит как аргумент:

const stock = { apples: 12, lemons: 0, peaches: 30 };

function isInStock(fruit) {
    return stock[fruit] > 0;
}

console.log(isInStock("apples"));
console.log(isInStock("lemons"));

true
false

Каждый вызов читает другое свойство, и функция работает для любого фрукта, даже для того, который вы добавите в объект позже.

Типичные ошибки:

• stock.fruit не заглядывает в переменную fruit. Оно ищет свойство с ключом fruit, не находит его, и вы получаете undefined. То же самое с stock["fruit"]: в кавычках "fruit" — это просто текст, а не переменная.
• stock[apples] без кавычек ищет переменную apples, которой нет: ReferenceError: apples is not defined.

Итак: если вы знаете ключ, когда пишете код, используйте точку. Если ключ лежит в переменной, используйте квадратные скобки без кавычек. Квадратные скобки подходят и для изменения значений: stock[fruit] = 5;.