Bitwise Operators Part 7

And I’m back! Still with the back pain but, I must move forward! In the part 6 we created the code which will be responsible for create the statuses, and now, we’ll write the part where we set one of this statuses as the current state.

Let’s recap our interface?

export class StateManager {
  set currentState(stateName) {}
 
  get currentState() {}
 
  createState(stateName) {}
 
  createBitwiseOrRule(ruleName, stateArray) {}
 
  getRules() {}
 
  clearAllData() {}
 
  checkRule(ruleName) {}
}

We already coded the method createState(stateName) and now, we’ll code the property set currentState(stateName).

In JavaScript, a setter can be used to execute a function whenever a specified property is attempted to be changed. Setters are most often used in conjunction with getters to create a type of pseudo-property. It is not possible to simultaneously have a setter on a property that holds an actual value.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#Description

Setting our property

So, our code will be very simple:

  • Get all states using the method getKeys();
  • Test to check if there is a state that matches to stateName parameter;
    • If it doesn’t exists, throw an error.
  • Get and parse the state object and, check if the found object is a state;
    • If it doesn’t be a state (can be a rule…), throw an error.
  • Set the retrieved value as the current state. Please note the current state is a const, so, you must set the properties individually.
const currentState = { stateName: '', value: -1 };

[...]

set currentState(stateName) {
  const keys = lsManager.getKeys();
  const i = keys.indexOf(stateName);
  if (i === -1) {
    throw new Error(`There is no state '${stateName}'`);
  }

  const stateObj = lsManager.getObject();
  const state = JSON.parse(stateObj[stateName]);

  if (state.type !== 'state') {
    throw new Error(`The '${stateName}' is not a valid state`);
  }

  console.log('previous state name', currentState);
  currentState.stateName = stateName;
  currentState.value = state.value;
  console.log('current state name', currentState);
}

Let’s test it!

Write this code in the index.js:

import { StateManager } from '../businessLogic/stateManager.js';

const sm = new StateManager();

sm.createState('MyFrstState');
sm.createState('MyScndState');
sm.createState('MyThrdState');

sm.currentState = 'MyFrstState';
sm.currentState = 'thisIsAnError';

Nothe, at the line 9, we’ve defined as currentState the ‘MyFrstState”and, at the line 10, we’ve tried to set an invalid state, and the application throw an error.

Run and look at the browser console:

The set currentState logs

Note the stateManager.js line 28, when we log the previous state and the line 31, where we log the currentState. At the lines 29 and 30, we setup the new state.

Setting up a new state

Immediately after setting the new state, we tried to set an invalid state and an error was thrown (stateManager.js, line 18).

Throwing an error

This way we can ensure our code is setting up a state without errors!

Getting out property

Sometimes it is desirable to allow access to a property that returns a dynamically computed value, or you may want to reflect the status of an internal variable without requiring the use of explicit method calls. In JavaScript, this can be accomplished with the use of a getter. It is not possible to simultaneously have a getter bound to a property and have that property actually hold a value, although it is possible to use a getter and a setter in conjunction to create a type of pseudo-property.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#Description

The code? Super easy!

get currentState() {
  return currentState;
}

Let’s test it again!

To get the property value is also straight forward!

import { StateManager } from '../businessLogic/stateManager.js';

const sm = new StateManager();

sm.createState('MyFrstState');
sm.createState('MyScndState');
sm.createState('MyThrdState');

sm.currentState = 'MyFrstState';

console.log('The current state:', sm.currentState);

Run the application and you’ll see:

Getting the value of a property

Here an important reminder: remember clear the browser data if you get this error:

The error

To do this, follow these steps:

  1. Go to Application Tab;
  2. Click on the Clear Storage at the left menu;
  3. Click on the button Clear site data.
Clearing the local Storage

In the next steps, we’ll create a method to clear the data, but, at the moment, you must clear it manually.

Stay tunned and Happy Coding!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s