In JavaScript, objects are created for representing real-world entities, such as orders, users, and more. Here is an example:

In the real world, you act like this: login, logout, choose something from a shopping cart, and more.
In JavaScript, you can represent actions by functions in properties.
Examples of Methods
Your first step while studying JavaScript object methods should be to learn how to “say welcome”. The example will look like this:

So, site can respond only after calling it.
A particular function that is the property of an object is known as a method. In the example given above, welcome is a method of the object site.
Moreover, a pre-declared function can be used as a method. To do that, you need to invoke the following command:

Description of Object-oriented Programming
Object-oriented programming (in short “OOP”) is targeted at writing codes by using objects to represent entities.
OOP can be described as a science of its own. A lot of research has been done to fully explore how to choose the right entities, how to organize the interconnection between them, and a lot more. That’s a whole new architecture.
Shorthand of Method
You can use a short syntax for methods in an object like this:

In this example, you can see that the word “function” is omitted, and it’s just written welcome. Of course, there can be differences linked with object inheritance. Anyway, in most of the cases, it is more preferred to use a shorter syntax.
“this” in Object Methods
Generally, for doing its job, an object method must have the information kept in the object.
For example, the code that is inside site.welcome() might need the site.name.
A method can use “this” keyword for accessing the object.
The object “before dot” should be the value of “this”.
For instance, you can call the method as follows:

In the above-given example, while executing site.welcome(), site will be the value of “this”.
You have the option of accessing the object without using “this”. Just reference it via the outer variable like this:

But, take into consideration that such kinds of codes can’t be reliable. In case of copying the site to a different variable (for example, anotherSite = site) overwriting site with another thing, you will be directed to a wrong object.
Here is an example:

“this” can be Unbound
Commonly, the JavaScript keyword “this” can be used in any function on the contrary with other programming languages.
The following example doesn’t have any syntax errors:
function welcome() {
console.log(this.name);
}
In the following example, the same function is accredited to 2 different objects, and it includes different distinctive “this” in the invocations:

So, simple steps are used here: If you first call obj.func(), then you need to run this is obj during the invocation of func. This means that in the above-given example, either site or anotherSite is used.
Invoking without an object: this == undefined
The function can even be called without an object as follows:

In the above-mentioned example, this is undefined in the strict mode. In the event of trying to enter this.name, an error can occur.
The value of “this” in a non-strict mode will be the global object.
Commonly, a call like this can cause a programming error. In case there is this in the function, it should be invoked in the object context.
Outcomes of Unbound “this”
If you are already used to another programming language, possibly you are familiar with the idea of “bound this” in which methods, characterized in an object always obtain “this” referencing the object.
“this” can be described as free in JavaScript. Hence its value doesn’t depend on where the method was confirmed. But it more depends on the “before dot” object.
The given concept of “this” has both advantages and disadvantages. On the one hand, you can use the function for a variety of objects. On the other side, the more flexibility, the more chances to make mistakes. Your aim should be to learn how to work with it to get benefits and avoid mistakes.
Arrow Functions Don’t Have “this”
Arrow functions are unique as they don’t have their own “this”. In case you start referencing it from a function like that, it will be taken from an outer “normal” function.
In the following example, arrow() uses this from the method: site.welcome().

The special arrow function method is especially useful when you don’t wish to have a separate “this” but want to take it from a context beyond.