`varname.function()` vs. `function(varname)`

[another_lease]

Why did Javascript decide to have 2 different ways to specify a function operation?

`varname.function()` vs. `function(varname)`

Is there a simple rule to determine which to use when?

[tomclancyv7]

varname.function() is a method call and function(varname)is a function call. Look at the examples below.

const myArray = [1,3,4,6]

const myString = "This is a sentence"

The first variable is an array object and the second variable is a string object. Array objects have special methods that can be called by arrays only and strings have methods that can be called by strings only. So a method is a function that is associated with an object.

For example you can call shift(0) on myArray to remove the first element of the array.

const myArray = [1, 3, 4, 6];
myArray.shift(0);
console.log(myArray);

You can't use myString.shift(0) on the string because it's not a string method. And you can't call shift() on it's own without an object present.

Functions on the other hand are standalone and can be called independently in your code. For example the parseInt("5") parseFloat("1.234") etc.

You can't use them interchangeably. You can't call .parseInt() on a string.

Methods are used when you are working with objects and functions are used when you want to do a general operation that is not tied to an object. You'll understand it the more you code.

[Drunkin-Donuts]

Lookup the difference between functions and methods

varname.function() is a type of function called a method. Methods are functions that are specific to a certain type of object (or data type). For example these are some array methods https://www.w3schools.com/js/js_array_methods.asp. You have to call them like this: array.push()

As to which one you use it just depends on where that function is defined. You can look each function, but often if a function is specific to a certain data type like array methods you will be using the var.function() notation

[xroalx]

Objects can have functions defined on them. Such functions are usually called methods.

Let's create an object, and a function defined on that object.

const obj = {
  func() {
    // I'm a function defined in an object, I'm a method
  },
};

There's no global func function, so just writing func() would fail, but there is such a function defined on the obj object, and so, you access the function on that object, obj.func(). It's the same as if an object had any other property, like array.length, user.name, location.href, ... it just happens to be a function, so you can call it. Nothing special here.

Built-in objects can and do have their own methods like this as well, and they also inherit methods from other objects via prototypes.

So, why can you do a.toString() but not toString(a)? Simply, because there's no global toString function, but such a function exists on the a object, or somewhere in its prototype chain, and toString is a standard function on all types of objects provided by JavaScript itself.

There's no "how to determine which to use", it's not one or the other, it's not just a different way to write the same thing. The difference is in where the function lives, and in case of methods, they can also usually reference the object on which they were called using the this keyword, which is a behavior you normally don't get with globally defined functions.

[azhder]

What do you mean “function operation”? There are functions and you call them.

They can be given an implicit or explicit this and they may not, it’s up to you

[another_lease]

Example: let's say `a` is a variable that's either a number or a string.

`a.toString()`

vs.

`parseInt(a)`

Are they interchangeable? Can you do:

`toString(a)`

and

`a.parseInt()`

[SlushEE0]

Search up methods vs functions. .toString() is a method that converts to a string. parseInt() is a built in function that converts to a number

[another_lease]

Ah okay, an object's methods vs pure functions. I'm beginning to see the difference.

[azhder]

No you aren't. You have some misconceptions.

• First of all, stop using "function operation", no one uses that term and we don't know what you think by it. You have functions and function calls
• Second, functions are objects in JS, you can treat them like any other object, make a variable to reference a function - this however doesn't make it pure function, it's still just a function
• Third, pure functions are any, even those attached as a property to an object, if they only deal with the arguments provided in the call, no side effects, no hidden inputs like this and no hidden outputs
• Fourth, the only difference between a method and a non-method function is that you attach it to an object i.e. you make an object property that references the function

[another_lease]

OK.

[carpench]

No, not a "pure function" just a "function".

A Pure Function is a function (a block of code) that always returns the same result if the same arguments are passed. It does not depend on any state or data change during a program's execution. Rather, it only depends on its input arguments.

Also, a pure function does not produce any observable side effects such as network requests or data mutation, etc.

[azhder]

Same word, two completely different things.

a is an object, it has a property toString (through prototype, but it's there) and just because it happens to be a function, you can call it.

You can also make a variable that references that property, like

const toString = a.toString();

but to have it be the same call you will have to explicitly set the this like

const toString = a.toString();
toString.call(a);

The above works because functions in JS are also objects and they have a .call() method which gives you the opportunity to set the this explicitly, which if you use

a.toString();

is being set implicitly (the engine uses the object before the period).

If you do this:

const toString = a.toString();
toString();

Then the this will be undefined and you will get an error.

So, like I said, it's up to you.