Javascript: Expected result. React: "Unexpected use of 'name' no-restricted-globals" - reactjs

Question

I should preface this by saying that I know next to nothing about the difference between the project I started using npx create-react-app and the project I started using touch app.js touch app.html.
I have the following code:
var departments = {
id0: "Networking",
id1: "Video",
id2: "Desktop PCs",
}
departments.list = function () {
var output = "";
for (name in departments) {
if (typeof departments[name] == 'string') {
output=output+departments[name].valueOf()+", ";
}
}
return(output);
}
When I create a 'dumb' javascript app using the above-mentioned touch approach, invoking departments.list() returns Networking, Video, Desktop PCs, as I would expect. However, pasting this exact code into an unenclosed section of my App.js file created by npx create-react-app yields the compiler error Unexpected use of 'name' no-restricted-globals on each line containing the word name.
I was under the impression that any Javascript expressions are valid in React, as React is strictly a superset of Javascript? Why does this happen? Am I wrong?
I also recognize that I'm working with a lot of systems that I don't understand, but I don't even understand them well enough to start researching them yet. Npx, npm, webpack, nodejs and their relationships to Javascript and React are all mysterious to me.

Answer 1

You need the let keyword before your name variable.
for (let name in departments) {
...
}
When you assign to an undeclared variable in JavaScript, it manipulates the global scope. If you're using strict mode, trying to assign to a undeclared variable throws an error.
More info here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode#New_runtime_errors