As soon as your JavaScript code grows to more than a few lines you will start getting sections of the code that you will want to run more than once. Rather than duplicating the code multiple times (and hence having multiple places to make changes if you decide to change what it does) we can pull the code out into a separate module of its own and call that module from each place where we want the code to run. In JavaScript these separate modules are called functions and JavaScript provides three ways to define a function.
Having extracted the code that you want to be able to run multiple times and wrapped it inside a function the next step is to replace all of the occurrences of the original code with calls to the function. A function call works slightly differently from the way you define variables and assign values to variables because with functions we can not only define and assign, we can also run functions.
Of course running exactly the same code each time you call a function is somewhat limiting and so JavaScript allows you to define what are called arguments within the function. These act as placeholders for the actual variables that you want the function to process. We then identify the actual variables that we want a specific run of the function to use by passing parameters to the function which then substitute for the arguments.
JavaScript doesn't require the same number of parameters to be passed to the function each time it is called. Sometimes you may want to use some optional parameters which will either have default values if they are not present or which will result in the function performing different processing depending on how many parameters you supply.
Functions affect the way that variables work in JavaScript. When a variable is defined inside a function the scope of that variable is the function. That means that the variable comes into existence when the function starts to run and ceases to exist when the function ends. Such a variable has local scope as compared to a variable defined outside of a function which therefore has global scope. That means we don't have to worry about what variables may be used elsewhere in the code when we define a variable within a function because our local variable will be completely separate from any variables defined elsewhere that use the same name.
As well as passing parameters to a function we can also return a value from a function.Where a function returns a value of a given type we can substitute a call to the function anywhere in our code where we want to reference a variable of that type. When the statement runs, the function will be called and the value that is returned will be substituted into the original statement at the point where the function call appears.
You don't necessarily have to write all your functions yourself as there are a number of function libraries available that others have written to perform a large number of commonly needed tasks which the authors have made available for people to use. If you incorporate one or more such libraries into your page then you can call the functions in those libraries the same way that you can call built in functions and those functions that you have written for yourself.