CODEWITHSUNDEEP
javascriptecmascript-6overridingterminologyshadowing
lindsaymacvean
lindsaymacvean

Reputation: 4537

Why do we use the term shadow instead of override in Javascript?

I think I know the answer to this before I begin but after a number of searches on Google along these lines I could not find a definitive answer.

This question assumes we are using the class pattern in Ecmascript 6 and beyond.

My initial belief was that method overriding

in object-oriented programming, is a language feature that allows a subclass or child class to provide a specific implementation of a method that is already provided by one of its superclasses or parent classes. Wikipedia

Method Shadowing (more than just block scope 'variable shadowing'- Wikipedia) on the other hand only seemed to make sense in the context of a strongly typed language like C# that would allow you to set an instance of a 'child class' as type 'base class' which would mean that the the instance reverts back to the base classes methods instead of any 'shadowed' methods.

public abstract class BaseClass
{
    public virtual void shadowedMethod()
    {
        Console.WriteLine("This is the BaseClass version");
    }
}
public class DerivedClass : BaseClass
{
    public new void shadowedMethod()
    {
        Console.WriteLine("This is the Derived child class");
    }
}
public class Program
{
    public static void Main()
    {
        BaseClass instance = new DerivedClass(); // Because BaseClass type is set instead of DerivedClass
        instance.shadowedMethod(); // It prints "This is the BaseClass version"
    }
}

Code adapted from this article

So the question is: why do most JS threads and documentationECMA Standard use override and shadow interchangeably (but tend to favour shadow)? should we not just have used one term to stop confusion? Is there actually a subtle difference in Javascript between overriding and shadowing a method?

Upvotes: 1

Views: 417

Answers (1)

lindsaymacvean
lindsaymacvean

Reputation: 4537

I struggled to find clear definitions in the context of Javascript. So this is my best attempt at answering my own question.

It would appear that all methods with the same name in the derived class (as the base class) are 'shadowed methods', and a subset of methods that accept the same parameters (and therefore create the same interface) are also 'overridden' methods because "Overridden members must accept the same data type and number of arguments". (see this article)

A method on a derived class overrides the parent/base class if it uses the same signature (accepts the same parameters):

class BaseClass {
  overriddenMethod(a) {
    return a;
  }
}

class DerivedClass {
  overriddenMethod(a) {
    return 2*a;
  }
}

But it is just 'shadowing' if the derived class method accepts different parameters:

class BaseClass {
  overriddenMethod(a) {
    return a;
  }
}

class DerivedClass {
  overriddenMethod(a, b) { // This is not overriding because it accepts different parameters.
    return a + b;
  }
}

In more detail, it is 'shadowed' because Javascript is a prototypal language, meaning everything is an object (even Class definitions) and so everything is ultimately a variable on an object and is therefore 'variable shadowing' a variable on the outerscope further up the prototype chain.

Upvotes: 0

Related Questions