Object Properties

Slide navigation: Forward with space bar, →, or PgDn. Backwards with ← or PgUp.

Property Attributes

Each property of an object has three attributes:
1. writable: When true, can update the value.
2. enumerable: When true, is visited in for in loop.
3. configurable: When true, ok to delete and to modify these three attributes.
Defaults are true in object literals or dynamically added properties, false in calls to defineProperty/defineProperties.

Use defineProperty to set the attributes:

Object.defineProperty(james, 'id', {
  value: '007',
  enumerable: true,
  writable: false,
  configurable: true
})

Can change configurable properties with defineProperty
get and set attributes hold getter/setter functions.

Define/update property attributes in bulk:

Object.defineProperties(james, { id: { ... }, age: { ... }})

Symbols

Create symbol as:
```
const sym = Symbol('label')
```
Symbols are unique: sym !== Symbol('label')
typeof sym is 'symbol'
Symbols can be used as object keys:
```
obj[sym] = value
{[sym]: value}
```
Can safely attach data to shared objects (for example, DOM nodes).
Properties with symbol keys are not enumerated.
Standard symbols Symbol.iterator, Symbol.species, ...
Can register/retrieve global symbol as Symbol.for('com.horstmann.label')

Getting Property Information

Read descriptor:

Object.getOwnPropertyDescriptor(harry, 'id') →
  { value: 42, enumerable: true, writable: false, configurable: true }

obj.hasOwnProperty(stringOrSymbol) is true if obj has a property with the given key.
- If obj[stringOrSymbol] is undefined, the property might be absent or have the value undefined.
obj.propertyIsEnumerable(stringOrSymbol) is true if obj has an enumerable property with the given key.

Enumerating Properties

Object.keys(obj), Object.values(obj), Object.entries(obj)
- Yield arrays of keys, values, [key, value] pairs.
- Only with keys that are strings (not symbols).
- Only own properties (not from prototype).
- Only enumerable properties.
Object.getOwnPropertyNames(obj), Object.getOwnPropertySymbols(obj)
- Include non-enumerable properties.
Object.getOwnPropertyDescriptors(obj) gets all property descriptors.

Spying on Objects

Object Methods

Creating or Updating Objects

Object.create(prototype, propertyDescriptors) creates an object with the given prototype and properties.
Object.fromEntries constructs an object from an iterable of key/value pair arrays:
```
let james = Object.fromEntries([['name', 'James Bond'], ['id', '007']])
```
Object.assign(target, ...source) copies all enumerable own properties from the sources into the target and returns the updated target:
```
james = Object.assign(james, { salary: 300000}, { buddy: 'Harry Smith'})
```

Preventing Extensions, Sealing, Freezing

Object.preventExtensions(obj): Can't add properties.
Object.seal(obj): Can't add or delete properties, can't configure existing properties.
Object.freeze(obj): In addition, can't set properties, can't change prototype.
All of these methods return the object, so that you can use:
```
return Object.freeze({ ... })
```
Object.isExtensible(obj), Object.isSealed(obj), Object.isFrozen(obj)

Prototypes

Object.create(proto) creates a new object and sets its [[Prototype]] to proto.
Object.getPrototypeOf(obj) gets the [[Prototype]].
proto.isPrototypeOf(obj) is true if proto is in the prototype chain of obj.
- obj instanceof C is the same as C.prototype.isPrototypeOf(obj)
Object.setPrototypeOf(obj, proto) updates the prototype.
- Caution: Changing a prototype can be a very slow operation. It is much better to set the prototype by calling the Object.create method.

Cloning Objects

Constructors and Prototypes

Every function has a prototype property.
Set to { constructor: function } when function is defined.
- constructor property not enumerable.
When an object is created with obj = new function, the [[Prototype]] of obj is set to function.prototype.

The `constructor` Property, `new.target`

Before the class syntax, subclasses set constructor manually.
Object.getPrototypeOf(obj) safer than obj.constructor.prototype
- An object created with Object.create(null) does not have constructor.
- Possible to change constructor
When an object is created with obj = new function, new.target is set to function
- Can prevent invocation without new (new.target === undefined)
- Can simulate abstract classes (throw error when new.target === function)

Other `Object` Methods

toString called whenever an object must be turned into a string:
```
'Hello ' + obj
`Hello ${obj}`
String(obj)
```
By default, obj.toString() returns [object Constructor name]
Override toString to produce a better description.
toLocaleString calls toString, can be overridden to produce a locale-specific description.
Override valueOf if you want to produce a primitive type value that is used in arithmetic expressions.
- Date overrides valueOf to return the number of milliseconds since the epoch:
```
new Date(2525,0,1) - new Date(2000,0,1) → 16567459200000
```
Object.is(x, y) is almost the same as x === y, except that Object.is(+0, -0) is false and Object.is(NaN, NaN) is true.

