Deep Tech Point - learn tech easy way

In this article, you are going to learn more about JavaScript functions and methods. In short – a function can live on its own, it does not need an object, but a method is a function connected with an object property, but let’s take a look and see what are the similarities and differences between functions vs. methods in JavaScript.

What are functions in JavaScript?

In JavaScript, a function carries out a set of instructions on data to perform some specific task and then returns a result. A function can live on its own, it does not need an object. The advantage of a function is that it can be used many times without having to rewrite the same code again. A function is defined with a keyword “function”, this is followed by the name of the function and then in parentheses, there can be parameters that are optional. In curly braces, you can see the body of a function.

The syntax of a function looks like this:

function functionName(parameters) {
    // body of function
}

So, the function keyword indicates the start of a function and the functionName represents the function’s name. Inputs or parameters for the function are indicated in the parentheses. These are optional and can be empty too. The code that is written between curly braces (a body of a function) represents a set of instructions and executes when the function is called.

Let’s take a look at a function with defined parameters in parentheses – this function receives inputs and returns outputs.

function getCarInfo(brand, productionYear, color) {
  return brand + ", " + productionYear + ", " + color;
}

A function that is named getCarInfo has three parameters: brand, productionYear, color. You can look at these parameters or inputs as variables that have not been set yet. The code that is written between the curly braces instructs the function to return the concatenation of the brand, productionYear, and color with spaces in between each.
The aim of the return keyword is to terminate the function, and to return a value — for this reason, any code that is located in the function, but is detected after the return keyword, JavaScript will not evaluate nor execute. The returned string can be saved to a variable or you can log the returned string to the console when you call the function, for example:

var carInfo = getCarInfo(‘BMW’, ‘2020’,’red’);

In this example, a function with the name getCarInfo is called with these arguments: ‘BMW’, ‘2020’, and ‘red’, so these are the values that are saved into the variables brand, productionYear, color inside of the function, and the result of the function is the concatenation of these three strings.

At this point, it’s time to pinpoint the theoretical difference between parameters and arguments. In the example above the parameters are brand, productionYear, color – so, these are the fields that serve as variable names inside of a function. On the other hand, arguments are a part of a function call – these are the values that are passed to the function when the function is called – in our case above the arguments are BMW, 2020, and red.

So, to sum up – what are the main features of a function?

The function is carried out during a function call.
A function must have a name and that name can contain letters, digits, dollar signs, and underscore.
A function may have parameters, but they are optional. In case the parameters exist, they are listed inside round parenthesis after the name of the function.
Arguments are values that are passed to the function when it is called.
Javascript stops the execution of the function and returns the value in a form of arguments when the control reaches the return statement.

So, what about JavaScript methods?

A method is very similar to a function, it represents a set of instructions that carry out some specific task. However, there is a difference. A method is closely connected with an object – a method is a function stored as an object property or, in other words – a method is a property of an object that contains a function definition.

The syntax of a method looks like this:

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

And you can access an object method with the following syntax:

objectName.methodName()

The example below shows the method that is invoked with an object called myCar:

var myCar = { 
    brand : 'BMW', 
    productionYear : '2020', 
    color : 'red',
    getStatement : function() { 
        return "I drive " + this.brand + " produced in " + this.productionYear + " and it's " + this.color;  
               // In a function definition, "this" refers to the "owner" of the function.
    } 
}; 
            
console.log(myCar.getStatement());
// output would be: I drive BMW produced in 2020 and it's red

Another example uses build-in JavaScript’s built-in methods – .toLowerCase() and .toUpperCase()

var car = 'BMW';
var car1 = car.toLowerCase();
var car2 = car.toUpperCase();

If we call the .toLowerCase() method on the car variable the method will return the lowercase string ‘bmw’, and if we use .toUpperCase() method it will return ‘BMW’.

So, to sum up – what are the main features of a method?

When we perform actions on objects, a method in JavaScript is when we perform an action on an object.
We can call objects without using parenthesis.
Keyword ‘this’ in a function(method) definition refers to the owner object (the instance of the object).

Functions vs. methods in JavaScript: What’s the difference?