JavaScript: Object Overview

By Xah Lee. Date: . Last updated: .

This page is a overview of JavaScript object system. It's called prototype-based object system.

If you don't know how to create object, read properties, first see: Object Basics .

Summary of JavaScript's Object

Following are details.

What's JavaScript Object

A JavaScript object is a set of unordered key/value pairs.

{Arrays, functions, date, regex, …}, are specialized objects. They have special properties and behaviors than normal objects. But they still are key/value pairs.

[see Object Type]

Standard Object, Hosted Object, User-Created Object

It is useful to distinguish objects by where they came from. We have the following sources:

Standard Object
Objects from the JavaScript language. For example, arrays, functions, dates, regex, Math, etc.
Hosted Object
Objects from the hosting environment. For example, in Browser, there's “window” object [see Browser's Window Object]. In node.js, there's global object.
User-defined Object
User defined. For example, let obj = {}.

Object Internal Slots: [[Prototype]], [[isExtensible]]

Each object has many associated info called “internal slots” by the spec. The two important ones you need to understand for coding JavaScript are:

[[prototype]]
value is another object or null. This value is the parent object. This is how JavaScript finds a object's parent. The line of parents is called “prototype chain”. The significance of this “prototype chain” is how object's properties are looked up, called “inheritance”. [see Prototype and Inheritance]
[[isExtensible]]
value is true or false. If true, it means new properties can be added to the object. [see Prevent Adding Property]

Note: In JavaScript spec, “Internal Slots” are indicated by double square brackets [[]].

Note: “Internal Slots” are implementation detail. They are not object properties. JavaScript programers don't need to know about interenal slots, but is very useful to explain some JavaScript behavior.

ECMAScript 2015 §Ordinary and Exotic Objects Behaviours#sec-ordinary-object-internal-methods-and-internal-slots

Ways to Create Object

There are 3 major ways to create data object:

Literal expression: {}
Most convenient and most used.
Object.create()
Most powerful and flexible way to create object, because you can specify parent object, properties, property attributes, all in one function call.
Keyword new, in new function_name()
complex behavior. It tries to be similar to Java's object oriented programing concepts, but the result is very complex. For some standard objects, such as Date, it's the only way to create it.

[see Object Literal Expression]

[see Object.create]

[see Operator “new”]

Note: remember that function and array are also objects. So, when you define a function (for example, function f(){}) or create a array (for example, ar = [7,2,4]), you are also creating objects. [see Understand JS Array]

JavaScript Object Property Overview

Property Overview

JavaScript Object and Inheritance

JS in Depth
XAH  BUY NOW

JS in Depth

JS Obj Ref

DOM


JS in Depth

Basic Syntax

Value Types

Variable

String

Function

Property

Object and Inheritance

Array

Constructor/Class

Iterable 🌟

Misc