26

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?

3 Answers 3

38

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.

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

2 Comments

functions are the only way to introduce new scope in JavaScript except for with, eval and Function(), which all modify scope.
In ES6, if/for blocks can introduce new scope, as can classes. Anyway, I think "shadow" is (much) better than "overshadow". The relevant definition is not "to cast shadow on/darken", but rather "follow (in someone's shadow)".
10

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.

3 Comments

+1 It is just shadowing (term is used in C, Scala, Java, etc. dunno what lingo in Lisp-land is), although clobbering may feel more appropriate at times. It it not overloading.
@pst I'd say definitely if redefining parseInt() :)
clobbering ("overwriting its contents") would imply that you changed the value of the variable in the outer scope, so I don't believe this makes sense in this context.
4

More commonly called "shadowing".

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.