Dirk Harriman Banner Image

 

Notes Javascript - Enumerability & Ownership Of Properties

  • Quick Reference

    Flow control, Iteration, Functions, Errors, Events, Data Structures, Classes

  • Javascript Overview

    Language Details, Variables, Hoisting, Scope, Data Structures, Literals, Special Characters

  • Control Flow

    If Else, Switch, For Next, Do While, While Do, For In, For Of with Arrays, Break, Continue

  • Error Handling

    Throw Esception, Error Object, Custom Errors, DOMEsception, Try Catch

  • Functions

    Declaration, Function Expression, Scope, Recursion, Anonymous, Closures, Immediately Invoked Function Expression, Namespace, Nesting, Arguments, Parameters, Arrow Functions, Predefined Functions

  • Expressions & Operators

    Assignment, Destructuring, Evaluation & Nesting, Comparison, Arithmetic, Bitwise, Binary Switches, Bitwise Logical, Bitwise Shift, Logical Operators, Short-Circuit Evaluation, BigInt, String, Ternary, Comma, Unary, Relational, Spread Syntax, Short Circuiting

  • Numbers & Dates

    Number Object, Math Object, Date Object

  • Text Formatting

    String Literals, Extended Characters, EC Table, String Object, String Functions, Template Literals

  • Regular Expressions

    RE Methods, String RE Methods, Building REs, Character Classes, Groups & Backreferences, Sample Code

  • Collections - Indexed & Keyed

    Arrays, Array Methods, Multi-Dimensional Array, Keyed Collections, Map, WeakMap, Set, WeakSet

  • Keyed Collections

    Map Object, WeakMap Object, Set Object

  • Objects

    Objects vs. JSON, Creating, Enumerating Properties, Inheritance, Getters and Setters, Examples

  • Classes

    Declaration, Constructors, Private Fields, Getters and Setters, Static Properties, Inheritance, This and Super

  • Promises

    Defined and Illustrated, Usage, Chaining, Arrow Functions, Nesting, Examples

  • Iterators & Generators

    Iterators, Generators, Generator Functions, Examples

  • Meta Programming

    Proxy Object

  • Javascript Modules

    Structure, Importing, Exporting, Import Maps, Remapping Module Paths, Scoped Modules For Version Management, Applying, Difference Between Modules & Standard Scripts, Name Conflict Avoidance, Creating Module Object, Modules & Classes, Aggregating

  • Client-Side Web APIs

    Defined, Usage, DOM, DOM Manipulation, Shopping List App

  • Closures

    IIFE, Closure Examples

  • DOM

    Document Object Model, Create Element, Remote HTML Doc Frag, Dynamic HTML, Web Component, DOM Methods

  • JSON

    JavaScript Object Notation, Examples

  • AJAX & JSON &XML

    Using JSON to pass data between client and server, Standard JS, jQuery, XML, Parsing, CDATA, GET, POST, Parameters, JSON Response, XML Response

  • AJAX & JSON Samples

    Examples: Standard and jQuery examples of AJAX GET and POST using JSON and XML.

  • AJAX & XML Samples

    Examples: AJAX and XML, both Standard and jQuery

  • Forms, Events, Data & AJAX

    Event Target, Add Event Listener, Remove Event Listener, Dispatch Event, Event Types, Button Click, Focus, Mouse Event

  • Form Input

    Button, Text Box, Data List, Text Area, Drop Down Lists, List Boxes, Dual List Boxes, Check Boxes, Radio Buttons

  • Custom Controls

    Building, Custom Drop Down List, Masked Input, Custom Check Boxes

  • Built In Functions & Events

    DOM (Document Object Model), DOM Constructor, DOM Instance Properties, DOM Instance Methods, DOM Events, DOM Inheritance

  • Await & Async

    Asynchronous Functionality, Async

  • Client-Side Frameworks

    React, Ember, Vue, Svelte, Angular

  • Data Structures

    Dynamic & Weak Typing, Primatives, Null, Undefined, Boolean, Number, BigInt, String, Symbol, Objects, Dates, Indexed Collections, Keyed Collections, JSON, Type Coersion, Primative Coersion, Number Coersion

  • Equality Comparisons & Sameness

    Strict Equality, Loose Equality, Same-Value-Zero Equality, Comparing Equality Methods, Truthyness & Falsyness

  • Enumerability & Ownership Of Properties

    Enumerable Properties & Non-enumerable Properties, Traversing Object Properties

  • Inheritance & The Prototype Chain

    Inheriting Properties, Inheriting Methods, Constructors, Prototype Chains

  • Typed Arrays

    Typed Array Architecture, ArrayBuffer, Web APIs Using Typed Arrays

  • Concurrency Model & Event Loop

    The Event Loop, Runtime Concepts, Stack, Queue, Heap

  • Graphics

    Using Canvas, List of Methods, Examples

  • Music Tabs App

    Smart Tab Files with quantative chords that can be transposed into other keys by half steps. Simple parser to convert tabs in a specified format into a smart tab that can be transposed.

  • Social Media Threader App

    A threader app that breaks up text into pieces that can be uploaded to certain social media where character limit contraints are a foactor.

