true/false vs int in JavaScript (unexpected behavior)

Question

I'am kind of new to javascript and today I was working on a function that basically toggles a value and displays it as alert but I stumbled across a weird behavior of JavaScript relating to true/false and 0/1.

The following code , when user clicks on toggle anchor link, it doesn't seem to toggle the value and the alert always gives "true" (which i thought should happen):

document.body.innerHTML = '<a href="#" id="toggle"> toggle </a>'+ document.body.innerHTML;
function f() {
    this.status = true;
    var btn = document.getElementById("toggle")
    btn.addEventListener("click", () => {
        if (this.status == true) {
             alert(this.status)
            this.status = false;
        } else {
            alert(this.status)
            this.status = true;
        }

     }, false)
}

f()

But if I use 0 and 1 instead of true/false the code works for some reason.

document.body.innerHTML = '<a href="#" id="toggle"> toggle </a>' +document.body.innerHTML;

function f() {
    this.status = 1;
    var btn = document.getElementById("toggle")
    btn.addEventListener("click",()=>{
    if(this.status==1){
         alert(this.status)
         this.status = 0;
    }else{
        alert(this.status)
        this.status = 1;
      }

     },false)
 }

 f()

I have no idea what's going on here, Is this because of this pointer i am using in the function or something?.

JavaScript has a more complex notion of equality than you might be familiar with in other languages, but it is fortunately a very well-understood notion; check out [this article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness) for an introduction — Hamms, Sep 30 '17 at 00:03

Isac · Accepted Answer · 2017-09-30T01:00:25.550

The problem is that your function f is called without new so the this refers to the window object, which already has astatus property with its own meaning.

You can see this if you print its type:

function f() {
    this.status = true;
    console.log(typeof this.status);
 }

 f()

Note how the result is string instead of the expected boolean.

But if you name it differently:

function f() {
    this.myprop = true;
    console.log(typeof this.myprop);
 }

 f()

It yields the correct type.

So to make it work you need only to change its name. But the if else logic you have to invert the boolean can be turned into a !(not), which simplifies the code a lot:

document.body.innerHTML = '<a href="#" id="toggle"> toggle </a>' + document.body.innerHTML;

function f() {
  this.myStatus = true;
  var btn = document.getElementById("toggle");
  
  btn.addEventListener("click", () => {
    this.myStatus = !this.myStatus; //here the value is inverted only with the ! (not)
    console.log(this.myStatus);
  }, false);
}

f();

But using the window object is discouraged, for reasons much like the one you were experiencing, and the myStatus property is still being stored there.

You can improve the solution a bit more:

document.body.innerHTML = '<a href="#" id="toggle"> toggle </a>' + document.body.innerHTML;

function f() {
  let myStatus = true;
  var btn = document.getElementById("toggle");
  
  btn.addEventListener("click", () => {
    myStatus = !myStatus; //here the value is inverted only with the ! (not)
    console.log(myStatus);
  }, false);
}

f();

Also, don't forget to finish the statements with the semicolons, i noticed that you had almost none of them.

Worth noting that you're still adding myStatus to the window object, which isn't necessarily a great idea unless you're doing it on purpose and can articulate why you want it there. — Ben, Sep 30 '17 at 00:32
on the side note what is the difference between `let` and `var` . In the last snippet why did you used `let` for myStatus and `var` for btn ? — Arvind M., Sep 30 '17 at 18:01
@rov.er `let` guarantees you scope, while `var` doesn't. Also it works better in closures and other minor details. Check the documentation [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) — Isac, Sep 30 '17 at 18:12

score 0 · Answer 2 · answered Sep 30 '17 at 00:15

Since you're new to JavaScript you probably haven't heard, but you should know when to use === instead of == (hint: always).

In a nutshell, because JavaScript is weakly/un-typed it can be difficult to know if you're actually comparing two of the same thing (numbers) or two different things (number and object):

new Number(10) == 10 // true
new Number(10) === 10 // false

Because:

typeof Number(10) // returns number
typeof 10 // returns number
typeof new Number(10) // returns object

^ Above example from https://coderwall.com/p/bqurhg/why-always-use-in-javascript

@DragonKnight can you please elaborate? – Arvind M. Sep 30 '17 at 18:08 — Arvind M., Sep 30 '17 at 18:08

score 0 · Answer 3 · answered Sep 30 '17 at 00:36

Other people have posted some good responses, but here's my two cents.

You can initialize a local variable in your function that will initialize a value and then alternate on that value when the button is clicked. Your use of this notation does not seem to be necessary here.

document.body.innerHTML = '<a href="#" id="toggle"> toggle </a>'+ document.body.innerHTML;
function f() {
    var status = true;
    var btn = document.getElementById("toggle")
    btn.addEventListener("click", () => {
        if (status === true) {
            alert(status)
            status = false;
        } else {
            alert(status)
            status = true;
        }

     }, false);
}

f();

When using this, always know what you are referring to. As Isac pointed out, your this referred to the document window, which seems to have been an issue.

Codepen:

https://codepen.io/foozie3moons/pen/gGRBxZ?editors=0010

score -1 · Answer 4 · answered Sep 30 '17 at 00:04

document.body.innerHTML = '<a href="#" id="toggle"> toggle </a>'+ document.body.innerHTML;
function f() {
    let status = true;
    let btn = document.getElementById("toggle");
    btn.addEventListener("click", () => {
        if (status === true) {
            alert(status);
            status = false;
        } else {
            alert(status);
            status = true;
        }

    }, false)
}

f();

true/false vs int in JavaScript (unexpected behavior)

4 Answers4