What is duck typing in JavaScript?

Why does JavaScript think that this picture shows a duck typing and why should you care?

JavaScript thinks that this is a picture of a duck typing. No seriously, it does. And as far as we are concerned if JavaScript thinks that this is a picture of duck typing, we can also assume it to be a picture of a duck typing.

What do I mean by this? Well, duck typing means that if two or more unrelated objects respond to the same method name, they are all ducks. Even if they aren’t. But as far as JavaScript is concerned they are, and if JavaScript thinks they are all ducks and we get the desired output, they might as well all be ducks.

So with regards to the picture, as far as JavaScript is concerned if an object has and responds to a type method, it’s a duck.

Proof that a cat is really a duck

Let’s test that theory. In the following code block we have two classes, Duck and Cat. They are completely unrelated in any way. We then create two new objects on lines 11 and 12, duck which is an instance of Duck and cat which is an instance of Cat.

Notice that in our code block when we invoke the makeDucksType function on line 9 with possibleDuckImposter referencing the object duck,we get the intended result. Therefore duck is a duck. When we invoke the makeDucksType function with possibleDuckImposter referencing the object cat, we also get the intended result. Therefore both duck and cat are ducks.

Duck typing is an informal way of classifying objects that are not related to each other that respond to the same method name. Instead of saying ‘all these objects respond to method x, they must be of type y’, we say ‘all these objects respond to method x, they must be ducks.

If thinking of them both as ducks doesn’t make sense to you, you can also think of it in this way:

duck and cat are both objects. Both of them respond to the method type . Therefore as far as JavaScript is concerned both objects are of the same type. You can call this informal grouping of unrelated objects x, group, or even duck.

Making a dog quack

In this example for some reason, our programmer wants to make a dog quack. Maybe he’s making a game or just likes weird animals. Who am I to judge?

Look at the output on line 14 of our code block:

Javascript checks:

• Does the object referenced by possibleDuckImposter (duck) have a quack method? Yes. Must be a duck.

So it quacks.

Then JavaScript checks:

• Does the object referenced by possibleDuckImposter (dog) have a quack method? Yes. Must be a duck.

And so it quacks. Notice that even though Dog has a method called quack, it didn’t print ducks but instead printed dog emojis. This is still an example of duck typing as the method has the same name and it returns the desired result.

“If it walks like a duck and it quacks like a duck, then it must be a duck”. Or in this case, if it has a quack method it must be a duck. Obviously not literally, but JavaScript doesn’t know that.

So how can we actually use this concept in our code, assuming of course that we don’t just want to make dogs quack?

An actual useful example of duck typing

Take a look at the following code block. This code is adapted from code found in the Launch School forums, thanks, Pete! I’ll link the source at the end of the article.

We are calling forEach on an array that contains elements of two different types, a string and an array. Both elements get passed into the callback in turn and are in turn stored in or referenced by the parameter obj. Then the method indexOf checks if 'e' is found and returns the index. JavaScript doesn’t care that our elements have different types. It just cares about finding the index of 'e'.

Duck typing means we don’t have to explicitly declare types and we assume that the method will work the way we want it to.

What actually happens behind the scenes here is a little more complicated. When the value of obj is 'aeiou', JavaScript invokes String.prototype.indexOf, and when obj references the array ['a', 'e'] it invokes Array.prototype.indexOf.

So JavaScript checks:

• Does String.prototype have an indexOf method? Yes. Must be a duck.
• Does Array.prototype have an indexOf method? Yes. Must be a duck.

In both instances, we receive the desired outcome.

If you try to do this in a language that doesn’t support duck typing like C, it will throw a type error. In a language like C you can’t call methods for 2 or more objects within the same line of code unless the objects have a common superclass. — Pete

Let’s try and insert a third element to our array, this time a number.

This time we get a TypeError . Why? Javascript checks:

• Does Number.prototype have an indexOf method? No. Not a duck.

Summary

• The idea behind duck typing is that objects of unrelated types can respond to the same method name and therefore we can treat all the objects that respond to that method name as ducks, or more specifically, as belonging to a specific category of objects.
• We assume that each object’s method will respond correctly just as we assumed that indexOf would return the correct index when we called it on both a string and an array.
• It doesn’t matter to us that the implementation of the method is different in each case. It only matters that it gives us the outcome we expect.

Here is the promised link to the Launch School forum where I found the example, unfortunately, it will only work if you are a student at Launch School and have passed this point in the JavaScript track.