Sub Menu Here

 

 

Enumerability & Ownership Of Properties


Every property in JavaScript objects can be classified by three factors:

Enumerable Properties

Those properties whose internal enumerable flag is set to true, which is the default for properties created via simple assignment or via a property initializer.

Non-Enumerable Properties

Properties defined via Object.defineProperty and such are not enumerable by default.

Most iteration means (such as for...in loops and Object.keys) only visit enumerable keys.
Ownership of properties is determined by whether the property belongs to the object directly and not to its prototype chain.

All properties, enumerable or not, string or symbol, own or inherited, can be accessed with dot notation or bracket notation. In this section, we will focus on JavaScript means that visit a group of object properties one-by-one.

Querying Object Properties

There are four built-in ways to query a property of an object. They all support both string and symbol keys. The following table summarizes when each method returns true.

Enumerable, own Enumerable, inherited Non-enumerable, own Non-enumerable, inherited
propertyIsEnumerable() true ✅ false ❌ false ❌ false ❌
hasOwnProperty() true ✅ false ❌ true ✅ false ❌
Object.hasOwn() true ✅ false ❌ true ✅ false ❌
in true ✅ true ✅ true ✅ true ✅

Traversing Object Properties

There are many methods in JavaScript that traverse a group of properties of an object. Sometimes, these properties are returned as an array; sometimes, they are iterated one-by-one in a loop; sometimes, they are used for constructing or mutating another object. The following table summarizes when a property may be visited.

Methods that only visit string properties or only symbol properties will have an extra note. ✅ means a property of this type will be visited; ❌ means it will not.

Enumerable, own Enumerable, inherited Non-enumerable, own Non-enumerable, inherited
Object.keys
Object.values
Object.entries
 ✅
(strings)		 ❌ ❌ ❌
Object.getOwnPropertyNames ✅
(strings)		 ❌ ✅
(strings)		 ❌
Object.getOwnPropertySymbols ✅
(symbols)		 ❌ ✅
(symbols)		 ❌
Object.getOwnPropertyDescriptors ✅ ❌ ✅ ❌
Reflect.ownKeys ✅ ❌ ✅ ❌
for...in ✅
(strings)		 ✅
(strings)		 ❌ ❌
Object.assign
(After the first parameter)		 ✅ ❌ ❌ ❌
Object spread ✅ ❌ ❌ ❌
Obtaining Properties by enumerability/ownership

Note that this is not the most efficient algorithm for all cases, but useful for a quick demonstration.

const SimplePropertyRetriever = { getOwnEnumerables(obj) { return this._getPropertyNames(obj, true, false, this._enumerable); // Or could use for...in filtered with Object.hasOwn or just this: return Object.keys(obj); }, getOwnNonenumerables(obj) { return this._getPropertyNames(obj, true, false, this._notEnumerable); }, getOwnEnumerablesAndNonenumerables(obj) { return this._getPropertyNames( obj, true, false, this._enumerableAndNotEnumerable, ); // Or just use: return Object.getOwnPropertyNames(obj); }, getPrototypeEnumerables(obj) { return this._getPropertyNames(obj, false, true, this._enumerable); }, getPrototypeNonenumerables(obj) { return this._getPropertyNames(obj, false, true, this._notEnumerable); }, getPrototypeEnumerablesAndNonenumerables(obj) { return this._getPropertyNames( obj, false, true, this._enumerableAndNotEnumerable, ); }, getOwnAndPrototypeEnumerables(obj) { return this._getPropertyNames(obj, true, true, this._enumerable); // Or could use unfiltered for...in }, getOwnAndPrototypeNonenumerables(obj) { return this._getPropertyNames(obj, true, true, this._notEnumerable); }, getOwnAndPrototypeEnumerablesAndNonenumerables(obj) { return this._getPropertyNames( obj, true, true, this._enumerableAndNotEnumerable, ); }, // Private static property checker callbacks _enumerable(obj, prop) { return Object.prototype.propertyIsEnumerable.call(obj, prop); }, _notEnumerable(obj, prop) { return !Object.prototype.propertyIsEnumerable.call(obj, prop); }, _enumerableAndNotEnumerable(obj, prop) { return true; }, // Inspired by http://stackoverflow.com/a/8024294/271577 _getPropertyNames(obj, iterateSelf, iteratePrototype, shouldInclude) { const props = []; do { if (iterateSelf) { Object.getOwnPropertyNames(obj).forEach((prop) => { if (props.indexOf(prop) === -1 && shouldInclude(obj, prop)) { props.push(prop); } }); } if (!iteratePrototype) { break; } iterateSelf = true; obj = Object.getPrototypeOf(obj); } while (obj); return props; }, };