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:

[To see links please register here]

[To see links please register here]

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][1]

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!

[1]:

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

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

A [function](

[To see links please register here]

) is just an [object which is callable](

[To see links please register here]

). However, I guess you ask for the types of [host objects](

[To see links please register here]

) (`Node`, `HTMLCollection` etc): Their behaviour is implementation-dependent ("not ecmascript-native") - you can't rely on anything.

> Do I write functions or objects in ES/JS?

Huh? You write *code*, which can be interpreted.

> Why is Object a function and not an object?

[`Object`](

[To see links please register here]

) is the native [object constructor](

[To see links please register here]

), and therefore a function (and also an Object).

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

Do you ask for "*Everything is an [Object](

[To see links please register here]

;? If you ask for the structure of DOM interfaces: They are implementation-dependent host objects again, but most implementors have a inheritance system based on the [DOM specification](

[To see links please register here]

).

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

No. You can overwrite the global variables pointing to them (the properties of the global object), but every instance will nevertheless be constructed from the native (then [[nearly](

[To see links please register here]

)] unaccessible) constructors.

> Can built in objects / functions be assigned new features if they do not already support them natively? If an object is defined in one browser and not another, how can I compensate for this?

Yes, you can extend the native objects and their prototypes. But watch out for host objects, they [might not like it](

[To see links please register here]

). If an object is defined only in certain environments, you can easily test for its existance and possibly [shim](

[To see links please register here]

) it ([es5](

[To see links please register here]

), [html5](

[To see links please register here]

)).

As part of my research into ECMAScript / JavaScript, I have found the following resource which provides a lot of information regarding the JS DOM.

[To see links please register here]