0

I am new to Vue 3 and whilst I use Javascript regularly I am not an expert at it. In my Vue 3 project, I found (not on SO) a solution to a particular challenge to deploy Stripe's paymentRequest method. I got the example code to work, but it only works properly when wrapped within this (to me) strange void function construct. However, when wrapped in this construct, I can no longer access variables otherwise available through the 'this' object, so outside the function I can access 'this.myVar' inside I can't.

I found a solution to this but it feels clunky and I am sure there is a better way. The clunky way is to assign any 'this' variables to global javascript variables (within the script tag) just before this construct runs - it works, but doesn't feel the best way by a long stretch. Here is the code in example form...

<script> //section of Vue

var myVar = "";

export default {
  name: 'myVueScreen',
  data() {
    return {
      myVar: "foo",
    },
  }
  methods: {
   myMethod() {

    console.log(this.myVar); //prints 'foo'

    myVar = this.myVar;

    console.log(myVar); //prints 'foo'


    // strange function construct... what is this??
    (function () { 

       console.log(myVar); //prints 'foo'
       console.log(this.myVar); fails with this.myVar undefined

    })(); // I really don't understand the role of the 'extra' ()


   }
  }
}

Can anyone tell me what's actually going on with this (function () {.. construct, why 'this.myVar' is outside scope somehow and therefore failing as undefined, and whether there is a way to pass 'this.myVar' to it without using global JS variables as I currently am... thanks!

BTW, I did find that you can pass variable values into this function as follows, BUT this approach still cannot see 'this.myVar'

So this works...

    (function (bar = "foo") { 

       console.log(bar); //prints 'foo'

...

..and this doesn't, it fails at the first point it tries to read this.myVar:

    (function (bar = this.myVar) { //fails here when reading 'this.myVar'

       console.log(bar); // never reaches this
...
Adrian Harris in London
  • 81
  • 1
  • 8
  • 1
    That construct is an IIFE, an inline-invoked function expression (aka *immediately*-invoked function expression). It creates an anonymous function and then immediately calls it. Because it's a traditional function, `this` within it is set by how it's called, and the way it's called there `this` will be the default value (`undefined` in strict mode, the global object in loose mode). The IIFE doesn't seem to serve any purpose in the code shown, but if you need `this` inside the function to be the same as `this` outside it, you can use an arrow IIFE: `(() => { /*...*/ }())`. – T.J. Crowder Dec 01 '21 at 09:14
  • 1
    Possible duplicate of https://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript . – Estus Flask Dec 01 '21 at 09:16
  • 1
    IIFE serves no good purpose here. As for `this`, this is how `function` functions work, they can have their own context. If this is not needed, use an arrow – Estus Flask Dec 01 '21 at 09:16
  • thank you all - IIFE is exactly what it was - when I discovered what an IIFE was for I realised it was unlikely to be needed in the context (a Stripe paymentrequest which I appreciate was not evident from my code, so unwrapped the function, and then got things to work. It clarified why my this.variables were not working and then in later elements of the Stripe functions (promises, events etc) I was able to infer I needed to change to fat arrow functions to get things working - so in fact there were multiple issues ref reading variables but learning about IIFE cleared the path to resolving all. – Adrian Harris in London Dec 03 '21 at 09:40

0 Answers0