What is the reason behind Object.hasOwn(x,y) being different from Reflect.ownKeys(x).includes(y) when x represents a CSSStyleDeclaration object and y is a hyphenated property such as 'z-index'?

Question

What is the reason behind Object.hasOwn(x,y) being different from Reflect.ownKeys(x).includes(y) when x represents a CSSStyleDeclaration object and y is a hyphenated property such as 'z-index'?

Both of these conditions are true:

'z-index' in getComputedStyle(document.body) // true
Reflect.has(getComputedStyle(document.body), 'z-index')  // true

Additionally, the following statements also evaluate to true, indicating that 'z-index' is an own property of the CSSStyleDeclaration object:

getComputedStyle(document.body).hasOwnProperty('z-index')  // true
Object.hasOwn(getComputedStyle(document.body), 'z-index')  // true

However, this statement evaluates to false:

Reflect.ownKeys(getComputedStyle(document.body)).includes('z-index')  // false

How can Object.hasOwn(x, y) be true, while Reflect.ownKeys(x).includes(y) is false? It doesn't seem logical.

It's worth noting that even though getComputedStyle(document.body) returns a read-only computed CSSStyleDeclaration object, the same issue arises with an HTMLElement's style property:

Object.hasOwn(document.body.style, 'z-index') // true
Reflect.ownKeys(document.body.style).includes('z-index') // false

According to MDN (https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)

CSS property values may be accessed using the getPropertyValue(propName) API or by indexing directly into the object such as obj['z-index'] or obj.zIndex.

The convenience of accessing the value by obj['z-index'] is understood. The confusion lies in the discrepancy between Object.hasOwn(x,y) and Reflect.ownKeys(x).includes(y) under Ecmascript rules.

Edit: A related question on StackOverflow was found (how does it work element.style["background-color"]) but remained unanswered.

javascript css

Answer 1

Answer №1

Your analysis of the situation is spot-on.

There are no restrictions preventing you from creating such a scenario yourself using a Proxy. Here's an example:

function createCaseInsensitiveObject() {
  return new Proxy({}, {
    getOwnPropertyDescriptor (target, property) {
      return Reflect.getOwnPropertyDescriptor(target, property.toLowerCase())
    },

    defineProperty (target, property, descriptor) {
      return Reflect.defineProperty(target, property.toLowerCase(), descriptor)
    },

    has (target, property) {
      return Reflect.has(target, property.toLowerCase())
    },

    get (target, property) {
      return Reflect.get(target, property.toLowerCase())
    },

    set (target, property, value) {
      return Reflect.set(target, property.toLowerCase(), value)
    },

    deleteProperty (target, property) {
      return Reflect.deleteProperty(target, property.toLowerCase())
    }
    
    // Note: ownKeys is NOT overridden as it
    // would be impractical to return all permutations
    // of casing like hElLo etc.
  })
}

const obj = createCaseInsensitiveObject()
obj.Hello = 123
console.log(obj.HELLO) // 123
console.log(obj.hElLo) // 123
console.log('hElLo' in obj) // true
console.log(Reflect.ownKeys(obj)) // ['hello']
console.log(Reflect.ownKeys(obj).includes('hElLo')) // false

This demonstrates why there may be discrepancies: while the [[Has]] internal method returns true and the [[GetOwnProperty]] internal method returns a valid descriptor, the [[OwnPropertyKeys]] internal method may not contain that key in the returned array.

The [[OwnPropertyKeys]] internal function should not be used simply to check if a known key exists; instead, it should be iterated over to discover keys. In practice, you would use Object.hasOwn to check for a specific property's existence, and utilize Object.keys (or Object.getOwnPropertyNames) for iterating over properties. This way, the CSSStyleDeclaration will behave consistently by returning each real property only once, accepting both forms when accessing a property directly.

Answer 2

Your analysis of the situation is spot-on.

There are no restrictions preventing you from creating such a scenario yourself using a Proxy. Here's an example:

function createCaseInsensitiveObject() {
  return new Proxy({}, {
    getOwnPropertyDescriptor (target, property) {
      return Reflect.getOwnPropertyDescriptor(target, property.toLowerCase())
    },

    defineProperty (target, property, descriptor) {
      return Reflect.defineProperty(target, property.toLowerCase(), descriptor)
    },

    has (target, property) {
      return Reflect.has(target, property.toLowerCase())
    },

    get (target, property) {
      return Reflect.get(target, property.toLowerCase())
    },

    set (target, property, value) {
      return Reflect.set(target, property.toLowerCase(), value)
    },

    deleteProperty (target, property) {
      return Reflect.deleteProperty(target, property.toLowerCase())
    }
    
    // Note: ownKeys is NOT overridden as it
    // would be impractical to return all permutations
    // of casing like hElLo etc.
  })
}

const obj = createCaseInsensitiveObject()
obj.Hello = 123
console.log(obj.HELLO) // 123
console.log(obj.hElLo) // 123
console.log('hElLo' in obj) // true
console.log(Reflect.ownKeys(obj)) // ['hello']
console.log(Reflect.ownKeys(obj).includes('hElLo')) // false

This demonstrates why there may be discrepancies: while the [[Has]] internal method returns true and the [[GetOwnProperty]] internal method returns a valid descriptor, the [[OwnPropertyKeys]] internal method may not contain that key in the returned array.

The [[OwnPropertyKeys]] internal function should not be used simply to check if a known key exists; instead, it should be iterated over to discover keys. In practice, you would use Object.hasOwn to check for a specific property's existence, and utilize Object.keys (or Object.getOwnPropertyNames) for iterating over properties. This way, the CSSStyleDeclaration will behave consistently by returning each real property only once, accepting both forms when accessing a property directly.

What is the reason behind Object.hasOwn(x,y) being different from Reflect.ownKeys(x).includes(y) when x represents a CSSStyleDeclaration object and y is a hyphenated property such as 'z-index'?

Answer №1

Similar questions

Modifying the appearance of a WordPress website with CSS styling

Running javascript code after the completion of the render method in Reactjs

The appearance of the page varies when viewed on different computers using the same version of Firefox

"Filtering a JSON File Based on Button Data Attributes: A Step-by-

Prevent divs from jumping to a new line with the float property

Ways to determine if the property of a document has been altered?

Step by step guide to creating individual counter sections

Using regex, match any word along with the preserved white space and consider parentheses as a single word

Identical Identifiers in jQuery Tab Elements

Checkbox enabled Bootstrap image

Go to a different webpage containing HTML and update the image source on that particular page

``There seems to be an issue with the alignment of items in the

Enhance your HTML5 video by incorporating strategically placed buttons (images) as an overlay

Numerous toggles available for the mobile version

Need help with TypeScript syntax for concatenating strings?

Passing references between multiple components

Ways to resolve - Error: Unable to access 'comments' property of null

Why is my custom function failing to operate on an array?

What is the best way to customize Node.js configuration when it is executed through npm?

Answer for background picture when reducing magnification