|
I'm working on a prototype for a friend.
We're attempting to turn a leadership exercise / game into an automated thing.
Basically you have 5 people who each take a character type (barbarian, elf, thief, wizard or leader) and attempt to make it through a 36 room dungeon.
It's currently played on posterboard with some real tokens so we are keeping it very simple.
"I could write that up for you as an HTML5 Canvas game," said I.
And so it began.
I draw a grid of 6x6 (36 rooms).
I put in the obstacles users cannot see.
I allow them to move their tokens.
Things are going along swimmingly in JavaScript and I'm generating functionality quickly.
It's only 1000 lines of code. (That's like 4 printed pages. Not bad.)
Suddenly I have this bug. It's on line 238 and tells me "room does not have a constructor" and it only occurs if I move a token and then restart the game. What!?!
It looks like the following:
gameVars.allRooms.push(new room({location:i}));
Line 238 has not changed in many iterations (I'm using Git so I can tell).
new room({location:i}) just sends in a json object which is used to initialize the object.
It's quite simple.
But finding the bug is very difficult. After hours of picking it apart line-by-line I find a line of code I suspect that is down in another function and shouldn't affect anything.
It's way down on line 756 and the compiler has never said anything about it:
function playerMovementHandler(playerTokenIdx){
var output = document.getElementById("output");
var currentPlayer = gameVars.allPlayers[playerTokenIdx];
room = hitTestRoom(currentPlayer,gameVars.allRooms);
Do you see that? I accidentally didn't type var.
Sure it seems obvious now.
If I had named that room variable anything else (different from the name of the function/class) it wouldn't have ever hurt me either. But, but, but... JavaScript compiler why couldn't you have mentioned it? Maybe if I'd had strict enabled or something. It's me shooting myself in the foot, I know.
Here's The Terrible Explanation
But the deal is that in this case the JavaScript compiler was redefining my room class (which are functions in JavaScript) using the hitTestRoom() function instead of just calling the hitTestRoom() function and returning the room object.
So, when I would restart the game after moving a game token the code would return to the top with the room class redefined and when it did it would hit line 238 and say, "there's no constructor for that object". Oy! 
It's so terrible that it tried to think for me. It's so terrible that it didn't give me a compiler warning for redefining the room class.
It's so terrible that I didn't type var there.
It's so terrible that in my prototype I used the same name variable as the name (room) of my function and so it was easier for JavaScript to redefine my original function to be something else.
It's so terrible that nothing pointed to this line of code and I had to sift through it line by line.
But, I guess I'm a better dev for it.
What don't kill you makes you stronger, right? Right?
As soon as I prefixed that item with var the problem was solved.
I know it seems stupid in retrospect, but again this is just a prototype.
|
|
|
|
|
'options strict';
Sounds like the only thing terrible in your story is the programmer 
But seriously, it's pretty terrible.
|
|
|
|
|
Yeah, I was bad. But, JavaScript was terrible too. 
I think the odd error "room is not a constructor" was terrible too.
|
|
|
|
|
Sander Rossel wrote: 'options strict';
Doh!
I just tried your 'options strict'; at the top and I set the bad code back (removed var) and it didn't do anything.
Same error
"room is not a constructor"
Oh, it looks like options strict is a Visual Basic thing. You've outed yourself! You're a VB Dev aren't you?
So I looked it up and found this:
JavaScript "use strict"[^]
I added "use strict";
and now it gives me warnings about undefined items.
I think it has changed. 
modified 8-Jan-19 16:38pm.
|
|
|
|
|
Oops... Option Strict is indeed a remnant from my VB days... 
|
|
|
|
|
Sander Rossel wrote: Oops... Option Strict is indeed a remnant from my VB days..
That's funny. Don't tell, but I've got VB 1.x then 4.x,5.x,6.x in my background too. Shhhh....
|
|
|
|
|
Same here, but I must confess. I still have VB 6.0 in a VM at home. I keep it for nostalgia reasons. Back in the 90's, I had several award winning pieces of software. Still have the code and can still make changes. 
When you are dead, you won't even know that you are dead. It's a pain only felt by others.
Same thing when you are stupid.
modified 19-Nov-21 21:01pm.
|
|
|
|
|
The Visual Basic instruction is Option Explicit. Other environments, e. g., Perl, have use strict; that invokes a package. There might be something like that in Typescript, but I am unaware of anything along those lines for Javascript. On the other hand, I use JS as infrequently as possible, for all the reasons you said, and many others.
If you're serious about JS, you really need a good linter and a robust set of rules to guide it, not to mention a decent visual debugger. When necessity requires it, I lean heavily on the Chrome Dev Tools.
David A. Gray
Delivering Solutions for the Ages, One Problem at a Time
Interpreting the Fundamental Principle of Tabular Reporting
|
|
|
|
|
Also, come to find out, "use strict"; does not solve this anyways, because it thinks room is already defined as a function. Yes, it was silly of me to name my local var the same as the name of the function but that's another issue.
Use strict only tells you about things that are not defined. Of course room is defined as a function. Interesting.
So adding "use sctrict" does not solve this problem. Isn't that interesting?
There are many ways to shoot yourself in the foot and JavaScript is a machine gun!! 
|
|
|
|
|
A convention in JS (and it is just a convention, I do not know if JSLint checks for it) is to name functions that are used as constructors with names starting with a capital letter and functions not used as constructors with names starting with lowercase letters (or $ or _). So, if you had used that convention, you would have written 'new Room()' and you would have been safe.
|
|
|
|
|
jsc42 wrote: A convention in JS (and it is just a convention, I do not know if JSLint checks for it) is to name functions that are used as constructors with names starting with a capital letter and functions not used as constructors with names starting with lowercase letters
A fantastic convention that is spot on for this problem. I really do try to follow conventions like that too, so I don't shoot myself in the foot, but alas, I am as lazy as anyone else who types code.
I'm definitely a slacker.
ala Marty McFly and Back To the Future[^] 
It's a great point and I will incorporate that convention into my JS even when I'm typing fast. 
|
|
|
|
|
As with all conventions, there are many: Where I work, we use _ to designate private stuff, and $ to designate DOM objects...
|
|
|
|
|
We use $nameGoesHere to indicate jQuery objects rather than just simple variables.
- I would love to change the world, but they won’t give me the source code.
|
|
|
|
|
Enfant terrible
|
|
|
|
|
is this the defintion you meant?
merriam-webster said: : a usually young and successful person who is strikingly unorthodox, innovative, or avant-garde
|
|
|
|
|
That's you
|
|
|
|
|
There are many reasons I love TypeScript. This is just one example.
This space for rent
|
|
|
|
|
Pete O'Hanlon wrote: There are many reasons I love TypeScript. This is just one example.
That is the perfect reply to this whole situation.
When I got stuck I was griping at myself for not using typsescript on this project.
|
|
|
|
|
"compilerOptions": {
"strict": true
}
Always.
|
|
|
|
|
Others have mentioned TypeScript, but to catch an error like this, you don't even need to go that far.
Set up ESLint with a good rule set (I like the one from Walmart Labs), and it'll scream at you if you forget to use var. Actually, with that rule set, it'll probably scream at you if you use var at all instead of let, and it'll scream at you again if you used let when you could have used const. It's a tad annoying at first, but it quickly drills good habits into you.
I love TypeScript too, but I find that sometimes, I just prefer to work in dynamically typed JavaScript over TypeScript - and when I do, ESLint helps me catch errors caused by typos and omissions. You'll need to use an editor that supports ESLint, but most of them do.
As for why the JS interpreter didn't catch this for you: you gave it syntactically valid code, and it just did what you asked it to! I know that's an annoying answer, but with JavaScript approaching its 25th birthday, it has lots of historical baggage and bits of the language that are probably best avoided. Hence my love of ESLint - it's a friendly pedant that reminds when when you step out of bounds.
TypeScript is also great, of course. And you can use TSLint too, to ensure your TypeScript code is as pedantically great as possible.
|
|
|
|
|
Ryan Peden wrote: Set up ESLint with a good rule set
That's a great idea. I will definitely look into it. Great post. Thanks.
|
|
|
|
|
It's not just JS, there's other languages where the compiler just chugs along trying to make sense of whatever code is there. VB isn't much better (although option strict and option explicit help). Or what about C? Ever had a nonsensical (it seems) error 14 lines later than where you made the mistake? And that's supposed to be THE system language on the planet.
|
|
|
|
|
Member 9167057 wrote: It's not just JS, there's other languages where the compiler just chugs along
Yeah, it's true. It's just this re-definition thing really leaves a mark.
Plus I'm very spoiled by VStudio and C#. It's quite good actually.
|
|
|
|
|
At my first employer as a very junior software engineer (though we called ourselves programmers back then - early 1990s), we used a variant of the PICK operating system called UniVERSE that ran on AIX.
Our code was mainly in PICK BASIC, which was a "business BASIC" variant.
With the version we were using, we'd sometimes run into bugs that would throw an error at runtime, but when you'd run it in the debugger (which was a nice step-wise debugger, with tons of nice features for the time), it would pass right by the line with the supposed error, and work just fine.
Then you'd exit the debugger, run the same piece of code - and it would work perfectly!
Think about that - it was a literal debugger!
Even so, it was hella annoying...
|
|
|
|
|
The heisenbug, a bug disappearing when being looked at. My own experience with such bugs boils down to mostly 2 situations:
1. Timing conditions, the debugger (by principle) slows code down. Solution: Introduce a Sleep(300).
2. Code design to behave differently under a debugger. I remember inheriting a piece of code written like that, cursing loud enough to get asked WTF is going on my several colleagues, throwing this piece of trash away and reimplementing the same functionality anew.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
