Check out my new JS project app.
Secret_Message.js
The difference between a function and a method in JS is more about where they are defined, then how they are used, or “act”. Generally a method is available from a class, where as a function isn’t directly related to a class.
An example would be an Array’s .reduce method.
const sum = [1,2,3,4].reduce((sum, num) => sum + num );
console.log('sum', sum); // 10
Or here is an ES6 method example on a class:
class Logger {
constructor(prefix) {
this.prefix = prefix;
}
print(message) {
console.log(`${this.prefix} ${message}`);
}
}
const logMessage = new LogMessage('hi');
logMessage.print('brad'); // 'hi brad';
Both reduce and print are methods on their corresponding class.
A function is usually more generic then a method, as methods are tied with objects and classes, which are part of Object Oriented Programming. Functions
function add(a, b) {
return a + b;
}
add(1,2); // 3
// es6 version with arrow functions, acts the same
const es6Add = (a, b) => a + b
es6Add(a, b)
A key part of JS is the fact functions are “first class”, in the sense you can pass around functions just like you would other variables, an example would be the .reduce method I mentioned above. You might be slightly confused by the fact I’m using the same example for both, but I want to point out the fact that .reduce is an array method that takes a function as a parameter. Here is the same example but written differently:
// This is a function that adds, just like before.
function add(a, b) {
return a + b;
}
// .reduce is the array method that takes a function as an argument
const sum = [1,2,3,4].reduce(add);
console.log('sum', sum); // 10
Its easy to get confused, just remember methods are inside/related to classes, functions are basically everything else.
Yes, in terms of calling them they will act more or less the same.
array.method_name will give you the property at method_name of the object. This could be anything including a method. An example would be myArray.length which gives you the length of the array. Or you could get a method itself with myArray.reduce which will return the function itself, but it wont call it.
Calling or executing a method/function requires () at the end. Just like how in the previous example I passed around the add function, you can pass around the myArray.reduce function how you see fit, but neither are actually executing the function. Executing the function/method uses (). So yes and no the syntax could be referring to a method reference, but it doesn’t have to be.
Hopefully that gives you some idea of the different. Generally functions within JS take many forms, are very flexible and over the years have gotten more complex due to newer additions to the language.
PS. I purposely skipped over static methods, which are another type of method that is defined on a class that is available from the class itself, rather then an instance of the class. Examples would be Array.isArray or Math.random. These are usually utility functions.
Here are some other resources that go into more details:
As a side note and maybe just to confuse you a little, functions are objects (first-class objects). You can add methods to functions.
function imAnObjectAsWell(num1, num2) {
return num1 + num2;
}
console.log(imAnObjectAsWell(2,2)); // 4
imAnObjectAsWell.silly = () => 'OK it works, but why would you do this?'
console.log(imAnObjectAsWell.silly()); // OK it works, but why would you do this?