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.

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.

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)?

Yep

So in your case thing might look like this:

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

which could just as easily be written like this:

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() { ... }
}

is different from the following:

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" 😅

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()?

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`

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

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 😅

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)

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!

@LebombJames gave LeaguePoints™ to @Calego (#1 • 1175)