Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Other Discussions
  3. The Weird and The Wonderful
  4. Here's a specific reason devs hate JavaScript!

Here's a specific reason devs hate JavaScript!

Scheduled Pinned Locked Moved The Weird and The Wonderful
javascripthtmlcssgame-devcollaboration
55 Posts 29 Posters 7 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    raddevus
    wrote on last edited by
    #1

    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 an

    Sander RosselS R P R M 19 Replies Last reply
    0
    • R raddevus

      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 an

      Sander RosselS Offline
      Sander RosselS Offline
      Sander Rossel
      wrote on last edited by
      #2

      'options strict'; Sounds like the only thing terrible in your story is the programmer :laugh: But seriously, it's pretty terrible.

      Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly

      R 3 Replies Last reply
      0
      • Sander RosselS Sander Rossel

        'options strict'; Sounds like the only thing terrible in your story is the programmer :laugh: But seriously, it's pretty terrible.

        Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly

        R Offline
        R Offline
        raddevus
        wrote on last edited by
        #3

        Yeah, I was bad. But, JavaScript was terrible too. :rolleyes: I think the odd error "room is not a constructor" was terrible too.

        1 Reply Last reply
        0
        • Sander RosselS Sander Rossel

          'options strict'; Sounds like the only thing terrible in your story is the programmer :laugh: But seriously, it's pretty terrible.

          Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly

          R Offline
          R Offline
          raddevus
          wrote on last edited by
          #4

          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? :laugh: 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. :)

          Sander RosselS D 2 Replies Last reply
          0
          • R raddevus

            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 an

            R Offline
            R Offline
            RickZeeland
            wrote on last edited by
            #5

            Enfant terrible :-\

            R 1 Reply Last reply
            0
            • Sander RosselS Sander Rossel

              'options strict'; Sounds like the only thing terrible in your story is the programmer :laugh: But seriously, it's pretty terrible.

              Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly

              R Offline
              R Offline
              raddevus
              wrote on last edited by
              #6

              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!! :rolleyes:

              J 1 Reply Last reply
              0
              • R RickZeeland

                Enfant terrible :-\

                R Offline
                R Offline
                raddevus
                wrote on last edited by
                #7

                is this the defintion you meant? :rolleyes:

                merriam-webster said:

                : a usually young and successful person who is strikingly unorthodox, innovative, or avant-garde

                R 1 Reply Last reply
                0
                • R raddevus

                  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 an

                  P Offline
                  P Offline
                  Pete OHanlon
                  wrote on last edited by
                  #8

                  There are many reasons I love TypeScript. This is just one example.

                  This space for rent

                  R J 2 Replies Last reply
                  0
                  • P Pete OHanlon

                    There are many reasons I love TypeScript. This is just one example.

                    This space for rent

                    R Offline
                    R Offline
                    raddevus
                    wrote on last edited by
                    #9

                    Pete O'Hanlon wrote:

                    There are many reasons I love TypeScript. This is just one example.

                    :thumbsup: 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.

                    1 Reply Last reply
                    0
                    • P Pete OHanlon

                      There are many reasons I love TypeScript. This is just one example.

                      This space for rent

                      J Offline
                      J Offline
                      Jon McKee
                      wrote on last edited by
                      #10

                      "compilerOptions": {
                      "strict": true
                      }

                      Always. :thumbsup:

                      1 Reply Last reply
                      0
                      • R raddevus

                        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 an

                        R Offline
                        R Offline
                        Ryan Peden
                        wrote on last edited by
                        #11

                        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! :laugh: 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. :)

                        R 1 Reply Last reply
                        0
                        • R raddevus

                          is this the defintion you meant? :rolleyes:

                          merriam-webster said:

                          : a usually young and successful person who is strikingly unorthodox, innovative, or avant-garde

                          R Offline
                          R Offline
                          RickZeeland
                          wrote on last edited by
                          #12

                          That's you :-\

                          1 Reply Last reply
                          0
                          • R raddevus

                            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 an

                            M Offline
                            M Offline
                            Member 9167057
                            wrote on last edited by
                            #13

                            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.

                            R M 2 Replies Last reply
                            0
                            • R raddevus

                              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 an

                              J Offline
                              J Offline
                              Jeroen_R
                              wrote on last edited by
                              #14

                              This is just a tooling problem. When writing Javascript, you always use a linter. (Even when writing Typescript, you can use Tslint) Also: don't use var anymore, use const or let. And use a transpiler if you need to support old IE versions.

                              R 1 Reply Last reply
                              0
                              • R raddevus

                                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!! :rolleyes:

                                J Offline
                                J Offline
                                jsc42
                                wrote on last edited by
                                #15

                                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.

                                R M 2 Replies Last reply
                                0
                                • R raddevus

                                  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? :laugh: 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. :)

                                  Sander RosselS Offline
                                  Sander RosselS Offline
                                  Sander Rossel
                                  wrote on last edited by
                                  #16

                                  Oops... Option Strict is indeed a remnant from my VB days... :-O

                                  Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly

                                  R 1 Reply Last reply
                                  0
                                  • R raddevus

                                    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 an

                                    V Offline
                                    V Offline
                                    V 0
                                    wrote on last edited by
                                    #17

                                    raddevus wrote:

                                    It's only 1000 lines of code. (That's like 4 printed pages. Not bad.)

                                    Only if you have VERY good eyes, because it would be printed in ... Courier New point 2 ;P I'm guessing you actually mean 20 printed pages in Courier New point 9 (which is also not bad) :-\

                                    V.

                                    R 1 Reply Last reply
                                    0
                                    • R raddevus

                                      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 an

                                      J Offline
                                      J Offline
                                      jarvisa
                                      wrote on last edited by
                                      #18

                                      raddevus wrote:

                                      new room({location:i}) just sends in a json object which is used to initialize the object.

                                      ‘{location:i}’ is Javascript syntax for defining an object. JSON is a format for persisting Javascript objects as text.

                                      R 1 Reply Last reply
                                      0
                                      • R raddevus

                                        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 an

                                        C Offline
                                        C Offline
                                        ClockMeister
                                        wrote on last edited by
                                        #19

                                        A poor craftsman blames his tools. Javascript (or any language) is as good or bad as the developer using it. You can paint yourself in a corner using any language the only difference is the color of the paint! Sorry guys, but tell me that ain't the truth. ;-)

                                        If you think hiring a professional is expensive, wait until you hire an amateur! - Red Adair

                                        R J 2 Replies Last reply
                                        0
                                        • R Ryan Peden

                                          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! :laugh: 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. :)

                                          R Offline
                                          R Offline
                                          raddevus
                                          wrote on last edited by
                                          #20

                                          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.

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • World
                                          • Users
                                          • Groups