Difference between Methods and Functions in JavaScript

Grasping the difference between methods and functions in JavaScript is essential for developers at all levels. While both are fundamental to writing effective code, they serve different purposes and are used in various contexts. This article breaks down the key distinctions between methods and functions in JavaScript, explaining their unique characteristics, definitions, and specific uses. By understanding these differences, you can improve your JavaScript programming skills and create more robust, maintainable code.

1. JavaScript Functions

A function is a block of code written to perform some specific set of tasks. We can define a function using the function keyword, followed by Name and optional parameters. The body of the function is enclosed in Curly braces.

Syntax: 

function functionName(parameters) {
    // Content
}

Work Around:

  • The function is executed when something calls/invokes it.
  • The name may contain letters, digits, dollar signs, and underscore.
  • Parameters are listed inside round parenthesis after the name of the function.
  • Arguments are values a function receives when it is invoked.
  • When the control reaches the return statement, js will stop executing and the value is returned to the caller.

Example: Below is the function to add two numbers.

Javascript
function func(a, b) {
    let sum = a + b;
    return sum;
}
console.log(func(1, 2));

Output
3

2. JavaScript Methods

A JavaScript Method is a property of an object that contains a function definition. Methods are functions stored as object properties. Object method can be accessed with the following syntax:

Syntax:

object = {
    methodName: function() {
        // Content
    }
};
object.methodName()

Work Around:

  • Actions that can be performed on objects are what we term JavaScript methods.
  • The objects can also be called without using parenthesis.
  • This refers to the owner object in a method.

Example: The following example shows the method that is invoked with an object called employee.

Javascript
let employee = {
    empname: "Rahul",
    department: "sales",
    details: function () {
        return this.empname +
            " works with Department " +
            this.department;
    }
};
console.log(employee.details());

Output
Rahul works with Department sales

Difference Between Function and Method

Function

Method

A JavaScript function is a block of code designed to perform a particular task.The javascript method is an object property that has a function value.

Syntax of Function is:

function functionName(parameters) {
   // Content
}

Syntax of Method is:

object = {
   methodName: function() {
       // Content
   }
};

object.methodName()

A function can pass the data that is operated and may return the data. The method operates the data contained in a Class.
Data passed to a function is explicit.A method implicitly passes the object on which it was called.
A function lives on its own.A method is a function associated with an object property.
A function can be called directly by its name A method consists of a code that can be called by the name of its object and its method name using dot notation or square bracket notation.
Functions are helpful because it increases the reusability of the code.Javascript includes some in-built methods also for example: parseInt() Method
The () Operator is used to Invoke the Function

We can access object method by the following the syntax:

objectName.methodName()