double NOT operator in Javascript Confusion (using it inside Vuejs instance)

Question

I'm using Vue2 inside HTML.

Could anyone explains why isNameSet variable is undefined whereas it is set to !!name, and since name is a string (name: "yahya") and so !!name it is converted to true, so isNameSet should be true, right !?

Is it Vuejs problem, or what exactly ?!

Code :

<body>
<div id="my-id">
    <h1> Welcome {{ name }} </h1>
    <h2> {{ '!name : ' + !name }} </h2>
    <h2> {{ '!!name : ' + !!name }} </h2>
    <h2> {{ 'isNameSet: ' + isNameSet }} </h2>
    <h3 v-text="isNameSet ? 'Your name is set!' : 'Please, Set a name !' " >  </h3>
    <h3 v-text="!!name ? 'Your name is set!' : 'Please, Set a name !' " >  </h3>
</div>

<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: "#my-id",
        data: {
            name: "yahya",
            isNameSet: !!name
        },
    })
    console.log("typeof name      : ", typeof name)
    console.log("typeof isNameSet : ", typeof isNameSet)
</script>

Please post code, data, and results as text, not screenshots. http://idownvotedbecau.se/imageofcode — Barmar, Sep 30 '22 at 20:41
`name` and `isNameSet` are not variables, they're properties of the `vm` object. — Barmar, Sep 30 '22 at 20:42
So we cannot set the value of a property based on another property of the same object ?! — Yahya Rechaki, Sep 30 '22 at 20:55
Not a full dupe since it's primarily Vue question, but as for JS part, https://stackoverflow.com/questions/4616202/self-references-in-object-literals-initializers — Estus Flask, Sep 30 '22 at 21:12

captainskippah · Accepted Answer · 2022-10-12T16:28:04.420

3

The way you are accessing it is how you would if it is a variable.

Even if you do access it like an object i.e

let obj = {
  a: "this is A",
  b: obj.a
}

it won't work.

You are currently defining what obj is. How can you get a value you are currently trying to define?

That's just like doing the following:

let a = a

You can however just initialize first and set right after

let obj = { a: "this is A" }
obj.b = obj.a

or a getter which may/may not be the right answer

let obj = {
  a: "this is A",

  get b() {
    return this.a
  }
}

That will permanently reflect value of obj.a and not just on initialization.

If you're using vue, i suggest just sticking with computed.

edited Oct 12 '22 at 16:28

answered Sep 30 '22 at 21:06

captainskippah

1,350
8
16

yes, this is exactly what I was looking for, `const person = { firstname: "yahya", booleanValue: !!person.firstname }` this gave **Cannot access 'person' before initialization**. Thank you. – Yahya Rechaki Sep 30 '22 at 21:09
updated the answer to include an alternative – captainskippah Sep 30 '22 at 21:12

score 2 · Answer 2 · answered Sep 30 '22 at 20:48

2

data must be a function that return object:

data() {
  return {
    name: "yahay",
  }
}

and you can access data property from for example computed property:

computed: {
  isNameSet() {
    return !!this.name
  }
}

answered Sep 30 '22 at 20:48

Nikola Pavicevic

21,952
9
25
46

yes this makes sense to me. But the question still there, why is that ?! why we cannot set the value of a property based on another property of the same object ? is it because the object is not yet initialized ?! – Yahya Rechaki Sep 30 '22 at 21:00

double NOT operator in Javascript Confusion (using it inside Vuejs instance)

2 Answers2