Why can't I access array inside forEach() in javascript

Question

I'm not sure why i can't access the allSubIABs array inside forEach. I can access the string newCheckState fine.

const newIABs = { ...this.state.iabs }
let allSubIABs = []
let newCheckState = 'asdasdasd'

console.log(typeof allSubIABs, allSubIABs)
Object.keys(newIABs).forEach(firstLevelIABCode => {
  console.log(newCheckState)
  console.log(typeof allSubIABs, allSubIABs)
  let allSubIABs = allSubIABs.concat(newIABs[firstLevelIABCode].children)
})

Output:

object []
asdasdasd
undefined undefined
Uncaught TypeError: Cannot read property 'concat' of undefined

What do you get from console.log( newIABS ) or console.log( Object.keys( newIABS ) )? I'm asking only because I've never seen the spread operator used to create an Object, only to populate an Array. — David Thomas
– David Thomas, Commented Nov 13, 2017 at 16:36
I'm actually going to mutate it later on in the code, thanks all for answering this dumb question I had lol. — Jason Feng
– Jason Feng, Commented Nov 13, 2017 at 16:49

Pointy · Accepted Answer · 2017-11-13 16:37:33Z

3

Your problem is that the let declaration in the callback hides the outer allSubIABs declaration. Just get rid of that let.

answered Nov 13, 2017 at 16:37

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

roobeedeedada Over a year ago

Worth explaining what's happening here. I.e., the fact that, even though allSubIABs is referenced in the 2nd console.log within the forEach callback, it's re-declared in the line below that. JavaScript will hoist the declaration to the top of the scope, which effectively "resets" the value of that variable.

apsillers · Accepted Answer · 2017-11-13 16:56:31Z

Your let allSubIABs declaration declares a new variable whose default value is undefined, and this new variable shadows access to the outer allSubIABs with the same name.

You can see how hoisting affects your function. This code is equivalent to your own:

Object.keys(newIABs).forEach(firstLevelIABCode => {
  let allSubIABs;

  console.log(newCheckState)
  console.log(typeof allSubIABs, allSubIABs)
  allSubIABs = allSubIABs.concat(newIABs[firstLevelIABCode].children)
})

As you can see, variable declarations happen first (this is what "hoisting" means) and newly-declared variables hold the value undefined until assigned a value.

Consider analogously var a = a.foo; which produces the error Cannot read property 'foo' of undefined because a does exists as a variable, but it has never been given a value.

Since you actually want to access the outer allSubIABs variable, do not declare a new variable with let. This will cause allSubIABs variable tokens to refer to the nearest outer-scope variable of that name, which is what you want.

Collectives™ on Stack Overflow

Why can't I access array inside forEach() in javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related