Function Properties and Methods

The name of a Function object is the name with which the function was defined.
length is the number of arguments (not counting a rest argument)

bind lets you “curry” a function by specifying its initial arguments:

function multiply(x, y) { return x * y }
const double = multiply.bind(null, 2)
double(42) → 84

The first argument is bound to this

const isPet = Array.prototype.includes.bind(['cat', 'dog', 'fish'])
  // Same as x => ['cat', 'dog', 'fish'].includes(x)

Bind this in a callback to another method of the same class:
```
button.onclick = this.handleClick.bind(this)
```

If you don't like it, you can write:

button.onclick = (...args) => this.handleClick(...args)

Invoking Methods

call and apply invoke functions and methods programmatically.
Why not just call f(args) or obj.f(args)?

call calls a method with a different this:

while (Array.prototype.includes.call('aeiou', str[i])) i++
  // Can't call 'aeiou'.includes(str[i])—includes isn't defined for strings!

apply is like call, but the arguments other than this are in an array.

Proxies

Proxy intercepts operations on object/function:
- Getting, setting, deleting, enumerating properties
- Getting and setting the prototype
- Calling (for functions only)
Typical uses:
- Logging
- Dynamic properties (example: database columns)
- Adapting to a different API
- Remote calls

Example: Log Property Access

const proxy = new Proxy(obj, handler): Operations on obj are trapped by the handler.

Handler is object with trap functions:

{
  get: (target, key, receiver) => { ... },
  set: (target, key, value, receiver) => { ... }
  ...
}

target is obj, receiver is the object whose property was accessed (proxy unless the proxy is in the prototype chain).
Operations that are not trapped are passed on to the target.

Logging:

const logHandler = {
    ...
    set: (target, key, value, receiver) => {
      console.log(`set '${key}' to ${value}`)
      target[key] = value
    }
}

Apply to any object:

const values = new Proxy([1, 2, 3], logHandler)
values[2] = 4 // Console logs set '2' to 4

Revocation

Out-of-the box useful proxy.
Can hand a proxied object to semi-trusted code, then revoke access.
The proxy works just like the original if you provide an empty handler.
Or you can add a handler to restrict operations. (Exercise to the reader—make a read-only proxy.)
After revocation, all operations on the proxy throw an exception.

Proxy.revocable(obj, handler) returns object with proxy object and revoke function:

const mySomewhatSensitiveObject = ...
const p = Proxy.revocable(mySomewhatSensitiveObject, {})
doSomethingWith(p.proxy)
p.revoke()
// p.proxy is no longer usable

Revocation

The Twelve Traps

`get(target, key, receiver)`	`receiver[key]`, `receiver.key`
`set(target, key, value, receiver)`	`receiver[key] = value`, `receiver.key = value`
`deleteProperty(target, property)`	`delete proxy[key]`, `delete proxy.key`
`has(target, key)`	`key in target`
`getPrototypeOf(target)`	`Object.getPrototypeOf(proxy)`
`setPrototypeOf(target, proto)`	`Object.setPrototypeOf(proxy, proto)`
`isExtensible(target)`	`Object.isExtensible(proxy)`
`preventExtensions(target)`	`Object.preventExtensions(proxy)`
`getOwnPropertyDescriptor(target, key)`	`Object.getOwnPropertyDescriptor(proxy, key)`
`ownKeys(target)`	`Object.keys(proxy)` (also calling `getOwnPropertyDescriptor`), `Object.getOwnPropertyProperty`(`Names`\|`Symbols`)`(proxy)`
`defineProperty(target, key, descriptor)`	`Object.defineProperty(proxy, key, descriptor)`
`apply(target, thisArg, args)`	`thisArg.proxy(...args)`, `proxy(...args)`, `proxy.apply(thisArg, args)`, `proxy.call(thisArg, ...args)`
`construct(target, args, newTarget)`	`new proxy(args)`, or invocation through `super`

Reflect

Reflect implements the twelve trap operations.

For easy forwarding from proxy:

const logHandler = {
  ...
  set: (target, key, value, receiver) => {
    console.log(`set '${key}' to ${value}`)
    Reflect.set(target, key, value, receiver)
  }
}

Can log all trappable operations with a second proxy:

const logHandler = new Proxy({}, {
  get(target, trapKey, receiver) {
    return (...args) => {
      console.log(`${trapKey} ${args}`)
      return Reflect[trapKey](...args);
    }
  }
})

Some Reflect operations are more convenient than their explicit analogs.
- Reflect.deleteProperty returns a boolean to tell whether deletion was successful, delete operator doesn't.
- Reflect.defineProperty returns a boolean, Object.defineProperty throws an exception upon failure.
- Reflect.apply(f, thisArg, args) calls Function.apply, f.apply(thisArg, args) might not (if f.apply was redefined).

Log everything

Invariants

“Sanity checks” for proxy operations.
Operations cannot return nonsense values.
- construct must return an object.
- getOwnPropertyDescriptor must return a descriptor object or undefined
- getPrototypeOf must return an object or null
The following are protected:
- Non-writable target properties
- Non-configurable target properties
- Non-extensible targets
Example: If a target property is not writable and not configurable, then the get operation of a proxy must yield the actual value.
If not, a TypeError is thrown.
If a target property is not configurable, then has cannot hide it.
If a target is not extensible, then the getPrototypeOf operation must yield the actual prototype, and has an getOwnPropertyDescriptor must report the actual properties.
Many other checks—see the MDN documentation or the spec.

Example: Range

Customization With Symbol Properties

Customizing Object.toString

If you don't override toString, Object.toString returns '[object Object]'
Shouldn't it at least print the correct class name?
Customize Object.toString by defining a property with key Symbol.toStringTag
```
class Employee {
  get [Symbol.toStringTag]() { return 'Employee' }
}
```
Now Object.toString yields '[object Employee]'

Generic solution:

get [Symbol.toStringTag]() { return this.constructor.name }

Can also include instance properties:

get [Symbol.toStringTag]() { return JSON.stringify(this) }

General principle: Some fundamental operations/library functions can be customized with symbol properties.

Controlling Primitive Conversion

Can override conversion to strings/numbers by overriding toString/valueOf:

class Percent {
  constructor(rate) { this.rate = rate }
  toString() { return `${this.rate}%` }
  valueOf() { return this.rate * 0.01 }
}

You may not be happy with the results:
```
'' + new Percent(99.44) → '0.9944'
```
Why not '99.44%'?

Remedy: Add a method with key Symbol.toPrimitive

[Symbol.toPrimitive](hint) {
  if (hint === 'number') return this.rate * 0.01
  else return `${this.rate}%`
}

The hint is:
- 'number' with arithmetic other than + and comparisons
- 'string' with ` ${...} ` or String(...)
- 'default' with + or ==
Don't get too excited—the hint is usually insufficient.

Species

By default, the Array method map produces the same collection that it received:

class MyArray extends Array {}
let myValues = new MyArray(1, 2, 7, 9)
myValues.map(x => x * x) // Yields a MyArray

That's not always appropriate:
```
class Range extends Array
```
Transforms of ranges aren't usually ranges.

Class can specify constructor with Symbol.species key:

class Range extends Array {
  static get [Symbol.species]() { return Array }
  ...
}

Other Well-Known Symbols

Define iterators with Symbol.iterator, Symbol.asyncIterator—see the lessons on Iterators/Asynchronous Programming

Customize the behavior of instanceof with Symbol.hasInstance

class Iterable {
  static [Symbol.hasInstance](obj) { return Symbol.iterator in obj }
}
[1, 2, 3] instanceof Iterable

Symbol.isConcatSpreadable is used in the concat method of Array

const a = [1, 2]
const b = [3, 4]
a[Symbol.isConcatSpreadable] = false
[].concat(a, b) ⇒ [[1, 2], 3, 4]

Symbol.match, Symbol.replace, Symbol.search, Symbol.split are called from the String methods with the same name.
- For matching against something other than a regex, e.g. a glob.

Object Properties

Property Attributes

Symbols

Getting Property Information

Enumerating Properties

Spying on Objects

Object Methods

Creating or Updating Objects

Preventing Extensions, Sealing, Freezing

Prototypes

Cloning Objects

Constructors and Prototypes

The constructor Property, new.target

Other Object Methods

Function Properties and Methods

Function Properties and Methods

Invoking Methods

Proxies

Proxies

Example: Log Property Access

Revocation

Revocation

The Twelve Traps

Reflect

Log everything

Invariants

Example: Range

Customization With Symbol Properties

Customizing Object.toString

Controlling Primitive Conversion

Species

Other Well-Known Symbols

End of Lesson 8

The `constructor` Property, `new.target`

Other `Object` Methods