Variable shadowing in JavaScript

Question

Below we have an IIFE which (like any function) creates a local scope. Inside that scope there is a parseInt function. Now, since there already is a global function in the browser with that name, the local function will overshadow the global parseInt function - inside the IIFE any call to parseInt will call the local function, and not the global one. (The global function can still be referenced with window.parseInt.)

parseInt('123', 10); // the browser function is called

(function() {

    function parseInt() { return 'overshadowed'; }

    parseInt('123', 10); // the local function is called

})();

parseInt('123', 10); // the browser function is called

Is there a de jure (ECMAScript spec) or de facto (common) name for this? Overshadowing? Overloading?

Answer 1

The correct term is [Variable] Shadowing

In computer programming, variable shadowing occurs when a variable declared within a certain scope (decision block, method, or inner class) has the same name as a variable declared in an outer scope. This outer variable is said to be shadowed...

Functions in JavaScript are just function-objects stored within variables (or properties) that follow the same scope-chain/resolution rules as normal variables (or properties). This explains why the original can still be accessed as window.parseInt as well. It is the "IIFE" which introduces this new scope (functions are the only way to introduce new scope in JavaScript).

However, the ECMAScript Specification [5th Edition] does not use the term shadowing, nor can I find a specific replacement term. (The fundamental shadowing behavior is defined in "10.2.2.1 GetIdentifierReference" and related sections.)

It is not overloading and it is not overriding, which are entirely different. I have no idea where overshadowing (in this context) originated or how it is supposed to differ from "normal" [variable] shadowing. If the term shadowing didn't already exist to explain this behavior then -- from an English language viewpoint anyway -- overshadowing ("to make insignificant/inconsequential") might be more appropriate than shadowing ("to cast shadow on/darken").

Happy coding.

Answer 2

If it happened by accident/mistake, you would call it clobbering the original parseInt().

Otherwise, I believe I saw it referred to shadowing recently here on Stack Overflow.

Answer 3

More commonly called "shadowing".