I have the following "Enum" in javascript to indicate the state of my application:
var State = {
STATE_A: 0,
STATE_B: 1,
STATE_C: 2
//...
}
Now, I want each state to have a "sub-state". So for example, STATE_B could be in STATE_B1 or STATE_B2 ...
What would be the best way to structure this? Would I somehow nest an "enum" within the State "enum" ? Thanks
If there is a better way to structure this altogether (other than enums) I'm all ears. Basically I need to be able to set and check the state of my application, and each state can (but not necessary) have a sub-state attached to it which can be set and checked. Even better if the solution allows me to go more than 1 level of nesting deep.
What you're doing isn't really enums. You're using native Javascript objects and just treating them like enums, which is perfectly acceptable when you want an enum-like object in Javascript.
To answer your question, yes, you can totally nest objects:
var State = {
STATE_A: 0,
STATE_B:{
SUBSTATE_1 : "active",
SUBSTATE_2 : "inactive"
},
STATE_C: 2
//...
}
You then just use the dot notation in order to set those values, like
State.State_B.SUBSTATE_2 = "active".
You could use some sort of bit-field if you want:
var State = function() {
// Note this must increment in powers of 2.
var subStates = 8;
var A = 1 << subStates;
var B = 2 << subStates;
var C = 4 << subStates;
var D = 8 << subStates;
return {
// A
// Note this must increment in powers of 2.
STATE_A: A,
STATE_A1: A | 1,
STATE_A2: A | 2,
STATE_A3: A | 4,
STATE_A4: A | 8,
STATE_A5: A | 16
// B
STATE_B: B,
STATE_B1: B | 1,
// C
STATE_C: C,
STATE_C1: C | 1,
STATE_C2: C | 2,
STATE_C3: C | 4,
STATE_C4: C | 8,
// D
STATE_D: D
};
}();
// Set a state.
var x = State.STATE_A1; // Same as State.STATE_A | State.STATE_A1
// Determine if x has root state of A?
if(x & State.STATE_A == State.STATE_A) {
console.log("Root state is A.");
}
else {
console.log("Nope, not root state A.");
}
// Determine if x has sub-state A1?
if(x & State.STATE_A1 == State.STATE_A1) {
console.log("A with Substate 1");
}
So the first 8 bits are reserved for setting the sub-state. You could, of course, increase this as long as the root-state and sub-state can fit inside a 32-bit integer. If you need explanation as to why/how this works (bit-wise operators), let me know.
I guess you want to write something like
if (State.STATE_A === someState) { ... }
You could simply define another layer in your State object like
var State = {
STATE_A : 0
STATE_B : {
B1 : 1,
B2 : 2,
}
};
...
if (State.STATE_B.B1 == someState){...}
Edit: Based on the comments on your question another approach could be this.
//Creates state objects from you json.
function createStates(json) {
var result = {};
for(var key in json) {
result[key] = new State(json[key]);
}
return result;
}
//State class
function State(value) {
//If the state value is an atomic type, we can do a simple comparison.
if (typeof value !== "object") {
this.value = value;
this.check = function(comp){ return value === comp; };
}
// Or else we have more substates and need to check all substates
else if (typeof value === "object") {
this.value = createStates(value);
for(var key in this.value) {
//Allows to access StateA.SubStateA1. Could really mess things up :(
this[key] = this.value[key];
}
this.check = function(comp){
for(var key in this.value) {
if (this.value[key].check(comp) === true){
return true;
}
}
return false;
};
}
};
Now you can call everything with
var stateJson = {
STATE_A : 0,
STATE_B : {
B1 : 1,
B2 : 2
}
};
var states = createStates(stateJson);
alert(states.stateA.check(0)); // Should give true
alert(states.STATE_B.B1.check(1)); // Same here
alert(states.STATE_B.check(1)); //And again because value is valid for one of the substates.
Since JavaScript does not support operator overloading, you cannot directly test for equality of substates using the == operator. The closest you can get is to use the instanceof operator to check if a state is of a given type, for example:
// All these functions are empty because we only need the type and there is no data
function State() {
}
function State_A() {
}
State_A.prototype = new State();
function State_B() {
}
State_B.prototype = new State();
function State_B1() {
}
State_B1.prototype = new State_B();
function State_B2() {
}
State_B2.prototype = new State_B();
And since functions are also objects, you can add your nesting right into the State function:
State.STATE_A = new State_A();
State.STATE_B = new State_B();
State.STATE_B.STATE_B1 = new State_B1();
State.STATE_B.STATE_B2 = new State_B2();
And check its type:
var myState = State.STATE_B1;
myState instanceof State // true
myState instanceof State_A // false
myState instanceof State_B // true
myState instanceof State_B1 // true
function State () {
this.superState = null;
}
State.prototype = {
constructor: State
, mkSubState () {
var subState = new State ();
subState.superState = this;
return subState;
}
, isSubStateOf (superState) {
var state = this;
while (state !== null) {
if (this.superState === superState) {
return true;
}
state = this.superState;
}
return false;
}
, isSuperStateOf (subState) {
while (subState !== null) {
if (subState.superState === this) {
return true;
}
subState = subState.superState;
}
return false;
}
};
var States = {};
States.A = new State ();
States.A1 = States.A.mkSubState ();
States.A2 = States.A1.mkSubState ();
States.B = new State ();
States.B1 = States.B.mkSubState ();
States.B2 = States.B1.mkSubState ();
States.B2.isSubStateOf (B); // true
States.B2.isSubStateOf (B1); // true
States.B2.isSubStateOf (B2); // false
States.B2.isSubStateOf (A); // false
States.B2.isSubStateOf (A1); // false
States.B2.isSubStateOf (A2); // false
Related
I want create new number object with own properties from Number.
But when assign a number value to my variable, my variable turn to Number(primitive wrapper object).and loss own properties.How can I prevent this?
Example
class Fnumber extends Number {
value = 0;
[Symbol.toPrimitive](hint) {
if (hint === 'object') {
return this;
}
return this.value;
};
//I don't want use Number.prototype.add method because this effect all Number values.
add = function(...v) {
this.value += Array.prototype.slice.call(arguments).reduce((o, v) => o + v)
}
}
var nmbr = new Fnumber();
nmbr.add(4, 2, 4);
console.log(nmbr); //return a Object
console.log(nmbr + 4); //return 14 is number
nmbr = 14;
console.log(nmbr); //return not a Object its Primative number value
console.log(nmbr + 4); //return 14 a number
nmbr.add(4, 2, 4); //raise error.
When doing nmbr = 14 you assign 14 to nmbr, you are not changing the nmbr.value, you are overwriting the object. Instead call add and use nmbr.value when needed.
class Fnumber extends Number {
value = 0;
add(...v) {
this.value += Array.prototype.slice.call(arguments).reduce((o, v) => o + v)
}
}
var nmbr = new Fnumber();
nmbr.add(4, 2, 4);
console.log(nmbr.value);
nmbr.add(5);
console.log(nmbr.value);
nmbr.value = 25; // assign a value to nmbr.value
console.log(nmbr.value);
If you are not planning on reassigning the object, a good practice is to use const instead of var, see the error below.
class Fnumber extends Number {};
const nmbr = new Fnumber();
nmbr = 14;
I found the solution indirectly.
class Fnumber extends Number {
value = 0;
add(...v) {
this.value += Array.prototype.slice.call(arguments).reduce((o, v) => o + v)
}
}
//temğrary variable description
var _nmbr=new Fnumber();
//Define nmbr variable in global scobe
Object.defineProperty(window,"nmbr",{
enumerable: true,
configurable: true,
get() { return _nmbr; },
set(val) { if (typeof val=="number")_nmbr.value=val; }
});
nmbr=4;
console.log(nmbr+2);//output 6
//still nmbr variable is object,because assigned value to
_nmbr.value with above set method
nmbr.add(4, 2, 4);
console.log(nmbr+2);//output 16
Can I create a method usable by each property of an object?
class myClass {
constructor() {
this.a = 1;
this.b = 2;
this.c = 3;
}
raise(x) {
this += x; //I know this doesn't work. I want the raise function to use
//the value of its caller and increase it by x
};
}
What I want to achieve is being able to call the raise method on any object property via
obj1 = new myClass();
obj1.a.raise(1); //a = 2
obj1.b.raise(3); //b = 5
obj1.c.raise(100); //c = 103
So I want to be able to use this syntax: object.property.method()
I tried creating raise on the class constructor, the class prototype or the Object prototype. I also couldn't find any mention of this elsewhere.
It would be impossible for obj.a to return a number, while also being able to call obj.a.raise to modify it.
If you're open to a small tweak, you could retrieve the value via a method called something like .get, while the underlying value is stored and reassigned in the _a property:
class myClass {
constructor() {
this._a = 1;
this.a = { raise: num => this._a += num, get: () => this._a };
}
}
const obj = new myClass();
obj.a.raise(1); //a = 2
console.log(obj.a.get());
Using ES6 you can do it easily. You may not need complex solution!
Sample is given below.
2nd Solution, to use composition.
class PriceList {
constructor(price, amount) {
this._price = price;
this._amount = amount;
}
get price() {
return this._price;
}
set price(p) {
this._price += p; // validation could be checked here such as only allowing non numerical values
}
get amount() {
return this._amount;
}
set amount(p) {
this._amount += p; // validation could be checked here such as only allowing non numerical values
}
}
const priceList = new PriceList(1, 10);
console.log(priceList); // PriceList { _price: 1, _amount: 10 }
priceList.amount = 10;
priceList.price = 100;
console.log(priceList); // PriceList { _price: 101, _amount: 20 }
class Value {
constructor(v) {
this._val = v;
}
get val() {
return this._val;
}
set(v) {
this._val = v;
}
raise(m) {
this._val += m;
}
}
class PriceList2 {
constructor(price, amount) {
this.amount = new Value(amount);
this.price = new Value(price);
}
}
const priceList2 = new PriceList2(1, 10);
console.log(priceList2);
priceList2.amount.raise(10);
priceList2.price.raise(100);
console.log(priceList2.amount.val); // 20
console.log(priceList2.price.val); // 101
priceList2.amount.val = 1
priceList2.amount.raise(10);
console.log(priceList2.amount.val); //30
.as-console-row {color: blue!important}
For literally all answers (except this one), you need to run a function to get the value, here it's more simplified.
class myClass {
constructor() {
this.a = new Number(1);
this.b = new Number(2);
this.c = new Number(3);
for (let p in this) {
this[p].raise = x => {
let fn = this[p].raise;
this[p] = new Number(x + this[p]);
this[p].raise = fn;
}
}
}
}
let m = new myClass();
m.a.raise(15);
m.a.raise(15);
// A = 1 + 15 + 15 = 31
m.b.raise(10);
m.b.raise(20);
// B = 2 + 10 + 20 = 32
m.c.raise(17);
m.c.raise(13);
// C = 3 + 17 + 13 = 33
console.log(m.a + 1, m.b + 1, m.c + 1) // 32 33 34
// logging just m.a, m.b, m.c will get you an object with a raise function
// only in stack overflow (or maybe other fake consoles), but the browser
// console will definitely work and give you a Number object
Can we use getters and setters without defining a method for a member?
For example, transform this
class int {
set value(val) {
this._value = val | 0; // Truncate
}
get value() {
return this._value;
}
}
var x = new int();
x.value = 5 / 2;
console.log(x.value); // shows 2 instead of 2.5
to something like this:
class int {
set (val) {
this = val | 0; // Truncate
}
get () {
return this;
}
}
var x = new int();
x = 5 / 2;
console.log(x); // shows 2 instead of 2.5
There's no operation you can tap into for when the value of a variable (x in your case) is replaced with a new value. That's just not something JavaScript has. You can't do that even with a Proxy.
Your first definition of int is probably about as close as you're going to get.
People have tried various ways of getting primitive-like things like your int. None of them is really satisfactory. For instance, this is a not-uncommon attempt:
class Int {
constructor(value) {
Object.defineProperty(this, "value", {
value: value | 0,
enumerable: true
});
}
set(value) {
return new this.constructor[Symbol.species](value);
}
valueOf() {
return this.value;
}
toString() {
return this.value; // Even though it's not a string
}
static get [Symbol.species]() {
return this;
}
}
then:
let n = new Int(5);
console.log(`n = ${n}`); // n = 5
n = n.set(n / 2);
console.log(`n = ${n}`); // n = 2
but as soon as you do something that doesn't coerce to a primitive, like:
console.log(n);
you see the object-ness of it. You have to do:
console.log(+n);
which makes it a pretty big footgun, though the immutability helps with things like let m = n..
Example:
class Int {
constructor(value) {
Object.defineProperty(this, "value", {
value: value | 0,
enumerable: true
});
}
set(value) {
return new this.constructor[Symbol.species](value);
}
valueOf() {
return this.value;
}
toString() {
return this.value; // Even though it's not a string
}
static get [Symbol.species]() {
return this;
}
}
let n = new Int(5);
console.log(`n = ${n}`); // n = 5
n = n.set(n / 2);
console.log(`n = ${n}`); // n = 2
// But
console.log(n); // (object representation of it)
let add = (a = 0,b = 0) => {
return a+b;
};
console.log(add(5,2));
What I expected was: 0
and the result is: 7
If I pass a = 5 and b = 2 then in the function add, a and b are already assigned 0, so it should return 0. Why 7?
let add = (a = 0,b = 0) => {
return a+b;
};
SO your function will be evaluated something like this
let add = (a, b) => {
a = (typeof(a) !== undefined) ? a : 0;
b = (typeof(b) !== undefined) ? b : 0;
return a + b; //your function code start from here.
}
So if you pass add(5, 2), condition (typeof(a) !== undefined) will be true and 5 will be assign to a and same for b, but if you pass add(5) then condtion for a become ttrue and a is assign as 5 but condition for b is false so b will be assign as 0.
Default parameters are overwritten if provided by the call. Otherwise they would be useless, as you could never change them.
That is the whole point of default values: if you do not provide values when calling the function, the defaults are used, otherwise the values passed in the function call are used.
let add = (a = 2, b = 1) => {
return a + b;
};
console.log(add(5, 2)); // no default will be used
console.log(add(5)); // only second default will be used
console.log(add(undefined, 4)); // only first default will be used
In any language, the default value is only used when there is no other value assigned.
So, whenever you assigned any value to the variable it changes the value.
Same is going with your concept
let add = (a = 0,b = 0) => {
return a+b;
};
console.log(add(5,2)); // it will return 7
console.log(add()); // it will return 0
The question is at the title, but first please look at this code:
function number(a) {
return {
add: function(b) {
result = a + b;
return this;
}, substract(b) {
result = a - b;
return this;
}
}
These code above are simple example of chain rule. I retun an object so I can do it continuously:
number(2).add(5).add(3 * 12).substract(Math.random());
My problem is, I have to retun an object to keep the function chainable. I'd like to immitate the chain rule, but to return specific value. For instance number(2).add(3) would return 5.
Any suggestion is highly appreciated.
Thanks everyone in advanced.
[x]
One way to make a numeric value like 5 "chainable" is to define a method on the appropriate prototype object, such as Number.prototype. For instance:
Number.prototype.add = function (n) {
return this + n
}
(5).add(2) // 7
5.0.add(2) // 7
5..add(2) // 7
((5).add(2) + 1).add(34) // okay! 42
The syntax above is funny because 5.add(2) is invalid: JavaScript is expecting a number (or "nothing") after 5.. Because this is a global side-effect (it will affect all numbers), care should be taken to avoid unexpected interactions.
The only other Another way to make "5" chain-able is to create a new Number object (5 is not a real Number instance, even though it uses Number.prototype!) and then copy over required methods. (I used to think this was the only other way, but see KooiInc's answer -- however, I am not sure how well-defined returning a non-string from toString is.)
function ops(a) {
return {
add: function(b) {
var res = new Number(a + b) // important!
var op = ops(res)
res.add = op.add // copy over singletons
return res
}
}
}
function number(a) {
return ops(a)
}
number(5).add(2) + 1 // 8
(number(5).add(2) + 1).add(34) // error! add is not a function
However, keep in mind this introduces subtle issues:
typeof 5 // number
typeof new Number(5) // object
5 instanceof Number // false
new Number(5) instanceof Number // true
And this is why we need a Number (search SO for "primitives" in JavaScript):
x = 5
x.foo = "bar"
x.foo // undefined
Furthermore, in conjunction with cwolves' answer, consider:
function number (n) {
if (this === window) { // or perhaps !(this instanceof number)
return new number(n)
} else {
this.value = n
}
}
Then both new number(2) and both number(2) will evaluate to a new number object.
number(2).value // 2
new number(2).value // 2
number(2) instanceof number // true
new number(2) instanceof number // true
Happy coding.
You have two options. You can return new objects:
function number(a){
return this instanceof number ? (this.value = a, this) : new number(a);
}
number.prototype = {
valueOf : function(){
return this.value;
},
add : function(b){
return new number(this.val + b);
},
subtract : function(b){
return new number(this.val - b);
}
};
or you can modify the existing one (mostly the same code as above, this is different):
add : function(b){
this.value += b;
return this;
},
The difference is in how they act:
var x = new number(5),
y = x.add(10);
// with first example
// x == 5, y == 15
// with 2nd example
// x == 15, y == 15, x === y
If you define the value as property (this.a) and use toString within the returned Object, you can chain the methods:
function number(a) {
return {
a: Number(a) || 0, //if not a, or a===NaN, default = 0
add: function(b) {
this.a += b;
return this;
},
subtract: function(b){
this.a -= b;
return this;
},
valueOf: function(){
return Number(this.a);
},
toString: this.valueOf
}
}
var n = number(5);
alert(number.add(5).add(2).subtract(2)); //=> 10
alert(number.add(0.5)); //=> 10.5
alert(number(2).add(5).add(3 * 12).subtract(Math.random());
//=> 42.36072297706966