When defining a function in JavaScript, what is the effect of naming the function with the same name as a global variable?

When you define a function in JavaScript with the same name as a global variable, the function definition creates a new local scope for that name. Consequently, the global variable with the same name is effectively overridden within that local scope. This means that whenever you reference the name within the function, you are referring to the function itself rather than the global variable.

While the global variable still exists outside of the function, inside the function, the local scope takes precedence. After the function is defined, if you attempt to refer to the variable by name within the function, you access the function and not the global variable, as the function definition shadows the global variable.

Understanding this behavior is essential for managing scope effectively in JavaScript, particularly when dealing with functions and variable naming. It illustrates how JavaScript handles naming conflicts by defaulting to the most local context available, which is useful for avoiding unintended interactions with global variables.