Is it possible to extend the Object class in order to automatically initialize a property when it is being modified?

Question

Is it possible to extend the Object class in order to automatically initialize a property when it is being modified?

My experience with various programming languages leads me to believe that the answer is likely a resounding no, except for PHP which had some peculiar cases like $someArray['nonexistentKey']++.

I'm interested in creating a sparse object where each property functions as a numeric counter. If a counter is not defined, it should default to 0 and automatically initialize itself to 0 if you attempt to increment it.

In essence, I want to customize the Object getter to return 0 instead of

undefined</code... or possibly define the property right there during the <code>get

operation and set it to 0.

This means that any undefined property would get initialized to zero upon get. For example:

myObj['hugePrimeNumberToBaseXToString']++;

would then result in the property being set to 1.

In the past, using something like Object.__proto__ may have been a solution for this scenario...

javascript typescript

Answer 1

Answer №1

It seems like the solution you're looking for involves utilizing a Proxy.

By using a proxy, you can intercept property accesses and implement custom logic. For instance, you can return zero when accessing an undefined property.

// Store the data
const target: { [key in string]: number } = {}

// Use the proxy to access the data
const proxy = new Proxy(target, {
    get(target, prop, receiver) {
        if (typeof prop === 'string') {
            if (target[prop] === undefined) return 0
            return target[prop]
        }
        return undefined
    }
})

proxy['hugePrimeNumberToBaseXToString']++
console.log(proxy['hugePrimeNumberToBaseXToString']) //=> 1

Playground

Answer 2

It seems like the solution you're looking for involves utilizing a Proxy.

By using a proxy, you can intercept property accesses and implement custom logic. For instance, you can return zero when accessing an undefined property.

// Store the data
const target: { [key in string]: number } = {}

// Use the proxy to access the data
const proxy = new Proxy(target, {
    get(target, prop, receiver) {
        if (typeof prop === 'string') {
            if (target[prop] === undefined) return 0
            return target[prop]
        }
        return undefined
    }
})

proxy['hugePrimeNumberToBaseXToString']++
console.log(proxy['hugePrimeNumberToBaseXToString']) //=> 1

Playground

Answer 3

Answer №2

Proxy is the correct answer, although one could argue that directly manipulating Object delves much deeper into the system than necessary.

Instead, consider creating a new and straightforward object type like this:

const Dictionary = function() {}

Dictionary.prototype.add = function(key) {
  if (this.hasOwnProperty(key)) {
    this[key] += 1;
  } else {
    this[key] = 1;
  }
}

const dict = new Dictionary();

dict.add("apples");

console.log(dict.apples) // 1

dict.add("apples");
dict.add("bananas");

console.log(dict.apples, dict.bananas) // 2, 1

While it may not be exactly what you were looking for as it requires calling add each time, simplicity and expandability are valuable qualities worth sacrificing a few characters for.

Codepen

Answer 4

Proxy is the correct answer, although one could argue that directly manipulating Object delves much deeper into the system than necessary.

Instead, consider creating a new and straightforward object type like this:

const Dictionary = function() {}

Dictionary.prototype.add = function(key) {
  if (this.hasOwnProperty(key)) {
    this[key] += 1;
  } else {
    this[key] = 1;
  }
}

const dict = new Dictionary();

dict.add("apples");

console.log(dict.apples) // 1

dict.add("apples");
dict.add("bananas");

console.log(dict.apples, dict.bananas) // 2, 1

While it may not be exactly what you were looking for as it requires calling add each time, simplicity and expandability are valuable qualities worth sacrificing a few characters for.

Codepen

Is it possible to extend the Object class in order to automatically initialize a property when it is being modified?

Answer №1

Answer №2

Similar questions

Is it necessary to specify the server-side script within the "routes" directory?

"SyntaxError: import statements can only be at the top level of a module" is the error message that I keep encountering.`

What is the best way to import all Vue3 components asynchronously?

Troubleshooting: Why jQuery is Not Functioning Properly in Conjunction

Retrieve the highest value indexes from a three-dimensional array with JavaScript

Tips on serializing two arrays into JSON format and incorporating them in an AJAX request

Identifying a flaw in an HTML5 video

Using Javascript, extend the start date by an additional two months in the CRM

Identifying duplicated video duration data associated with videoIds in asynchronous calls using Youtube API v3

Is there a way to automatically change the value of one input box to its negative counterpart when either of the two input boxes have been filled in?

Using a variable to contain a loop in Jquery

Passing events between sibling components in Angular 2Incorporating event emission in

How to include a javascript file in a vuejs2 project

What is the reason for this MongoDB document consistently having the identical nanoid?

Can a variable name be created using a function input?

The TypeScript error "Issue with Type Assertion: 'This expression is not callable Type'...' has no call signatures" occurs when there is a missing semicolon

Set the title attribute according to the content of the <p> tag

Utilizing JavaScript and jQuery libraries in conjunction with periods

The element within the iterator is lacking a "key" prop, as indicated by the linter error message in a React component

Troubleshooting: Issues with jQuery Dropdown Menu