for...in

• Синтаксис
• Порядок перебора
• Как узнать количество свойств в объекте
• Итого

Цикл for…in предназначен для перебора всех перечисляемых свойств объекта в том числе и свойст из прототипа. В переборе участвуют только перечисляемые свойства, то есть те которые были добавлены при написании программы, встроенные из обхода исключаются.

Синтаксис

    
    for (let key in obj) {
        // тело цикла. Обычно это работа с получаемыми свойствами
    }        
    

key - переменная в которую поочередно записываются имена свойств объекта. Может называться, как угодно, согласно правилам именования. Объявлять переменную можно непосредственно в круглых скобках.

obj - объект чьи свойства необходимо обойти.

Для того, чтобы получить доступ в цикле до имени свойства обращаемся к key, чтобы оперировать значением к obj[key]. В последнем случае key заключаем именно в квадратные скобки, а не пишем через точку obj.key, чтобы интерпретатор JavaScript понимал, что здесь переменная а не значение.

    
    const skillsForJS = {
        skill1: 'HTML',
        skill2: 'CSS',
        skill3: 'JavaScript',
        skill4: 'React',
        skill5: 'Node.js'
    }
        
    for (let key in skillsForJS) {
        console.log(key + ': ' + skillsForJS[key])
    }        
    

Порядок перебора

Цикл for…in перебирает свойства в произвольном порядке, но условно можно выделить несколько базовых правил.

1. Имена свойств в формате строки будут обходится в порядке присвоения объекту.

    
    const skillsForDevJS = {
        HTML: 'Обязательно',
        CSS: 'Обязательно',
        JavaScript: 'Обязательно',
        React: 'Желательно',
        VueJS: 'Желательно',
        GoogleAds: 'Нет необходимости'
    }
        
    for (let key in skillsForDevJS) {
        console.log(`${key}: ${skillsForDevJS[key]}`)
    }
        
    // Результат
    // HTML: Обязательно
    // ​CSS: Обязательно
    // ​JavaScript: Обязательно
    // ​React: Желательно
    // ​VueJS: Желательно
    // ​GoogleAds: Нет необходимости        
    

Результатом будет вывод свойств в порядке перечисления в объекте сверху вниз.

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

    
    const importanceOfSkillsJS = {
        4: 'Библиотеки',
        3: 'Фреймворки',
        7: 'Архитектура',
        5: 'Git',
        1: 'Нативный JavaScript',
        6: 'DOM API',
        2: 'HTML и CSS',
    }
        
    for (let key in importanceOfSkillsJS) {
        console.log(`${key}: ${importanceOfSkillsJS[key]}`)
    }
        
    // Результат
    // 1: Нативный JavaScript
    // 2: HTML и CSS
    // 3: Фреймворки
    // 4: Библиотеки
    // 5: Git
    // 6: DOM API
    // 7: Архитектура        
    

Если имена свойств это числа и стоит задача вывести их в порядке присвоения объекту, можно перевести числа при записи в объекте в формат строки, а при выводе обратно в числа.

    
    const importanceOfSkillsJS = {
        '+4': 'Библиотеки',
        '+3': 'Фреймворки',
        '+7': 'Архитектура',
        '+5': 'Git',
        '+1': 'Нативный JavaScript',
        '+6': 'DOM API',
        '+2': 'HTML и CSS',
    }
        
    for (let key in importanceOfSkillsJS) {
        console.log(`${+key}: ${importanceOfSkillsJS[key]}`)
    }
    
    // Результат
    // 4: Библиотеки
    // 3: Фреймворки
    // 7: Архитектура
    // 5: Git
    // 1: Нативный JavaScript
    // 6: DOM API
    // 2: HTML и CSS          
    

Если необходимо добавить или удалить свойство и получить значения уже из обновленного объекта следует производить все действия, до того, как цикл дойдет до этого свойства.

    
    const mySkillsJS = {
        'Native JavaScript': 'Да',
        React: 'Да',
        NodeJS: 'Да',
        JQuery: 'Нет',
        Angular: 'Нет',
    }
    mySkillsJS['DOM API'] = 'Да'
    mySkillsJS.Git = 'Да'
    for (let key in mySkillsJS) {
        console.log(`${key}: ${mySkillsJS[key]}`)
    }
    delete mySkillsJS.React
        
    // Результат
    // Native JavaScript: Да
    // React: Да
    // NodeJS: Да
    // JQuery: Нет
    // Angular: Нет
    // DOM API: Да
    // Git: Да        
    

В console видим DOM API: Да и Git: Да, а также React: Да, хотя удалили это свойство, но уже после цикла for…in

Как узнать количество свойств в объекте

Узнать количество свойств в объекте можно несколькими способами, в том числе и с помощью цикла for…in

    
    const popularBooksJS = {
        'Хавербеке Марейн': 'Выразительный JavaScript',
        'Кайл Симпсон': 'Вы не знаете JS',
        'Алексей Васильев': 'JavaScript в примерах и задачах',
        'Кэй Хорстман': 'Современный JavaScript для нетерпеливых',
    }
        
    let books = 0
    
    for (let key in popularBooksJS) {
        books++
    }
    
    console.log(books)
    

Более короткий способ это использовать метод Object.keys() запросив значение свойства length

    
    Object.keys(popularBooksJS).length
    

Итого

1. for…in предназначен для обхода перечисляемых свойств объекта.

2. На каждом шаге, цикл for…in предоставляет доступ до очередного имени свойства и его значения.

3. Порядок перебора четко не определен, поэтому для работы с массивами рекомендуется использовать for…of, а не for…in