Writing ECMAScript5 compliant code

Question

I want to build a library in JavaScript/JScript/ECMAScript...whatever you want to call it, which will target modern standards (HTML5, CSS3, ESv5) with that in mind, any browser that supports the standard! Now I know there are already plenty of useful libraries out there, i.e. jQuery and MooTools. Of course they're great and I already use those where necessary, but I should not be forced to jump on the same bandwagon as every other developer just because it's popular!

So for the sake of the following questions, let us not concern ourselves with 3rd party libraries such as jQuery and MooTools. Lets get down to nitty-gritty JavaScript/JScript/ECMAScript.

Firstly, I asked a question prior to this (What's the difference between JavaScript, JScript & ECMAScript?), as I did not know what the difference was.

Thankfully I concluded the following:

ECMAScript is the language specification. JavaScript and JScript are dialects of ECMAScript.

JavaScript is Mozilla's implementation of ECMAScript.

JScript is Microsoft's implementation of ECMAScript.

OK, that was a nice simple answer wasn't it? But here's some questions which stem from that:

is "JavaScript" supported in non-mozilla browsers, and to what extent?
is "JScript" supported in non-microsoft browsers, and to what extent?

Based on those two questions, I did a little digging and ran a simple test on IE9, FF14 and GC19.

Here is the test code:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML 5 Template</title>
        <script language="JavaScript1.3">
            jsver = "1.3";
        </script>
        <script language="JavaScript1.4">
            jsver = "1.4";
        </script>
        <script language="JavaScript1.5">
            jsver = "1.5";
        </script>
        <script language="JavaScript1.6">
            jsver = "1.6";
        </script>
        <script language="JavaScript1.7">
            jsver = "1.7";
        </script>
        <script language="JavaScript1.8">
            jsver = "1.8";
        </script>
        <script type="text/javascript">
            document.write("<B>Your browser supports JavaScript version " + jsver + ".</B>")
        </script>
    </head>
    <body>
    </body>
</html>

The results were: IE9 = JSv1.3, FF14 = JSv1.8, GC19 = JSv1.7

OK, then I ran this test, which tests for ECMAScript version 5 support: http://kangax.github.com/es5-compat-table/#showold

Again using the same browsers (IE9, FF14, GC19), ESv5 seems to be fairly well supported!

Now comes the tricky bit! I come from a Microsoft background, and write software using languages like C#, ASP.NET etc, so naturally, my IDE of choice is Visual Studio (currently 2010). When I look through the JavaScript intellisense I see things like ActiveXObject, Array, Object, etc.

Should I trust VS2010's intellisense?
Where can I find a reference of ESv5 supported objects and features?
How do I detect if a browser supports a particular object or feature?
Is there anything better than VS2010 out there that will help me write compliant ESv5 code?
Is it safe to override implementations of existing objects like Object, Number, Boolean etc, or should I just extend the existing implementation?

Finally, concerning myself with jQuery. Let's say I can't be bothered to write the core compliancy & functionality myself, can I just write my library to sit on top of jQuery...or is this just a copout?

Is that a question or a story ? Please try to keep it simple and to make clear what is the (unique) technical question you're asking us to answer. — Denys Séguret, Aug 21 '12 at 11:31
@dystroy I quite like the extent into which the author has gone in order to get the exact answers he's looking for... people should not be forced to write 2-line questions, especially for one as enlightening question as this one — Zathrus Writer, Aug 21 '12 at 11:35
There's plenty of questions in there. I just wanted people to know my research, as they may suggest something I have already done. I guess it's sort of difficult as I'm guessing some of these questions are open to opinion as opposed to fact. — Matthew Layton, Aug 21 '12 at 11:36
I take your points. And there clearly were good efforts in this question. But please have a look at [the faq on open ended questions](http://stackoverflow.com/faq#dontask) and ask yourself if it's possible to make a clear answer. — Denys Séguret, Aug 21 '12 at 11:45

score 1 · Accepted Answer · answered Aug 21 '12 at 12:13

1) Nope. Certainly it won’t restrict to just valid ECMAScript.

2) http://kangax.github.com/es5-compat-table/ is always useful.

3) You can just check to see if it’s defined. E.g.

typeof(Array.isArray) === 'function'; // true in newer browsers, false in IE8

4) Your best bet is to read the spec! Using "use strict"; in your code will also catch some classes of errors and it good practise. More explanation on strict mode at http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

5) Certainly I wouldn’t replace the original objects. If you’re going to extend properties I’d first double-check that a compliant implementation doesn’t already exist. E.g. PrototypeJS added (before browsers implemented it) a document.getElementsByClassName. When browsers started implementing it natively they found out that sites using Prototype were still using the slow JS-based version. The fix was just to wrap Prototype’s definition in a if (document.getElementsByClassName == undefined) { }

Thank you for this answer, it is very informative, and will certainly help me write my library. — Matthew Layton, Aug 21 '12 at 12:43
Have you looked at Modernizr? They’re focused on display issues of course, but at their core they do a bunch of feature testing. Might give you some ideas. http://modernizr.com & https://github.com/Modernizr/Modernizr/tree/master/feature-detects — Robin Whittleton, Aug 21 '12 at 12:49

score 1 · Answer 2 · edited Dec 06 '12 at 12:52

2) I find the Overview you provided pretty good. What else do you want?

3) A good library to even out the differences between the browser is ES5-shim. It autodetects the features and provides shims for the browsers who lack support.

4) Always use "use strict"; and a have good editor of your choice which has some kind of code-highlighting and perhaps code-completion. I use the browser consoles or firefox scratchpad (silly name for a good tool) for quick hacking sessions and put it all together in notepad++ (= the IDE of your choice).

5) Augmenting the native javascript objects has been debated a lot and has pros and cons. Prototype and MooTools go this way. jQuery takes the other way and provides a separate object for that. I personally prefer to leave the native (and especially host) objects alone and have your own namespace with the functions you need.

Thank you for this answer. I found some points in there, especially point 5, very interesting. Will certainly keep this in mind when developing my library. — Matthew Layton, Aug 21 '12 at 12:44

Writing ECMAScript5 compliant code

2 Answers2

Linked