Why env is undefined in this function?

Question

Here is a javascript file (named env.js ) that contains some environment configuration:

module.exports = {
  "environment": {},
  "mixpanel": {},
  "google": {
    "app-id": "abc"
  },
}

I tried to import and use it this way in another javascript written in es6:

import env from '../env';

console.log(env)

In the dev console, I can see the values have been printed as expected:

Now I want to unpack the object in a function:

const buildArray = () => {

  const entries = [];

  for (let key of env) {
    for (let subkey of env[key]) {
      console.log (env[key][subkey])
    }
  }

  return entries;
};

Then I got this error:

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2__env___default.a[Symbol.iterator] is not a function

when I comes to the line for (let key of env)

If I pause in dev console before this and try to inspect env in there, I got this error

Uncaught ReferenceError: env is not defined

But if I introduce the env as a parameter to the function, the error went away ie

const buildArray = (env) => {

Why it is the case? Shouldn't env visible in a global scope?

Answer 1

Key of Object doesn't work. It should be instead Key in Object

of keyword is used in arrays

let a = [1,2,3,4]
for (let item of a) { console.log(item)} // 1 2 3 4 

in keyword is for objects (including array)

let a = [1,2,3,4]
for (let item in a) { console.log(item)} // 0 1 2 3 (the indexes)

let obj = {a:1, b:2}
for (let key in obj) {console.log (key)} // a b