boolean does not change in function JavaScript

Question

I have the following code:

const ships = (length) => {
  isSunk = false
  console.log('BEFORE: ' + isSunk)
  const shipSize = length
  let hits = []
  const hitLocation = location => {
    hits.push(location);
    isSunk = true;
    console.log('INSIDE: ' + isSunk)
  }
  console.log('AFTER: ' + isSunk)
  return {
    isSunk,
    hitLocation,
    hits,
    shipSize
  }
}

const two = ships(2)
two.hitLocation(1)
two.hitLocation(2)
console.log('FINAL: ' + two.isSunk)
console.log('HITS: ' + two.hits)

Is there a reason why isSunk is not saved as true when I call it in the end?

Is it due to the nested functions?

https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language — epascarello, Mar 08 '22 at 18:05
When you set a boolean as a property to an object it saves that state at that moment in time. It does not get updated when you update it inside the function. If you used a proper class with getter and setter, you would not have this issue. — epascarello, Mar 08 '22 at 18:06
@epascarello any idea why `hits` updates then? I edited the snippet `(console.log('HITS: ' + two.hits)`. — A.J, Mar 08 '22 at 18:09
Because: [Is JavaScript a pass-by-reference or pass-by-value language?](https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language) — Andreas, Mar 08 '22 at 18:10

epascarello · Accepted Answer · 2022-03-08T18:16:26.503

When you set the boolean into the object, it is that value. It is not a reference to the variable. So when you change the variable, the value you saved inside of the object that you returned is not updated.

You can use a function to get the value

const ships = (length) => {
  isSunk = false
  console.log('BEFORE: ' + isSunk)
  const shipSize = length
  let hits = []
  const hitLocation = location => {
    hits.push(location);
    isSunk = true;
    console.log('INSIDE: ' + isSunk)
  }
  console.log('AFTER: ' + isSunk)
  return {
    isSunk: () => isSunk,
    hitLocation,
    hits,
    shipSize
  }
}

const two = ships(2)
two.hitLocation(1)
two.hitLocation(2)
console.log('FINAL: ' + two.isSunk())

Other option is to use a class.

class Ship {

    hits = [];
    
    constructor(length) {
        this.shipSize = length;
    }
    
    get isSunk() {
        return this.hits.length === this.shipSize;
    }
    
    hitLocation (location) {
      this.hits.push(location);
      console.log('INSIDE: ' + this.isSunk)
    }
    
}


const two = new Ship(2)
two.hitLocation(1)
two.hitLocation(2)
console.log('FINAL: ' + two.isSunk)

Mushroomator · Answer 2 · 2022-03-08T23:32:07.660

The reason this happens is that isSunk is just a local variable and a value in contrast to hits which is also a local variable but an array and thus just a reference not a value. As you return the object when calling ship() these values and the reference get returned in an object.

Now when you call hitLocation() it uses the local variable hits to add an entry to the array and as the array is just a reference the local variable hits and the hits in the two object have the same reference so they point to the same memory location, thus the update can be seen using the returned object.

On the other hand hitLocation() also modifies the local variable isSunk but as you do not return that and it is not a reference the object stored in variable two is not updated.

The best way to fix this to my mind is using a class instead of a object here. This will be much more concise and clear than returning and/or passing the object you want to perform some action on to a function all the time.

boolean does not change in function JavaScript

2 Answers2