即使变量在 IF 语句中，ESLint 也会抛出 no-undef

Question

I am using React and I am not able to build my application as long as I have undefined variable. I am using that variable only in IF statement (if it's defined, use it).

if (something)
   const newItem = 'wow!';

if (typeof newItem === "undefined")
    console.log('newItem undefined')   
else
    console.log(newItem); //ESLint: Line YY:XX: 'newItem' is not defined  no-undef  

How can I avoid this behavior?

Answer 1

An if statement creates a lexical scope. In fact, any time you see {} in javascript, that creates a scope. What that means is that variables declared with let or const in that scope cannot be accessed outside of that scope.

if (something) {
   const newItem = 'wow!';
   // newItem exists here
}
// newItem does not exist here

What you want to do is declare the variable in the scope where you want to access it, and then just assign to that variable in your if statement:

let newItem;
if (something) {
    newItem = 'wow!';
}
// newItem exists here, and has a value of either 'wow!' or undefined.

Note that I had to change the variable declaration from const to let because we need to assign a value to the value after its creation, so it can no longer be a constant.