Javascript Setter is not a function error - javascript

When I tried to log the isCheckedOut setter on the console, I am getting an error testLib.isCheckedOut is not a function
I'm having a hard time figuring out why. Any help would be very great
/* Parent Class */
class Library {
constructor(title) {
this._title = title;
this._isCheckedOut = false;
this._ratings = [];
}
get title() {
return this._title;
}
get isCheckedOut() {
return this._isCheckedOut;
}
set isCheckedOut(value) {
this._isCheckedOut = value;
}
get ratings() {
return this._ratings;
}
getAverageRating() {
}
toggleCheckOutStatus() {
}
addRating() {
}
}
const testLib = new Library;
console.log(testLib.isCheckedOut(true));

Setters obfuscate the fact that they're functions to callers. When you have an object with a setter, to invoke the setter, assign to the property:
someObj.theSetterPropertyName = theArgumentToPassToSetter;
Similarly, to invoke a getter, reference the property as an expression:
someObj.theGetterPropertyName
So, you want:
class Library {
constructor(title) {
this._title = title;
this._isCheckedOut = false;
this._ratings = [];
}
get title() {
return this._title;
}
get isCheckedOut() {
return this._isCheckedOut;
}
set isCheckedOut(value) {
this._isCheckedOut = value;
}
get ratings() {
return this._ratings;
}
}
const testLib = new Library;
testLib.isCheckedOut = true; // invoke setter
console.log(testLib.isCheckedOut); // invoke getter

const testLib = new Library;
console.log(testLib.isCheckedOut = true);
JS setter
The set syntax binds an object property to a function to be called when there is an attempt to set that property.

You can't call setter like function.
a setter can be used to execute a function whenever a specified property
is attempted to be changed
Set a property using a setter:
const testLib = new Library;
testLib.isCheckedOut = true;
console.log(testLib.isCheckedOut);
Calling a function:
const testLib = new Library;
testLib.addRating();

I was having the same issue at this lesson, only used empty brackets instead of .isCheckedOut(true). Got the same error.
console.log(testLib.isCheckedOut(true));
Remove the brackets altogether after the isCheckedOut property and it'll work:
console.log(testLib.isCheckedOut);

Related

Force the use of setters instead of straight assignments in a JS ES6 Class

I have a CameraBuilder class that looks like this:
class CameraBuilder {
constructor() {
if (arguments.length) {
throw new Error('[CameraBuilder constructor ERROR] class constructor does not accept parameters.');
}
this.camera = {};
}
withFarmLabel(farmLabel) {
this.camera.farm_label = farmLabel;
return this;
}
// more methods here
build() {
const missingProps = [];
if (!this.camera.farm_label) {
missingProps.push('\nMissing farm_label property. Use the withFarmLabel method in order to assign it.');
}
// more validations like the one above here
if (missingProps.length) {
const errorMsg = missingProps.join('');
throw new Error(`[CameraBuilder build ERROR] ${errorMsg}`);
}
return this.camera;
}
}
Since most of my validations are on the build() method and there are some business logic on some of these methods associated with how the user is building an instance of CameraBuilder, I wouldn't want anyone assigning cameraBuilderObj.camera directly. Is there any way I can enforce the use of the Class methods in order to assign properties to the Camera object?
You could make the camera property private by putting # in front of it, ensuring that only CameraBuilder's internals can reference it:
class CameraBuilder {
#camera = {};
constructor() {
if (arguments.length) {
throw new Error('[CameraBuilder constructor ERROR] class constructor does not accept parameters.');
}
}
withFarmLabel(farmLabel) {
this.#camera.farm_label = farmLabel;
return this;
}
// more methods here
build() {
const missingProps = [];
if (!this.#camera.farm_label) {
missingProps.push('\nMissing farm_label property. Use the withFarmLabel method in order to assign it.');
}
// more validations like the one above here
if (missingProps.length) {
const errorMsg = missingProps.join('');
throw new Error(`[CameraBuilder build ERROR] ${errorMsg}`);
}
return this.#camera;
}
}
const c = new CameraBuilder();
c.withFarmLabel('label');
console.log(c.camera);
console.log(c.build().farm_label);
CertainPerformance's answer probably makes more sense--don't expose it in the first place--but if for some reason you didn't want to go that route (or if you're in an environment where private fields aren't supported) you could define setters on it, so that direct assignments go through your function.
class Foo {
constructor () {
this._bar = 'baz';
}
set bar (value) {
this._bar = value;
console.log('do whatever you want to do here.');
}
}
const f = new Foo();
f.bar = 'hey'; // direct assignment invokes the setter

