As a programmer, you often need to perform a similar action repeatedly throughout some parts of your code.
For example, you want to send a message that says "Hello and Welcome to xoxo website" for every visit you get on your website. Imagine getting over 100 visits per day. It makes sense to write a code that sends the message once and calls it anywhere you need it. This is the essence of functions.

What is a JavaScript Function?

A JavaScript function is a block of reusable code. It is a named section of code that can be executed multiple times. A function can perform many tasks ranging from basic calculations to any task you can think of.

"The best thing about JavaScript is its implementation of functions. It got almost everything right." -Douglas Crockford, JavaScript Expert.

Defining JavaScript Functions

There are two common ways to define functions in JavaScript.

1. Function Declaration

To declare a function, use the syntax below

  function  websiteMessage(){
    alert("Hello and Welcome to xoxo website");
    }

Use the function keyword first then write the function's name followed by parentheses.
You can give the function any name you want, but ensure it is descriptive and easy to read.
Inside the curly braces ({}), write the code you want the function to perform when you call it.

2. Function Expression

Function expression is done by assigning functions to a variable.

The syntax is similar to function declarations, but the function name is optional.

Here is an example defining a function using function expression.

const websiteMessage = function(){
     //write code here
    };

How to Call a JavaScript Function

To call a function, write the function name followed by a pair of parentheses. Always remember that JavaScript will not execute the function without the parentheses.

const websiteMessage = function(){
    //write code
    };

websiteMessage()   //this action calls and executes the function

Function Parameters and Arguments

In JavaScript, a common point of confusion for beginners is understanding the difference between arguments and parameters. Although they are used interchangeably, they have different meanings and contexts.

Function Parameters

These are the variables that you define or use during the function declaration. These variables act as placeholders for the actual values that the function receives upon call.

function addNumbers(a, b) {
    return a + b;
    }; 

In the function above, a and b are parameters. They are the variables used in the function declaration to indicate that the function addNumbers operates on two inputs.

Function Arguments

These are the actual values that are passed into the function upon call.

addNumbers(3, 7);  

In this example, 3 and 7 are arguments. They are the actual values that are passed into the function upon call. The function addNumbers executes with a and b replaced by 3 and 4 respectively during the function's execution.

Common Mistakes in defining functions

When working with functions in JavaScript as a beginner, it is easy to make mistakes. Here's a list of common mistakes beginners make when defining functions:

• Forgetting to include a return statement in functions: This mistake can lead to unexpected results because the function may not return the expected value or may return undefined.
  Use the return statement on functions that have expected results.

• Not calling functions with parentheses: Functions need to be called with parentheses in JavaScript to execute the code inside them. Not doing so results in a syntax error.
  Always include parentheses when calling a function, even if it doesn't require any arguments.

• Confusing parameters and arguments: Understanding the difference between parameters and arguments is essential for working effectively with functions in JavaScript(explanation provided above).

Why Use JavaScript Functions?

Functions serve a great purpose for programmers. It is also a good way of practicing the Don't Repeat Yourself (DRY) programming principle.
Here are some advantages of functions:

1. Reduced Redundancy: Instead of writing the same code repeatedly, you can create a function and call it whenever needed. This saves time and effort.
2. Improved Organization: Functions help structure your code by grouping related tasks, making it easier to read and understand.
3. Better Maintainability: In instances where you need to modify a specific task, you only have to change the code within the function, not throughout your entire code.

Conclusion

Functions are fundamental building blocks of JavaScript programming. By understanding how to define and call functions, you can write cleaner, more efficient, and maintainable code.