League of Extraordinary FoundryVTT DevelopersLebombJames

function vs method

Anyone know of a good guide that explains the difference between a function and a method? I don't really understand when one should be used over another since, if I'm not mistaken, they're both functions at a base level.

Calego•973d ago

I don't know of any guides about this (also am interested if someone finds one), but I can answer your question by saying the words "Function" and "method" are used pretty interchangably in the javascript ecocsytem. You could argue "method" refers to a "function which belongs to something (e.g. a class or other object)". But in the end all methods are functions, though with the above argument not all functions are methods.

LebombJames•973d ago

You could argue "method" refers to a "function which belongs to something (e.g. a class or other object)".

This was my understanding, although I didn't think it could be that simple (nothing in programming is!) The main thing that kinda threw me off was args in relations to methods, I may have just not searched enough but can you have a method with args? Something like thing.method(arg1, arg2)?

Calego•973d ago

Yep So in your case thing might look like this:

const thing = {
  method: function (arg1, arg2) { ... }
}

const thing = {
  method: function (arg1, arg2) { ... }
}

which could just as easily be written like this:

function someArbitraryName (arg1, arg2) { ... }

const thing = {
  method: someArbitraryName
}

function someArbitraryName (arg1, arg2) { ... }

const thing = {
  method: someArbitraryName
}

For like 99.99999% of use cases those are identical. Where 'method' really comes into play is with classes and this.

// capitalize first letter of a class is convention
class Thing {
  method(arg1, arg2) {
    this.otherMethod();
  }

  otherMethod() { ... }
}

// capitalize first letter of a class is convention
class Thing {
  method(arg1, arg2) {
    this.otherMethod();
  }

  otherMethod() { ... }
}

is different from the following:

function someArtitraryName (arg1, arg2) {
  this.otherMethod();
}

class Thing {
  method = someArbitraryName // no idea if this works tbh
  
  otherMethod() {...}
}

function someArtitraryName (arg1, arg2) {
  this.otherMethod();
}

class Thing {
  method = someArbitraryName // no idea if this works tbh
  
  otherMethod() {...}
}

(i'm like 60% sure about that, this is confusing af and I work professionally in JS-land) A general rule of thumb I follow is: "If this ever matters, you should restructure your code so that it no longer matters" 😅

LebombJames•973d ago

This sounds like great advice! So this in the first example just points to the object/class the method is in? So is this.otherMethod() effectively method.otherMethod() or Thing.otherMethod()?

Calego•973d ago

I get better every time I explain this give me a sec this in the first example is 'effectively'* Thing.otherMethod() * big caveat. this is "this instance of Thing", where the syntax Thing.otherMethod would call a static method named otherMethod on that class.

class Thing {
  // non-static properties
  CONST = 'some string';

  foo() {
    console.log('non-static', this.CONST);
  }
  bar() {
    this.foo(); // should log "non-static some string"
  }

  // static properties
  static CONST = 'some other string';

  static foo() {
    console.log('static', this.CONST);
  }

  static bar() {
    this.foo(); // should log "static some other string"
  }
}

// ...

Thing.bar(); // calls the `static bar`

new Thing().bar(); // calls the `non-static bar`

class Thing {
  // non-static properties
  CONST = 'some string';

  foo() {
    console.log('non-static', this.CONST);
  }
  bar() {
    this.foo(); // should log "non-static some string"
  }

  // static properties
  static CONST = 'some other string';

  static foo() {
    console.log('static', this.CONST);
  }

  static bar() {
    this.foo(); // should log "static some other string"
  }
}

// ...

Thing.bar(); // calls the `static bar`

new Thing().bar(); // calls the `non-static bar`

A method could be defined as a function which is a 'property' of another .... thing. In this case a class. confidence hovering around 80% for that example I've never tried having the same named things in a class but some static and some not

LebombJames•973d ago

OK, I've wrapped my head around that... just about. The only thing I don't get is why Thing.bar() and new Thing().bar() call different things. My understanding is that () is used on classes for constructors? I think I'm a bit out of my depth here 😅

Calego•973d ago

gonna be honest that's the part I'm not super confident about. it might be that both call the static bar new Thing() instantiates the class. Way to think about that is "Thing" may be a generic template, but when you instantiate it you get one unique thing. We're pretty far off course from your original question and firmly in the weeds of "Object oriented javascript". I do know of a good walkthrough of that topic: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS I want to stress though that you can get by perfectly fine without a deep understanding of all the nuance here. (I certainly do lol)

LebombJames•973d ago

I imagine you can, but I'm very much someone who learns how something works by knowing all the moving parts, and then forming my own mental "map" of how it all works. I'll take a look at that guide though, seems useful. Thanks for your help!

LTL

Leo The League Lion•973d ago

@lebombjames1 gave LeaguePoints™ to @calego (#1 • 1175)

Unknown User•969d ago

League of Extraordinary FoundryVTT Developers Join

4KMembers

View on Discord

Want results from more Discord servers?

Add your server

Active Effect HelpAnd it should be the actual ActiveEffect document for the effect, not just the id. I don't have the TOL JEs@badgerwerks I haven't had a chance to poke around in TOB/BoL yet, but I wanted to ask how you did t CI 2 minute windowAlright, I've got a Gitlab CI pipeline I'm reasonably pleased with as a result of yesterday's effort GitLab CI PipelinesToday's project is Gitlab CI. Wow me with your pipelines if you got em.Storybook Shennanegins@wyrmisis I have a headcannon for you, one who also uses Storybook. _What if_ we could load foundry jsxDammit I want this...react librarySo far I've seen Vue 2, Vue 3, Alpine, and Svelte pulled into Foundry. No one has yet been crazy eno web componentsA comment @n1xx1 made over in #development-basics (https://discord.com/channels/732325252788387980/7 UI element JS Classeshttps://discord.com/channels/732325252788387980/734922093967310910/882979923483037696 @wyrmisis > I mid-milestone ping feedback@dnd5e **No Action Required** Wanted to ping you to make you aware that the 1.5.0 milestone is >50%Hot ReloadingIs there a way to do something like hot module reloading/live reloading on change for Foundry?Tagger Code ReviewWould anyone be keen to code review Tagger? I'd like to git better 😄 https://github.com/Haxxer/Foun socket woesnot the socket firing preUpdateSo for some reason ItemPF#_preUpdate changes aren't sticking.. what is PF1 doing that prevents this?mergeObject`mergeObject` is a beast of a function which lets you smash two objects together and that options ar select in sheetAlso, is the data actually saved on the actor? You can inspect the data in the console opened with F IC 5e DocsI'm not looking to ping about this but for anyone who sees this: I'm interested to know if anyone he custom hud elementMaybe I'm missing something simple here. I'm making my own custom hud element (NOT based on a Foundr Cover@badgerwerks how does the cover application for 5e helpers work? I know you do black magic to calcul Gitpod WorkflowHas anyone figured out a codespaces workflow?

Gaming

Programming

function vs method