Search code examples
javascriptjscriptecmascript-5ecma262

Writing ECMAScript5 compliant code (Part 2)

I am currently learning advanced JavaScript, with an aim to build a standards compliant (HTML5, CSS3, ESv5) library. Along my way I have already asked a couple of related questions to try and figure out where to start, what to do, what not to do, what to avoid etc. I have already begun reading the ECMA-262 (ECMAScript version 5) documentation, and have been running a few tests before I get started on development work.

Previous questions:

Writing ECMAScript5 compliant code

What's the difference between JavaScript, JScript & ECMAScript?

In my research I found out that different browsers implement the standard differently, and in that respect, they implement different objects. For example, IE implements an object called ActiveXObject, but this is not the case in FireFox. So I wrote a little test facility which determines if something is defined within the browser.

Consider the following which tests a few known objects (including jQuery since this is not built in).

Browser Feature Test Facility

Again, I have reached a point where I am in need of help:

Questions:

  1. Given the example above, what is the difference between an object and a function?

  2. Do I write functions or objects in ES/JS?

  3. Why is Object a function and not an object?

  4. Is there any hierarchical structure to built in objects / functions?

  5. Can built in objects / functions be redefined as something entirely different?

  6. Can built in objects / functions be undefined?

  7. Can built in objects / functions be assigned new features if they do not already support them natively?

  8. If an object is defined in one browser and not another, how can I compensate for this?

P.S. I do not want answers relating to specific implementations (JavaScript/JScript), rather answers relating to the standard (ECMAScript v5). Thanks in advance!

Solution

  • Given the example above, what is the difference between an object and a function?

    In Chrome, all these items are functions. In general however, a function is an object with the addition that it holds code and that you can call it. So, you can also just add properties to functions (like jQuery does: $("selector") or $.ajax).

    Do I write functions or objects in ES/JS?

    Well, obviously that depends on what you code. function() {} gives you a function; {} gives you an object. (Again, functions are objects in the end.)

    Why is Object a function and not an object?

    Object is a function because you can call it, either as a constructor or not:

    Object();      // returns an empty object
new Object();  // same

    Also, given that almost everything is an instance of Object, it follows that Object is a constructor and thus a function. (Note again that functions are also objects.)

    Is there any hierarchical structure to built in objects / functions?

    As for the ECMAScript built-in objects, there is in a sense. There are constructor functions (String) on the global object, functions for instances (Array.prototype.forEach), and "static" functions (Object.defineProperty which is meant to be used on objects, Array.isArray for arrays).

    Can built in objects / functions be redefined as something entirely different?

    Sure, you can do Object = null. But any code relying on Object will start throwing exceptions, so it's not recommended at all.

    Can built in objects / functions be undefined?

    No, an object is not undefined by definition. undefined is not an object and vice-versa. This holds for any object.

    Can built in objects / functions be assigned new features if they do not already support them natively?

    Yes, if e.g. Array.prototype.forEach does not exist, you could set it yourself. But it should be noted that such functions turn up in for(var key in arr) loops which again can cause code to behave differently. This can be solved using Object.defineProperty by using {enumerable: false}. But there is another caveat: the function is shared across the whole environment (e.g. the current page). If other code is also setting them you're experiencing collisions.

    If an object is defined in one browser and not another, how can I compensate for this?

    You can "shim" such functions. For e.g. ES5 functions such as Array.prototype.forEach there are shims available which make them available on older browsers as well. Underscore.js may be a good example.