JS: 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: JS: Object Basics.

Summary of JavaScript's Object

  1. Object is a collection of key/value pairs. Each key/value pair is called “property”.
  2. Most objects have special purpose, and internal data. For exampe, Function object is a function. Array object has a magical length property. RegExp object is used to match string pattern. Date object holds date/time data, etc. The one object that doesn't have special purpose is the data object, example: {key1:1, key2:2}.
  3. Each object has zero or one parent object, called its “prototype”. When a property is accessed, JavaScript will go up the parent object or parent of parent etc to look for the property. (this is called “inheritance”.)
  4. Each object has a special info attached called the [[isExtensible]] internal slot. It specifies whether new properties can be added to the object
  5. It's useful to distinguish objects by their origin: {standard object, hosted object, user-defined 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 JS: 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:

  1. Standard Object → Objects from the JavaScript language. For example, arrays, functions, dates, regex, Math, etc.
  2. Hosted Object → Objects from the hosting environment. For example, in Browser, there's “window” object [see JS: Browser's Window Object]. In node.js, there's global object.
  3. 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:

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:

  1. Literal expression: {…} → Most convenient and most used.
  2. Object.create() → Most powerful and flexible way to create object, because you can specify parent object, properties, property attributes, all in one function call.
  3. 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 JS: Object Literal Expression]

[see JS: Object.create]

[see JS: 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 JS: Understand JS Array]

JavaScript Object Property Overview

JS: Property Overview

JS Object and Inheritance

  1. Object Overview
  2. Object Type
  3. Find Object's Type
  4. Prototype Chain
  5. Create Object
  6. Object Literal Expr
  7. Create Object with Parent X
  8. Get/Set Parent
  9. Show Prototype Chain
  10. Prevent Adding Property
  11. Clone Object
  12. Test Object Equality
  13. Add Method to Prototype
  14. Object Object
  15. Object.prototype
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

JavaScript in Depth

Basics

  1. JavaScript Basics
  2. true, false
  3. Operators
  4. Branch Control
  5. Loop
  6. Array Basics
  7. Object Basics
  8. RegExp Basics

Variable

  1. Value Types
  2. let
  3. const
  4. var
  5. var Order
  6. var Scope
  7. Global Variable
  8. Destructuring Assignment

String

  1. String Overview
  2. Template String
  3. Char, Code Unit, Codepoint
  4. String Escape Sequence
  5. Unicode Escape Sequence

Function

  1. Define Function
  2. Arrow Function ⭐
  3. Function Params
  4. “arguments” Object
  5. Rest Params ⭐
  6. Arg Default Value ⭐
  7. Arg Destructure ⭐
  8. f Declaration vs Expression
  9. Closure
  10. f call apply bind
  11. Functional Programing

Object Property

  1. Property Overview
  2. Property Key
  3. Dot vs Bracket Notation
  4. Create/Delete Property
  5. Get/Set Property
  6. Check Property Existence
  7. Access Property
  8. List Properties
  9. Property Attributes
  10. Getter/Setter
  11. Property Descriptor
  12. Symbol

Object and Inheritance

  1. Object Overview
  2. Object Type
  3. Find Object's Type
  4. Prototype Chain
  5. Create Object
  6. Object Literal Expr
  7. Create Object with Parent X
  8. Get/Set Parent
  9. Show Prototype Chain
  10. Prevent Adding Property
  11. Clone Object
  12. Test Object Equality
  13. Add Method to Prototype

Array

  1. Understand JS Array
  2. Create Array
  3. Sparse Array
  4. Array-Like Object
  5. Array How-To

Class

  1. “this” Binding
  2. What's Constructor?
  3. Property Key "prototype"
  4. Operator “new”
  5. Operator “instanceof”
  6. Property Key “constructor”
  7. Class
  8. Keyword “extends”
  9. Keyword “super”

Iterable ⭐

  1. Interface
  2. Iterable
  3. Iterator
  4. Iterator Prototype
  5. for-of Loop
  6. Spread Operator
  7. Generator
  8. Generator Function

Misc

  1. Set Object
  2. Map Object
  3. Try Catch Throw Finally
  4. Import/Export
  5. Promise
  6. Proxy
  7. ES2015 Features
  8. How to Convert ES5 to ES2015
  9. Style Guide
  10. Semicolon Rules
  11. Exclamation Before Function
  12. How to Determine Strict Mode?
  13. x.y.z Associativity
  14. Function Chain
  15. Random Number, Range, Integer, Element
  16. Timing JS Code
  17. Range Function for Array
  18. Random Array Element, Randomize Array
  19. Tagged Template String
  20. String to Number
  21. Format Number

Object Reference

  1. the Global Object
  2. Object 🙼 Object.prototype
  3. Array 🙼 Array.prototype
  4. Function 🙼 Function.prototype
  5. String 🙼 String.prototype
  6. RegExp 🙼 RegExp.prototype 🙼 RegExp Syntax
  7. Date 🙼 Date.prototype
  8. Set ⭐🙼 Set.prototype
  9. Map ⭐🙼 Map.prototype
  10. JSON
  11. Math
  12. Reflect
  13. Symbol ⭐🙼 Symbol.prototype
  14. Number 🙼 Number.prototype
  15. Boolean 🙼 Boolean.prototype

DOM How-To

  1. Basic DOM Methods
  2. Get Elements by ID, Tag, Name, Class, CSS Selector
  3. Change CSS
  4. Change Node Content
  5. Create/Insert Node
  6. Remove Node
  7. Get Element's Attribute Value
  8. Set Element's Attribute Value
  9. Remove Element's Attribute Value
  10. List/Add/Remove Class Attribute
  11. Add/Remove Event Handler
  12. Navigate DOM Tree

DOM Overview

  1. Browser Window Object, Document Object Model
  2. Intro to Event-Based Programing
  3. JavaScript Load Order
  4. What is Live Object
  5. NodeList vs HTMLCollection
  6. DOM: Whitespace Nodes

Basic DOM Methods

  1. Basic DOM Methods
  2. Node Type, Name, Value
  3. Navigate DOM Tree

HTML Form

  1. HTML Form
  2. Visit URL in a New Window
  3. Instant Field Validation
  4. Input Field Validation
  5. HTML: Input Range Slider

DOM How To

  1. Encode URL, Escape String
  2. Browser Info, Navigator Object
  3. Get URL (window.location)
  4. Web Cookies
  5. Web Storage
  6. Find Window Width
  7. Find Element Width
  8. WebSocket

Web Scripting Examples

  1. Disable Right Click
  2. document.write
  3. Image Rollover
  4. Pop-up New Window
  5. Digital Clock
  6. Stopwatch
  7. Fade a Element
  8. Fade a Element Using CSS Transition
  9. Shake Element
  10. How to Create Tooltip
  11. Falling Snow Effect
  12. JavaScript: Floating Box Following Scroll

DOM Misc

  1. Value of “this” in Event Handler
  2. Event Delegation
  3. Get Current Script Tag
  4. insertAfter Element
  5. Randomize List
  6. create Document Fragment
  7. innerHTML, nodeValue, textContent, innerText?

jQuery

  1. jQuery Basics
  2. jQuery() vs querySelectorAll()
  3. Write JQuery Plugin

node.js