Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstalliTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
The bug in Bytes issue #77’s “Spot the Bug” exercise is that Animal is declared as an arrow function and then called with new. Arrow functions cannot be constructors, so new Animal('Leo', 'Lion') throws a TypeError before any instance is created. The fix shown in the issue is to declare Animal with the traditional function syntax.
Why the call to new fails
The exercise combines three pieces: a constructor that assigns properties through this, a method added to Animal.prototype, and an instance created with new. The first two are a standard pattern for building objects in JavaScript. The problem is that the constructor is an arrow function, and the MDN Web Docs reference for arrow function expressions is direct about it: “Arrow functions cannot be used as constructors and will throw an error when called with new.”
The three mismatches in the pattern
The failing new call is the immediate symptom, but the arrow function conflicts with the pattern in three separate ways:
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →- No constructor behavior. An arrow function cannot be the target of
new, so the runtime refuses to create an instance. - No own
this. An arrow function takesthisfrom the scope where it is defined. The issue states the point plainly: “Arrow functions don’t have their ownthis.” InsideAnimal,this.name = namewould not write to a new object. - No
prototypeproperty. Shared methods are attached toAnimal.prototype. Arrow functions do not have that property, so thebirthdaymethod has nowhere to live as a shared method for instances.
Any one of these would break the design. Together they mean the arrow function cannot play the role of a constructor at all.
#1 Best Overall
The corrected version
Replacing the arrow function with a function declaration fixes all three points. The corrected code from the issue is:
function Animal(name, type) {
this.name = name;
this.type = type;
this.age = 0;
}
Animal.prototype.birthday = function () {
this.age++;
};
const leo = new Animal('Leo', 'Lion');When new runs, JavaScript creates a new object, binds it as this inside Animal, and links it to Animal.prototype. Each instance then inherits birthday from the prototype instead of storing its own copy.
Rank #2
Arrow function versus constructor function
| Property of the function | Arrow function (const Animal = (...) => {}) |
Traditional function (function Animal() {}) |
|---|---|---|
Can be called with new |
No; throws a TypeError |
Yes |
Own this binding |
No; inherits this from the enclosing scope |
Yes; set to the new instance when called with new |
Has a prototype property |
No | Yes |
Suitable for Animal.prototype.birthday sharing |
No | Yes |
Checking the fix
- Open a browser console or run Node.js, and paste the corrected
Animalcode. - Run
const leo = new Animal('Leo', 'Lion');. It should return an object withname,type, andageset to 0. - Run
leo.birthday(); leo.age;. The result should be1. - To see the original failure, declare
const Animal = (name, type) => { ... };with the same body and runnew Animal('Leo', 'Lion'). The engine throws aTypeErrorstating thatAnimalis not a constructor.
About the issue
Bytes published “Spot the Bug” as issue #77 on December 6, 2021. Its answer section lists the same problems covered above: the arrow function’s missing own this, its inability to be used with new, and the missing prototype support. The language rules involved have not changed, so the explanation and the fix remain valid for current JavaScript engines.
Practical rule
Use a traditional function declaration or expression whenever a function is meant to be a constructor and share methods through its prototype. Arrow functions remain the better choice for callbacks and short functions that should keep the surrounding this, but they are the wrong tool for this kind of object construction. Modern class syntax, class Animal { ... }, is another way to write the same constructor and prototype pattern, and it also cannot be invoked without new.
Quick Recap
Rank #4
“
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
