Understanding JavaScript Methods as an Absolute Beginner

As an absolute beginner, having learned and understood the syntax of a programming language, the next step is to understand how to use the “methods” of the language. I like to think of methods as the vocabulary of a language, the more you understand the easier it is to communicate and write code effectively.

What are methods?

Methods are functions which is a property of an object.

Ok, What are objects?

In JavaScript, objects can be seen as a collection of properties. Objects usually contains key/value pairs wrapped in an opening and closing curly brackets, as seen below.

let person = {

firstName:"John", 
lastName:"Doe", 
fullName: function() {
return this.firstName + " " + this.lastName;
}
};

// person is the name of the object
// firstName, lastName and fullName are the keys
// John, Doe, the function are the corresponding values

Now, let's understand what are methods?

The below lines of code shows an object containing a function. The object name is "objectName" and the method is "methodName".

const objectName = {
  methodName: function() {
    // Logics to be executed are written
  }
};

// methodName is a method of this object - called objectName.
// methodName is a function which is a property of the object.

Methods are the block of codes or statements in a program that gives the user the ability to reuse the same code which ultimately saves the excessive use of memory, acts as a time saver and more importantly, it provides a better readability of code. So basically, a method is a collection of statements that perform some specific task and returns the result to the caller. A method can also perform some specific task without returning anything.

Accessing Methods

JavaScript provides two notations for accessing methods. The first, and most common, is known as dot notation. Under dot notation, a method is accessed by giving the object name, followed by a period (or dot), followed by the property name.

Dot Notation

You can access an object method using a dot notation. The syntax is:

const object = {
  methodName: function(){
    console.log('hello world')
  }
}

// To access the method using dot notation.
object.methodName()
//  hello world

Here, the methodName method is accessed as object.methodName()
If you access a method without the () parentheses, it will return the function definition, to execute a function we invoke the function with ().

Bracket Notation

The second method is the bracket notation. For the bracket notation, a method is accessed by giving the object name, followed by the property name in quotation and then wrapped in an opening and closing square bracket.

objectName["propertyName"]

Note that in the code below, the quotations are absence, this is because the object properties has been assigned to a variable.

let propertyName = 'property';

objectName[propertyName]

Difference between Methods and Functions in JavaScript

We often misplace methods as functions; now let’s try to understand the difference between Method and function in JavaScript.

JavaScript Methods:

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

object.methodName()

Features of Methods:

• Actions that can be performed on objects are what we term JavaScript methods.
• The method can also be called without using parenthesis.

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. Body of function is enclosed in Curly braces.

Function syntax:

// Function keyword

function functionName() {
// Code to be executed
}

// Arrow function

const functionName = () => {
// Code to be executed
}

Features of Functions:

• The function is executed when something calls/invokes it.
• The name may contain letters, digits, dollar signs, 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, it will stop executing and the value is returned to the caller.

Built-In JavaScript Methods

Built-in methods are predefined pieces of code in a program or programming framework or a programming language that performs some specific task. This makes programming easy as programmers don’t have to create a new method or function and can simply directly use the built-in methods in their application.

Some JavaScript Built-In Methods are as follow:

Array Methods: Array methods are functions built-in to JavaScript that we can apply to arrays.

String Methods: String methods help you to work with strings.

Object Methods: Object methods help you to work with strings.

Date Methods: Date methods allow you to get and set the year, month, day, hour, minute, second, and millisecond of date objects, using either local time or UTC (universal, or GMT) time.

Document Object Methods: JavaScript Document object is an object that provides access to all HTML elements of a document.

Number Methods:The Number object contains only the default methods that are part of every object's definition.

Math Method: Math is a built-in object that has properties and methods for mathematical constants and functions.

Window Object Method: The window object represents an open window in a browser.

RegExp Methods: Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. These patterns are used with the exec() and test() methods of RegExp, and with the match(), matchAll(), replace(), replaceAll(), search(), and split() methods of String.