JS syntax made easy: literal object vs. class syntax

There are so many ways to define a method inside a class or a literal object. They are similar enough that you will mix them up. But they're not the same. Just because a class is a kind of object doesn't mean they'll behave the same! The rules aren't so intuitive. As a solution to that problem, you can copy and paste syntax that works, but it's nice to be able to understand the methods behind the madness. When you understand the rules, things get exponentially easier. I've spent some considerable time testing out what works and what doesn't, as well as the pattern behind these rules. Here I make them as easy to understand as possible for you .

I outlined all the different ways you could do them. If you print them out and compare them side-to-side, you start seeing the similarities and the few key differences. They will start to not seem so intimidating.

---

LITERAL OBJECTS
Literal objects does not use equal signs!
You define the method as if the method is any other property in the object, ( aka with the colon :)
(Shorthand is an exception)

Longhand, non-arrow

let myObj = {
property1: "foo",
property2: "bar",
methodNameHere: function(arg){ return `hi ${arg}` }
}

Longhand, arrow

let myObj = { 
property1: "foo",
property2: "bar",
methodNameHere: (arg) => { return `hi ${arg}` }
 }

Shorthand, only available for non-arrow methods

let myObj = { 
property1: "foo",
property2: "bar",
methodNameHere(arg) { return `hi ${arg}` } 
}

To test:
Define the object with one of the object syntaxes above
Then,
myObj.methodNameHere("Steve")

---

CLASS
Class does not use any colon, instead you will be using the equal sign =
There are two ways:

1. Inside the constructor function, or
2. Outside the constructor, a modern JS feature, the most familiar way we do methods

Inside constructor, Long hand, non-arrow

class Classnamehere {

constructor() {
        this.property1 = "foo";
        this.property2 = "bar";
        this.methodNameHere = function(arg) { return `hi ${arg}` } 
    }
}

Inside constructor, Long hand, arrow

class Classnamehere {

    constructor() { 
    this.property1 = "foo";
    this.property2 = "bar";
    this. methodNameHere = (arg) => { return `hi ${arg}`}
    }
 }

Inside constructor approach has no shorthand, it seems.

Outside constructor, Long hand, non-arrow

class Classnamehere {
    property1 = "foo";
    property2 = "bar";
    methodNameHere = function(arg) { return `hi ${arg}`} 
}

Outside constructor, Long hand, arrow

class Classnamehere {
    property1 = "foo";
    property2 = "bar";
    methodNameHere = (arg) => { return `hi ${arg}`} 
}

Outside constructor, Shorthand , for non-arrow only

class Classnamehere {
    property1 = "foo";
    property2 = "bar";
    methodNameHere(arg)  { return `hi ${arg}`} 
}

To test:
Define the class with one of the class syntaxes above
Then,
Let aClassInstance = new Classnamehere()
Then,
aClassInstance.methodNameHere("Steve")
Repeat these 3 steps in this exact order every time you try a new class syntax. don't skip.

---

If you could only remember 3 things:
Literal objects use colon,
Classes use equal sign
Shorthand uses neither and does not allow arrow functions.

A note on React class-based components:
It seems react class syntax works like regular class syntax when it comes to what is VALID syntax that wont cause error
BUT, the "this" variable behaves differently. That's why people tend to use arrow functions to define methods in React class-based components. (Except for constructor, render, lifecycle methods, etc...)