Цикл for...in в JS

Цикл for...in в JavaScript: перебор ключей объекта, работа со строками и массивами, подводные камни.

for...in — цикл, который последовательно перебирает ключи (свойства) объекта или индексы строки/массива.

Синтаксис

for (let ключ in объект) {
    // тело цикла
}

На каждой итерации переменная ключ получает имя очередного свойства объекта. Зная ключ, легко получить значение: объект[ключ].

Перебор свойств объекта

Пример 1. Вывести все поля объекта

const student = {
    name: "Маша",
    grade: 7,
    age: 13
};

for (let key in student) {
    console.log(`${key}: ${student[key]}`);
}

Вывод:

name: Маша
grade: 7
age: 13

Цикл прошёл по всем трём свойствам. student[key] — обращение к значению по динамическому ключу.

Пример 2. Посчитать сумму зарплат

const salaries = {
    "Андрей": 80000,
    "Мария": 95000,
    "Даниил": 72000
};

let total = 0;
for (let name in salaries) {
    total += salaries[name];
}

console.log("Итого:", total);

Вывод:

Итого: 247000

Пример 3. Добавить префикс к каждому значению

const prices = { яблоко: 50, груша: 80, банан: 40 };

for (let item in prices) {
    console.log(`${item} — ${prices[item]} ₽`);
}

Вывод:

яблоко — 50 ₽
груша — 80 ₽
банан — 40 ₽

for...in со строками

Строка в JavaScript — объект, и for...in перебирает её индексы (числовые ключи символов).

const word = "код";

for (let i in word) {
    console.log(`индекс ${i}: "${word[i]}"`);
}

Вывод:

индекс 0: "к"
индекс 1: "о"
индекс 2: "д"

for...in с массивами

Цикл перебирает индексы массива, а не сами элементы.

const fruits = ["яблоко", "груша", "слива"];

for (let i in fruits) {
    console.log(i, "→", fruits[i]);
}

Вывод:

0 → яблоко
1 → груша
2 → слива

Совет. Для массивов предпочтительнее цикл for...of или обычный for — они перебирают сами значения, а не индексы, и не затронут случайно добавленные свойства массива.

Когда использовать for...in

Задача

Лучший инструмент

Перебрать ключи объекта

for...in

Перебрать значения массива

for...of

Перебрать с индексом и условием

обычный for

Коротко

  • for...in перебирает ключи объекта; значение получают через объект[ключ].
  • Работает и со строками, и с массивами — но там перебирает индексы, а не значения.
  • Для массивов рекомендуется for...of, чтобы сразу получать элементы.
Проверьте себя
1. Для чего предназначен цикл `for...in` в JavaScript?
AДля перебора ключей объекта
BДля перебора элементов массива по значению
CДля выполнения кода заданное число раз
DДля асинхронных операций
2. Что выведет цикл `for (let key in {a: 1, b: 2}) { console.log(key); }`?
Aa b
B1 2
Ca: 1 b: 2
D0 1
3. Будут ли Symbol-ключи объекта видны в цикле `for...in`?
AДа, наравне с обычными ключами
BЗависит от версии JavaScript
CНет, Symbol-ключи игнорируются
DТолько если передать флаг