Currently learning JS, im a beginner.
I created an object to tinker with, and i want to give it some properties that are dependent on th previous properties of the same object.
I have managed to solve it by working about it yet, i know, i am sure there is a way to do it with in the object definition.
please help me, as a beginner i don’t know what key words to used when googling so this is my best bet.
By doing this :
airMax1 = {
price : 200,
appreciation : 8,
taxRate : 0.2,
realPrice : ((this.price+this.appreciation)*this.taxRate)+this.price+this.appreciation,
}
console.log(airMax1)
console.log(airMax1.realPrice)
i was expecting this output :
{ price: 200, appreciation: 8, taxRate: 0.2, realPrice: 249.6 } 249.6
yet what i get is this :
{ price: 200, appreciation: 8, taxRate: 0.2, realPrice: NaN }
NaN
but when i do it differently like this :
airMax1 = {
price : 200,
appreciation : 8,
taxRate : 0.2,
}
airMax1.realPrice=((airMax1.price+airMax1.appreciation)*airMax1.taxRate)+airMax1.price+airMax1.appreciation
console.log(airMax1)
console.log(airMax1.realPrice)
it works and gives me the disered output of
{ price: 200, appreciation: 8, taxRate: 0.2, realPrice: 249.6 }
249.6
how can the same math formula produce a number when its outside the object and not produce a number when its inside the object.
i have swapped the object name with the this. method and all
YounesMeftah is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
You can create a factory that produces augmented objects by using a helper function to dynamically add computed properties.
const addComputedProperty = (receiver, name, getter) => {
Object.defineProperty(receiver, name, {
get: getter.bind(receiver),
enumerable: true // Ensure the property is visible
});
};
const ProductFactory = {
create({ price, appreciation, taxRate }) {
const product = { price, appreciation, taxRate };
addComputedProperty(product, 'realPrice', function() {
return ((this.price + this.appreciation) * this.taxRate) +
this.price + this.appreciation;
});
return product;
}
};
const airMax1 = ProductFactory.create({ price: 200, appreciation: 8, taxRate: 0.2 });
console.log(airMax1); // { price: 200, appreciation: 8, taxRate: 0.2, realPrice: 249.6 }
console.log(airMax1.realPrice); // 249.6Here is an alternative that takes an object that defines the computed properties.
const addComputedProperties = (receiver, properties) => {
Object.entries(properties).forEach(([name, getter]) => {
Object.defineProperty(receiver, name, {
get: getter.bind(receiver),
enumerable: true // Ensure the property is visible
});
});
};
const ProductFactory = {
create({ price, appreciation, taxRate }) {
const product = { price, appreciation, taxRate };
addComputedProperties(product, {
realPrice: function() {
return ((this.price + this.appreciation) * this.taxRate) +
this.price + this.appreciation;
},
});
return product;
}
};
const airMax1 = ProductFactory.create({ price: 200, appreciation: 8, taxRate: 0.2 });
console.log(airMax1); // { price: 200, appreciation: 8, taxRate: 0.2, realPrice: 249.6 }
console.log(airMax1.realPrice); // 249.6Finally, here is a much smaller version that augments directly:
// Same as `addComputedProperties`, but just renamed and returns itself
const AugmentObject = (receiver, properties) =>
Object.entries(properties).reduce((obj, [name, getter]) =>
Object.defineProperty(obj, name, {
get: getter.bind(obj),
enumerable: true // Ensure the property is visible
}), receiver);
const airMax1 = AugmentObject({
price: 200,
appreciation: 8,
taxRate: 0.2
}, {
realPrice: function() {
return ((this.price + this.appreciation) * this.taxRate) +
this.price + this.appreciation;
}
});
console.log(airMax1); // { price: 200, appreciation: 8, taxRate: 0.2, realPrice: 249.6 }
console.log(airMax1.realPrice); // 249.6