Receiving NaN when passing argument "0" to function

421 views javascript
0

I'm studying the javascript, and I had a result that I did not expect, I do not know where I'm going wrong, follow the testable example below:

const createStore = () => ({
  state: {
    life: 100
  },
  mutations: {
    reduceOneOfLife(state) {
      state.life -= 1;
    },
    reduceValueOfLife(state, valueForReduce) {
      state.life -= valueForReduce;
    }
  },
  getters: {
    currentLife(state) {
      return state.life;
    }
  },
  commit(keyMutation, payload) {
    !payload ? this.mutations[keyMutation](this.state) : this.mutations[keyMutation](this.state, payload);
  },
  get(KeyGetters) {
    return this.getters[KeyGetters](this.state);
  }
});

const store = createStore();

store.mutations.reduceValueOfLife(store.state, 0);
let currentLife = store.get('currentLife');
console.log(currentLife); // -> 100
console.log(currentLife === 100); // -> true

store.commit('reduceValueOfLife', 10);
currentLife = store.get('currentLife');
console.log(currentLife); // -> 90
console.log(currentLife === 100); // -> false

store.commit('reduceValueOfLife', 0);
currentLife = store.get('currentLife');
console.log(currentLife); // -> NaN
console.log(currentLife === 90); // -> false

I expected to get 100 and true in the test store.commit('reduceValueOfLife', 0);....

answered question

hint: !payload is true when payload === 0 (or false, or '' or null or undefined or NaN - I think that's all of them)

@JaromandaX I did not know, thought it was just for 'undefined'. what are all the cases that !payload would happen?

I listed them in the edit :p for the logic you're looking for, I'd suggest (payload === undefined) ? ....

@JaromandaX I just need to check if it's undefined anyway, thank the light. And I do not know, but I think it's a lack of education, the human being gets mad with any little power he receives.

another option is to check if arguments.length < 2

1 Answer

4

Your commit function has:

commit(keyMutation, payload) {
    !payload ? this.mutations[keyMutation](this.state) : this.mutations[keyMutation]    (this.state, payload);
},

That is, the first expression only runs if payload is truthy. But your

store.commit('reduceValueOfLife', 0);

is calling with a falsey payload value, so the following runs:

this.mutations[keyMutation](this.state)

with keyMutation as 'reduceValueOfLife'. So your reduceValueOfLife function

reduceValueOfLife(state, valueForReduce) {
        state.life -= valueForReduce;
        console.log('subtr ' + valueForReduce + ' --- ' + typeof valueForReduce);
}

gets called with valueForReduce as undefined, and subtracting undefined from whatever state.life originally was results in NaN.

Better to check whether payload is undefined, rather than just falsey, and then your the store.get returns a number value, rather than NaN:

commit(keyMutation, payload) {
  if (payload === undefined) this.mutations[keyMutation](this.state)
  else this.mutations[keyMutation](this.state, payload);
},

Another option for your commit, rather than checking whether arguments are defined, is to simply *call the [keyMutation] function with this.state and payload. If commit's payload is undefined, then the second argument passed will be undefined, which is the same behavior you would see if you don't pass a second parameter at all.

commit(keyMutation, payload) {
  this.mutations[keyMutation](this.state, payload);
},

If you want the final currentLife to be 100, after it was reduced to 90 in the second part, then you'll have to call

store.commit('reduceValueOfLife', -10);

in the last part to increment it back up to 100:

const createStore = () => ({
  state: {
    life: 100
  },
  mutations: {
    reduceOneOfLife(state) {
      state.life -= 1;
    },
    reduceValueOfLife(state, valueForReduce) {
      state.life -= valueForReduce;
      console.log('subtr ' + valueForReduce + ' --- ' + typeof valueForReduce);
    }
  },
  getters: {
    currentLife(state) {
      return state.life;
    }
  },
  commit(keyMutation, payload) {
    if (payload === undefined) this.mutations[keyMutation](this.state)
    else this.mutations[keyMutation](this.state, payload);
  },
  get(KeyGetters) {
    return this.getters[KeyGetters](this.state);
  }
});

const store = createStore();

store.mutations.reduceValueOfLife(store.state, 0);
let currentLife = store.get('currentLife');
console.log(currentLife); // -> 100
console.log(currentLife === 100); // -> true

store.commit('reduceValueOfLife', 10);
currentLife = store.get('currentLife');
console.log(currentLife); // -> 90
console.log(currentLife === 100); // -> false

store.commit('reduceValueOfLife', -10);
currentLife = store.get('currentLife');
console.log(currentLife);
console.log(currentLife === 100);

posted this

Have an answer?

JD

Please login first before posting an answer.