5

Typos happen, and sometimes it is really hard to track them down in JavaScript. Take this for example (imagine it in between some more code):

// no error. I would like a warning
document.getElementById('out').innerHtml = "foo";

For undeclared variables, strict mode helps:

"use strict";
var myHTML = "foo";
myHtml = "bar"; // -> error

But it does not work for the example above. Is there a program or mode that can catch these bugs? I tried JSLint and JavaScript Lint, but they do not catch it.

And ideally, I would like this to still work (without warning):

// should work (without warning)
function MyClass(arg) {
  this.myField = arg;
}
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
tim
  • 1,999
  • 17
  • 32
  • 3
    I don't get why you would like a warning in your 1st example. What's the problem ? EDIT : Ok i got it – Larta Aug 04 '14 at 09:24
  • @Larta it doesn't work as it should be `innerHTML`. But this is hard to detect, as it looks a lot like `innerHtml`. – tim Aug 04 '14 at 09:26
  • 1
    It does not seems to be possible to hook up that sort of errors without any dirty code. I mean, you can define setter / getter for certain property, but not for all. You would have to either make an array of all the possible typos, then check if they are set (with __defineSetter__()) OR create a super class, wrapping the Object class. Then you would have functions called 'set' and 'get', wich you would call everytime you have to access a property. And thoses functions would check if the property exists (and tell you when not). But that would make problems for obj you don't create yourself. – Larta Aug 04 '14 at 09:42
  • 1
    Please distinguish between *variables* (those `var` things declared in a scope) and *properties* (attributes of an object). However, since there's no way to declare properties (unless you use TypeScript or so) this seems hardly possible. – Bergi Aug 04 '14 at 11:41
  • 1
    One thing that can help is working in an IDE or other editor that can autocomplete property names (such as the JavaScript console in most browsers). Of course, this may not work for cases like your first example, because the IDE may not be smart enough to know what kind of an object `document.getElementById()` is going to return. OTOH, if you've already saved the element in a variable `elem`, at least Firefox JS console (just tested it) is smart enough to suggest `elem.innerHTML` when you type `elem.inn`. – Ilmari Karonen Aug 04 '14 at 11:55

2 Answers2

1

Well, thats the price of dynamically typed programming languages. because it is possible to add properties at runtime, there is no real solution to detect typos in code.

you could however add an innerHtml function to the Element prototype, internally calling innerHTML to eliminate certain typos, but I definately wouldn't recommend that.

As other comments already suggested: A good IDE can help you identifiying typos. I'm only working with WebStorm and VisualStudio which both are able to detect undeclared or unused functions.

Sabacc
  • 789
  • 6
  • 13
1

Using an IDE like WebStorm helps a lot in detecting this kind of errors.

To prevent accidentally adding properties to an object, you can freeze it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

With ES6, you could use proxies to detect these errors: http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/

Jos de Jong
  • 6,602
  • 3
  • 38
  • 58
  • `freeze` not only prevents me from adding properties, but also from changing existing properties. `seal` on the other hand seems to be close to what I'm looking for. It doesn't work on dom objects though. – tim Aug 04 '14 at 12:39
  • using an IDE is also a good idea. I tried NetBeans (because it's free), and it does auto-complete which can prevent these errors. But it cannot detect them in already existing code. – tim Aug 04 '14 at 13:10
  • Give WebStorm a try. You will be blown away ;) – Jos de Jong Aug 04 '14 at 13:11