Why is this for... in loop not working when trying to loop keys nested inside objects?

Question

I tried looping names of front-end developers nested inside of objects(refer to code) and when I printed it to console it says display is not defined.

var employees =
    {
        sales:  {
            manager: {
                name: 'Evan',
                gender: 'Male',
                age: 41,
                salary: 2000
            },
            sales_rep:  {
                name: 'Cilian',
                gender: 'Male',
                age: 24,
                slary: 1000
            },
            sales_executive:    {
                name: 'Joanna',
                gender: 'Female',
                age: 23,
                salary: 1000
            }

        },
        engineering:    {
            manager:    {
                name: 'Mike',
                gender: 'Male',
                age: 39,
                salary: 3000
            },
            designer:   {
                userExperience: {
                    name: 'Amy',
                    gender: 'Female',
                    age: 25,
                    salary: 1000
                },
                userInterface:  {
                    name: 'Jenna',
                    gender: 'Female',
                    age: 24,
                    salary: 1000
                }
            },
            developer:  {
                frontEndDeveloper:  {
                    name: 'John',
                    gender: 'Male',
                    age: 27,
                    salary: 2000
                },
                backEndDeveloper:   {
                    name: 'Felix',
                    gender: 'Male',
                    age: 28,
                    salary: 2000
                }
            }
        }
    
    }
;
var display;

for (let sector in employees) {
    display = `${sector}: ${employees.engineering.developer[sector].name}`;
}

First, I thought display scope was within the for loop so I moved display variable outside of the for loop. It's been like 4 days since I started learning JavaScript so I am very new to the concepts.

Answer 1

First of all, there is a concept about your "undefined" at "display" variable.

HOISTING (https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)

Otherwise, "console.log" executes faster than your loop so you get this "not declare".

In the other hand that's a bad example but I hope this could help to you as beginner.

Think about few things:

• How to implement it with "recursion"?
• Why is already printing manager name several times?

var employees =
    {
        sales:  {
            manager: {
                name: 'Evan',
                gender: 'Male',
                age: 41,
                salary: 2000
            },
            sales_rep:  {
                name: 'Cilian',
                gender: 'Male',
                age: 24,
                slary: 1000
            },
            sales_executive:    {
                name: 'Joanna',
                gender: 'Female',
                age: 23,
                salary: 1000
            }

        },
        engineering:    {
            manager:    {
                name: 'Mike',
                gender: 'Male',
                age: 39,
                salary: 3000
            },
            designer:   {
                userExperience: {
                    name: 'Amy',
                    gender: 'Female',
                    age: 25,
                    salary: 1000
                },
                userInterface:  {
                    name: 'Jenna',
                    gender: 'Female',
                    age: 24,
                    salary: 1000
                }
            },
            developer:  {
                frontEndDeveloper:  {
                    name: 'John',
                    gender: 'Male',
                    age: 27,
                    salary: 2000
                },
                backEndDeveloper:   {
                    name: 'Felix',
                    gender: 'Male',
                    age: 28,
                    salary: 2000
                }
            }
        }
    
    }
;


var display;

for (let sector in employees) {
    switch(sector){
      case "engineering":
        console.info('Sector: '+sector);
        //At this point, developer is a nested object too, so we have to iterate again.
        for (let category in employees[sector]) {
          let name = employees[sector][category].name;
          if(name) {
            display = `${sector} - ${category}: ${name}`;
            console.info(display)
          }
          for (let subcategory in employees[sector][category]) {
            let name = employees[sector][category][subcategory].name;
            if(name) {
              display = `${sector} - ${category} - ${subcategory}: ${name}`;
            }
            console.info(display)
          }
        }
        break;
      default:
        console.info('Actually isn\'t implemented ['+sector+']');
    }
}