JavaScript OOP - notation confusion

I would like to know what's the difference between these notations :
function Forms (formSelector) {
this.id;
this.formSelector = formSelector;
}
Forms.prototype.getAll = function () { return $(this.formSelector) } // get all forms in a JQuery object
Forms.prototype.get = function () { return $(this.getAll()).get(this.id) }
And
function Forms (formSelector) {
this.id;
this.formSelector = formSelector;
this.getAll = function () { return $(this.formSelector) }
this.get = function () { return $(this.getAll()).get(this.id) }
}
Or even
function Forms (formSelector) {
this.id;
this.formSelector = formSelector;
this.getAll = $(this.formSelector);
this.get = $(this.getAll()).get(this.id);
}
I can even write something like this:
var Forms = {
constructor: function (formSelector) {
this.formSelector = formSelector;
return this.formSelector;
},
setId: function (id) { if (!isNaN(id) this.id = id; }
getAll: function () {
return $(Forms.constructor.formSelector); // this should work I think ?
}
}
This is so confusing to me, I don't quite get to figure out what's the best and more optimized way to write my objects, in terms of speed and clarity, and to encapsulate their methods and properties.
In any case, it seems that I can modify my properties by just stating something like:
var test = new Forms('.forms');
test.id = 10;
test.getAll = 'something';
// What I want is something like :
test.setId(10) // and test.id = X shouldn't work
Thanks!
It's 2018 and almost all browsers support ES6 classes now, except IE 11 of course. But you can use babel to transpile your code if you want to support older browsers.
That being said, this is how you'd write a class OOP way in JavaScript.
class Form {
constructor(formSelector) {
this.id = 'default value';
this.formSelector = formSelector;
// probably also check if $ is defined
}
// you can use getter method
get id() {
return this.id;
}
// you can use setter method
set id(idVal) {
this.id = idVal;
}
get formSelector() {
return this.id;
}
set formSelector(val) {
this.formSelector = val;
}
getAll() {
return $(this.formSelector);
// whatever getAll is supposed to return
}
}
You would use this class as
const myForm = new Form('form-selector-value');
// no brackets for getter and setter
const formId = form.id; // get id value
form.id = 'some-val'; // set id value
form.getAll(); // invoke the get all method
// you can change the formSelector anytime for `form` variable
form.formSelector = 'some-value';

How do I set the default property of an object (object)?

I need to add new objects to the list (Filters.list)
* Filters.prop - is a default prop
* list items also have prop - list[name].prop (equal default prop)
Chage default Filters.prop -> [not] change item list[name].prop
Where is the mistake?
function Filters() {
this.prop = 'some';
this.list = { };
this.add = function (name) {
this.list[name] = {
prop: this.prop,
};
}
}
let attempt = new Filters();
attempt.add('first');
attempt.prop = 'other';
document.writeln(attempt.prop);
document.writeln(attempt.list['first'].prop);
After run snippet output: other some
But I need: other other
I thought the property would be saved by reference. But this is not so, it does not change. When I change Filters.prop I expected that too it will change list[name].prop
The problem with this is that, as you noticed yourself, the value is passed the way you're doing it instead of the reference.
Thanks to JavaScript get, you can return the value of prop of the surrounding object within a function which behaves like an attribute.
function Filters() {
this.prop = 'some';
this.list = { };
this.add = function(name) {
let self = this;
this.list[name] = {
get prop() {
return self.prop;
},
};
}
}
let attempt = new Filters();
attempt.add('first');
attempt.prop = 'other';
document.writeln(attempt.prop)
document.writeln(attempt.list['first'].prop)
Side note: I use the variable self here because using this.prop within get prop() would reference the wrong object and hence cause a recursion.

Is there a way to use property get and set notation in a JS function class?

Is there a way in JavaScript's constructor functions to use getter and setter syntax for properties?
Here is an example of my desired syntax:
function DemoClass()
{
var mFooProperty = 0;
get FooProperty()
{
return mFooProperty;
}
set FooProperty(value)
{
mFooProperty = value;
}
}
var anInstance = new DemoClass();
console.log(anInstance.FooProperty);
anInstance.FooProperty = 42;
console.log(anInstance.FooProperty);
You can make use of a class in Javascript and set the properties as a class instance and then use getters/setters like
class DemoClass {
constructor() {
this.mFooProperty = 0;
}
get FooProperty() {
return this.mFooProperty;
}
set FooProperty(value) {
this.mFooProperty = value;
}
}
var anInstance = new DemoClass();
console.log(anInstance.FooProperty);
anInstance.FooProperty = 42;
console.log(anInstance.FooProperty);
According to documentation:
The bodies of class declarations and class expressions are executed in
strict mode i.e. constructor, static and prototype methods,
getter and setter functions are executed in strict mode.
In order to keep the real storage for that property as a private variable, you'd have to use an Object API to define the getter and setter in the constructor:
function DemoClass() {
var mFooProperty = 0;
Object.defineProperties(this, {
fooProperty: {
get: function() { return mFooProperty; },
set: function(value) { mFooProperty = value; }
}
});
}
Now when you construct an instance, the instance will appear to have a property called "fooProperty". Referencing the value of the property will invoke the "getter" function, and setting the value calls the "setter":
var d = new DemoClass();
console.log(d.fooProperty); // calls getter 0
d.fooProperty = 3; // calls setter
console.log(d.fooProperty); // 3

JSON stringify ES6 class property with getter/setter

I have a JavaScript ES6 class that has a property set with set and accessed with get functions. It is also a constructor parameter so the class can be instantiated with said property.
class MyClass {
constructor(property) {
this.property = property
}
set property(prop) {
// Some validation etc.
this._property = prop
}
get property() {
return this._property
}
}
I use _property to escape the JS gotcha of using get/set that results in an infinite loop if I set directly to property.
Now I need to stringify an instance of MyClass to send it with a HTTP request. The stringified JSON is an object like:
{
//...
_property:
}
I need the resulting JSON string to preserve property so the service I am sending it to can parse it correctly. I also need property to remain in the constructor because I need to construct instances of MyClass from JSON sent by the service (which is sending objects with property not _property).
How do I get around this? Should I just intercept the MyClass instance before sending it to the HTTP request and mutate _property to property using regex? This seems ugly, but I will be able to keep my current code.
Alternatively I can intercept the JSON being sent to the client from the service and instantiate MyClass with a totally different property name. However this means a different representation of the class either side of the service.
You can use toJSON method to customise the way your class serialises to JSON:
class MyClass {
constructor(property) {
this.property = property
}
set property(prop) {
// Some validation etc.
this._property = prop
}
get property() {
return this._property
}
toJSON() {
return {
property: this.property
}
}
}
If you want to avoid calling toJson, there is another solution using enumerable and writable:
class MyClass {
constructor(property) {
Object.defineProperties(this, {
_property: {writable: true, enumerable: false},
property: {
get: function () { return this._property; },
set: function (property) { this._property = property; },
enumerable: true
}
});
this.property = property;
}
}
I made some adjustments to the script of Alon Bar. Below is a version of the script that works perfectly for me.
toJSON() {
const jsonObj = Object.assign({}, this);
const proto = Object.getPrototypeOf(this);
for (const key of Object.getOwnPropertyNames(proto)) {
const desc = Object.getOwnPropertyDescriptor(proto, key);
const hasGetter = desc && typeof desc.get === 'function';
if (hasGetter) {
jsonObj[key] = this[key];
}
}
return jsonObj;
}
As mentioned by #Amadan you can write your own toJSON method.
Further more, in order to avoid re-updating your method every time you add a property to your class you can use a more generic toJSON implementation.
class MyClass {
get prop1() {
return 'hello';
}
get prop2() {
return 'world';
}
toJSON() {
// start with an empty object (see other alternatives below)
const jsonObj = {};
// add all properties
const proto = Object.getPrototypeOf(this);
for (const key of Object.getOwnPropertyNames(proto)) {
const desc = Object.getOwnPropertyDescriptor(proto, key);
const hasGetter = desc && typeof desc.get === 'function';
if (hasGetter) {
jsonObj[key] = desc.get();
}
}
return jsonObj;
}
}
const instance = new MyClass();
const json = JSON.stringify(instance);
console.log(json); // outputs: {"prop1":"hello","prop2":"world"}
If you want to emit all properties and all fields you can replace const jsonObj = {}; with
const jsonObj = Object.assign({}, this);
Alternatively, if you want to emit all properties and some specific fields you can replace it with
const jsonObj = {
myField: myOtherField
};
Use private fields for internal use.
class PrivateClassFieldTest {
#property;
constructor(value) {
this.property = value;
}
get property() {
return this.#property;
}
set property(value) {
this.#property = value;
}
}
class Test {
constructor(value) {
this.property = value;
}
get property() {
return this._property;
}
set property(value) {
this._property = value;
}
}
class PublicClassFieldTest {
_property;
constructor(value) {
this.property = value;
}
get property() {
return this.property;
}
set property(value) {
this._property = value;
}
}
class PrivateClassFieldTest {
#property;
constructor(value) {
this.property = value;
}
get property() {
return this.#property;
}
set property(value) {
this.#property = value;
}
}
console.log(JSON.stringify(new Test("test")));
console.log(JSON.stringify(new PublicClassFieldTest("test")));
console.log(JSON.stringify(new PrivateClassFieldTest("test")));
I've made an npm module named esserializer to solve such problem: stringify an instance of JavaScript class, so that it can be sent with HTTP request:
// Client side
const ESSerializer = require('esserializer');
const serializedText = ESSerializer.serialize(anInstanceOfMyClass);
// Send HTTP request, with serializedText as data
On service side, use esserializer again to deserialize the data into a perfect copy of anInstanceOfMyClass, with all getter/setter fields (such as property) retained:
// Node.js service side
const deserializedObj = ESSerializer.deserialize(serializedText, [MyClass]);
// deserializedObj is a perfect copy of anInstanceOfMyClass
I ran into the same issue but I have no access to the class construction and I'm not able to add or override the ToJson method
here is the solution that helped me solve it
a simple class with getters and properties
class MyClass {
jack = "yoo"
get prop1() {
return 'hello';
}
get prop2() {
return 'world';
}
}
a class with a child class and also child object with getters
class MyClassB {
constructor() {
this.otherClass = new MyClass()
}
joe = "yoo"
otherObject = {
youplaboum: "yoo",
get propOtherObject() {
return 'propOtherObjectValue';
}
}
get prop1() {
return 'helloClassB';
}
get prop2() {
return 'worldClassB';
}
}
here is the magic recursive function inspired by the ToJSON made by #bits
const objectWithGetters = function (instance) {
const jsonObj = Object.assign({}, instance);
const proto = Object.getPrototypeOf(instance);
for (const key of Object.getOwnPropertyNames(proto)) {
const desc = Object.getOwnPropertyDescriptor(proto, key);
const hasGetter = desc && typeof desc.get === 'function';
if (hasGetter) {
jsonObj[key] = desc.get();
}
}
for (let i in jsonObj) {
let value = jsonObj[i];
if (typeof value === "object" && value.constructor) {
jsonObj[i] = objectWithGetters(value);
}
}
return jsonObj;
}
const instance = new MyClassB();
const jsonObj = objectWithGetters(instance)
console.log(jsonObj)
let json = JSON.parse(jsonObj);
console.log(json)

Categories