How to write non-arrow function as argument

Question

Yes, I already know 9028924 people will mark this as duplicate question within 8 seconds of posting. Believe me... I've googled for close to an hour now, or I wouldn't be asking.

  methods: {
    stylizeHeader: debounce(event => {
      if (event.target.scrollTop <= 1 && !this.scrolled) {
        this.scrolled = true;
        console.log('true');
      } else if (this.scrolled) {
        this.scrolled = false;
        console.log('false');
      }
    }, 20),
  },

I'm using Vue, and all I'm trying to do is access the this property in the debounce function as it relates to the outer scope (a Vue implementation detail). The problem is obviously the arrow function.

I can't find the proper syntax. I've tried every permutation I can think of with () { }

If I use function() { } it works fine, but eslint complains (so I want to follow good up to date conventions).

How do I literally just write it in ES6 so I can access this.

@JaromandaX when I do that ESLint complaints. I'm trying to find the way that they recommend it for "current standards" — Tallboy, Oct 03 '20 at 01:17
yes, debounce returns a function that is passed into something like a scroll event — Tallboy, Oct 03 '20 at 01:18
That is a `vue` specific detail, basically `this` just needs to reference the "outer class" i suppose (I dont know how vue works under the hood). I will just say that if i use `function() { }` it works perfect, its just that ESLint complains... so whatever is the ES6 proper equivalent of writing function() { } in place of that arrow function is what im looking for — Tallboy, Oct 03 '20 at 01:21
this not a question about bypassing an arrow function, this is a question about binding a function! — Mister Jojo, Oct 03 '20 at 01:27
@Paul fine, specifics aside I figure AirBNB and Google have conventions and they know what theyre doing. Considering I don't know what I'm doing I'll follow their conventions — Tallboy, Oct 03 '20 at 01:29
@JaromandaX hm... that actually works but that seems weird passing a function that I want to be anonymous but being forced to give it a name? Not trying to be picky just trying to understand what zeh hell is expected — Tallboy, Oct 03 '20 at 01:35
The old school way involved storing a specific `this` in a `that` which would be available as a closure in an inner scope. — Paul, Oct 03 '20 at 01:35
giving an *anonymous* function helps debugging - instead of *anonymous* in an error stack trace, you'll see your function name - that's the only benefit that I can see with naming such a function - which would seem to be a *good thing* if you have a large codebase with many people working on it — Jaromanda X, Oct 03 '20 at 01:40
@tony19 - yes, I meant ***naming** an anonymous function helps debugging* — Jaromanda X, Oct 03 '20 at 02:55
Or use the composition API where you no longer have a this in the `setup()` but either access to `props` or any other variable/method defined in there — Thomas, Oct 05 '20 at 10:38

score 2 · Accepted Answer · answered Oct 03 '20 at 03:21

If function() {} works, but the linter is complaining about the funciton having no name, then simply give the function a name

methods: {
  stylizeHeader: debounce(function debouncedStylizeHeader(event) {
    // ..... your code
  }, 20),
},

The purpose of naming such a function is purely for debugging purposes - an error stack trace will include the name of that function rather than anonymous function (or similar) which is useful if you have a large codebase with many people working on it

Perhaps the linter rules you are using are designed for such an environment (i.e. large codebase) and the rule is there to assist in debugging errors

There's no reason not to do it, it's good practice (in my opinion)

score 0 · Answer 2 · answered Oct 03 '20 at 04:02

I am not a Vuejs developer, but I use vanilla JavaScript and NodeJS.

While I am struggling to understand your code I suppose this what you meant to write. It seems your function has two names: stylizeHeader: denounce. However, the methods part of Vue accepts functions not really object kind of definition. You have to choose one name.

Try this changing this

  methods: {
    stylizeHeader: debounce(event => {
      if (event.target.scrollTop <= 1 && !this.scrolled) {
        this.scrolled = true;
        console.log('true');
      } else if (this.scrolled) {
        this.scrolled = false;
        console.log('false');
      }
    }, 20),
  },

To

  methods: {
    stylizeHeader (event) {
    // You can now set timer/interval here 
    // which in turn will hold rest of the code below
      if (event.target.scrollTop <= 1 && !this.scrolled) {
        this.scrolled = true;
        console.log('true');
      } else if (this.scrolled) {
        this.scrolled = false;
        console.log('false');
      }
    },
  },

OR

  methods: {
    debounce (event) {
    // You can now set timer/interval here 
    // which in turn will hold rest of the code below
      if (event.target.scrollTop <= 1 && !this.scrolled) {
        this.scrolled = true;
        console.log('true');
      } else if (this.scrolled) {
        this.scrolled = false;
        console.log('false');
      }
    },
  },

However, if you implementation is a closure why no do this:

 methods: {
  stylizeHeader (event) {
   debounce() {
    //code
   }
  }
}

Hey, debounce is a library i am importing, and it returns a function (with the purpose of debouncing it) — Tallboy, Oct 03 '20 at 06:03

How to write non-arrow function as argument

2 Answers2