in this JavaScript tutorial, We’ll explore different ways to define a method in JavaScript. The method helps to organize and structure your code, and is one of the building blocks of JavaScript programming for creating web applications.
Function Syntax
A function is a block of code that performs a specific task. The function is declared using the function keyword. It’s used to encapsulate logic, making that code more reusable and easier to understand.
There are the following ways to define a method:
- Function Declarations
- Function Expressions
- Arrow Functions
- Function Constructor
Declaring a Function
The syntax to declare a function is:
function nameOfFunction (parameters comma seperated) {
// function body
return results
}
The function is defined using the function keyword followed by the function name, parameters in parentheses, and define logic in the {}. The return statement can be used to return the value to a function call, Any code after return is not executed.
Basic Function
Let’s create a basic function in JavaScript that takes two numbers and returns their sum:
function sumNumbers(a, b) {
return a + b;
}
in the above method, takes two parameters, a and b. The code inside the function body adds these two parameters and returns the result.
// Calling the function sumNumbers(2, 3); // Output: 5
Function Expressions
This type of function is used to assign a function to a variable, it can anonymous function. The term anonymous function refers to a function without a name.
The Syntax:
var x = function (a, b) {return a * b};
A simple example:
const sum = function(a, b) {
return a + b;
};
I have created a sum() method and assigned it to the variable sum. It’s treated as first-class citizens, allowing them to be passed as arguments or assigned to variables dynamically.
Calling method:
const num = sum(4, 6); console.log(num); // Output: 10
Arrow Functions
The Arrow function is one of the features introduced in the ES6 version of JavaScript. It helps to create cleaner functions compared to traditional functions. The Arrow function is useful for creating short, one-liner functions:
if the function has a single parameter, you can skip the parentheses around the parameter. Additionally, if the function body consists of a single expression, the braces and return keyword can be skipped.
const sum = (a, b) => a + b;
Calling method:
const sum = sum(4, 6); console.log(sum); // Output: 10
Function Constructor
JavaScript also allows creating functions using the Function constructor. You can pass a comma-separated list of parameter names as strings, followed by the function body as the last argument. You can define a function as follows:
const divide = new Function('a', 'b', 'return a + b');
Calling method:
const result = divide(8, 2); console.log(result); // Output: 10
What’s Function Hoisting
Function Hoisting is a behavior that allows you to use a function or a variable before it has been declared. Hoisting is a behavior that occurs during the JavaScript runtime.
The JavaScript engine first looks through the code to discover all variable and function declarations when JavaScript code is started to execute. There are two types of Hoisting:
- Function Hoisting
- Variable Hoisting
Example 1:
helloWorld();
function helloWorld() {
console.log("Hello, world!");
}
In the above example, We have called helloWorld() method before its actual declaration in the code. it works because the declaration is hoisted to the top during the compilation phase.
Example 2:
helloWorld(); // This will result in an error
var helloWorld = function() {
console.log("Function expression is not hoisted!");
};
We have defined helloWorld() is a function expression and assigned to a variable. This won’t work when called before the actual assignment because function expressions are not hoisted in the same way as function declarations.
Variable Hoisting
The variable declaration is not initialized until it is explicitly assigned a value unlike function hoisting,
console.log(myVar); // Output: undefined var myVar = "Hello! js Tutorials!"; console.log(myVar); // Output: "Hello! js Tutorials!"
Note: The function expressions and arrow functions are not hoisted in the same way, and attempting to use them before declaration results in an error.
It is therefore necessary to declare and assign function expressions before utilizing them.
Conclusion
JavaScript function declaration is a fundamental ability for any developer. You can improve your ability to write organized, modular, and effective code, regardless of whether you choose to use function declarations, expressions, arrow functions, or the Function constructor.
