12

I was looking for a diagram which shows the built in types of javascript like Function and String but on google I keep finding diagrams with the browser-related stuff like Window.

I'm just looking for the pure js object diagram. I know about the ECMA specification but I'm looking for a diagram because I'm a visual type.

bitfed
  • 347
  • 4
  • 11
Adam Arold
  • 29,285
  • 22
  • 112
  • 207

1 Answers1

20

There's not much depth to the JavaScript types to speak of, the diagram would be fairly flat. It's basically like this (UML at the end), though this will get outdated over time as JavaScript is an evolving language:

  • primitive string
  • primitive boolean
  • primitive number
  • primitive BigInt (ES2020+, primitive arbitrarily-large integers)
  • the Undefined type, which has exactly one instance: undefined
  • the Null type, which has exactly one instance: null
  • Symbol (a primitive type) (ES2015+)
  • Proxy (an object type, but one not backed by the default object prototype) (ES2015+)
  • Object
    • String
    • Boolean
    • Number
    • BigInt (ES2020+)
    • Function
    • Date
    • RegExp
    • Array
    • Math
    • Error * EvalError * RangeError * ReferenceError * SyntaxError * TypeError * URIError * AggregateError (ES2020+)
    • JSON (ES5+)
    • ArrayBuffer (ES2015+)
    • DataView (ES2015+)
    • The typed arrays (Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array) (ES2015+)
    • Map (ES2015+)
    • WeakMap (ES2015+)
    • Set (ES2015+)
    • WeakSet (ES2015+)
    • Promise (ES2015+)
    • Reflect (ES2015+)

I think that's up-to-date through ES2022. To get the latest info, check the latest editor's draft of the specification.

In UML, it looks something like this:

Flat class hierarchy in JavaScript

(click the image to open it so you can zoom)

Note that this is just JavaScript's type tree. It doesn't include lots of other things that are often used with JavaScript on browsers (such as the DOM, the workers API, web storage, the File API, etc., etc.).

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 1
    Thanks that's what I was looking for. Did you cook that UML diagram up or you found it somewhere? – Adam Arold Nov 10 '13 at 15:38
  • 2
    @AdamArold: You're welcome. It's from a great site called http://yuml.me. :-) You type in some special text, and it draws the diagram. – T.J. Crowder Nov 10 '13 at 16:26
  • Very good diagram, thanks, I was looking for this too. But I was of the understanding that all objects are in fact an instance of `Object`, and that saying `var newObject = {};` is just shorthand for `var newObject = new Object();` Another example would be that `var newNumber = 34;` creates a new instance of `Number`, which is why the number variable inherits the properties and methods from the `Number` object, which in turn inherited properties and methods from `Object`. – bitfed Apr 28 '14 at 23:28
  • @bitfed: `{}` and `new Object` are indeed the same thing unless you've overridden or reassigned the `Object` symbol (which you can do, but shouldn't). Saying they're all *"...an instance of `Object`..."* is a bit tricky (despite there being an `instanceof` operator). `Object` is a constructor function, not a "class." Prototypical inheritance is quite different from class-based inheritance. But yes, all JavaScript objects (as distinct from host-provided or foreign objects) ultimately share the same prototype, which is referenced by the `Object.prototype` property. – T.J. Crowder Apr 29 '14 at 06:46
  • @bitfed: `var newNumber = 34;` does not create a `Number` object, it creates a number *primitive*, which is not the same thing. It appears to have methods because it *temporarily* gets promoted to an object when you apply the property accessor operator to it. So having done `var newNumber = 34;` and gotten our number primitive, if we do `console.log(newNumber.toFixed(2));`, that primitive is promoted to an object, the object's `toFixed` property is used to get a reference to the function, the function called, and the temp object is thrown away. – T.J. Crowder Apr 29 '14 at 06:48
  • Ahh good point on class vs constructor. In that, using my Number example, the variable storing `34` does not inherit the .prototype property. Is that correct? – bitfed Apr 29 '14 at 06:51
  • @bitfed: After `var newNumber = 34;`, the variable contains a primitive number. Since it's not an object, it has no prototype. When we do `newNumber.toFixed(2)` (for instance), the JS engine: 1. Gets the primitive number value from `newNumber`. 2. Promotes that primitive number to a `Number` object to apply the property accessor (`.`), assigning the object a prototype from the `Number.prototype` property. 3. Gets the value of the `toFixed` property from the object. 4. Calls the function referenced by that property with `this` as the temp object. 5. Disposes of the temp object. – T.J. Crowder Apr 29 '14 at 07:17
  • what about the `Blob` class? – youkaichao Apr 10 '19 at 03:08
  • @youkaichao - `Blob` isn't part of the JavaScript standard library. It's one of *many* things that's standard in the (modern) browser environment, but it's not JavaScript. In `Blob`'s case, it's part of the [File API](https://w3c.github.io/FileAPI/#blob). – T.J. Crowder Apr 10 '19 at 06:59