Declaring Functions

1. Introduction

2. JavaScript function

          As codes become long and more complex there is a need to make it understandable and manageable.  The best way to maintain long lines of code is the use of functions. A function allows for simple modularity in your code wherein blocks of codes are separated based on its functionality.  It also allows for this block of code to be reused, which saves programmers and code development a lot of time.  Below is a summary of what a function is:

• it is a block of code that is designed to achieve certain tasks.
  
• unlike line codes that are executed right away when encountered by an interpreter, functions execute only it is called during:
  

1. when an event occurs (i.e when a user clicks a button or when a web page loads)
2. when it is invoked or called from a JavaScript code
3. automatically (self-invoked)

3. Native Functions

          There are several predefined functions built into JavaScript and are used to answer certain requirements. There are native functions that are used to get and display information.  There are also functions that are used to convert one data type to another. Examples are the output functions discussed in the previous learning guides which are alert(), prompt() and confirm().  Other native or built-in functions will be discussed in the succeeding learning guides or as we progress with JavaCcript coding journey.

4. Custom Functions

          Custom functions are those that are defined by programmers.  Functions in JavaScript you defined using the declaration technique or as an expression and using the function keyword.

4.1. Function as a declaration

          In JavaScript, the syntax for declaring a function is as follows:

          The Syntax above starts with the keyword function then followed by the function name, followed by a parenthesis (no space), with optional argument-list, and the executable codes enclosed in curly braces/brackets.  An optional return keyword statement could be used to indicate the end of a function and execution of a code/script and returns a value to the statement that called or invoked the function.

          JavaScript Function names can contain letters, digits, underscores, and dollar signs which are the same rules for naming variables.

          Argument-lists are additional information, referred to as parameters and separated by a comma. Which can influence how a function behaves.

          The codes below show how a function addTwoNumbers through version 1 and 2 could be declared with or without an argument-list.  As you can see in the sample code how an argument-list could influence the output of a function.

Sample code without an argument-list:

Sample code with an argument-list:

Importance of a function returning a value

          We often create functions to calculate something and provide a value that can be used somewhere in our scripts. Thus, the return  keyword inside a function is very useful to turn a function into a variable with a dynamic value as illustrated also in the sample codes/scripts above addTwoNumbers.

          However, there wouldn’t be much use if the result will just be within the function, unless we use it somewhere in our script. The return  keyword is used to pass the result of the function. Then, we can just reference or call out the function to give the result, similar to a variable.  Thus the line in the previous code, calls the function with two arguments and then receives a result from the function and prints it on the browser.

          Take note that once a function has already returned a value, the function ends.  A more detailed discussion on processing function output will be discussed in the learning guide 9.3.

Argument-list

          Is a value or a list of values that a function uses when it runs. Oftentimes, we “recycle” or “reuse” native and custom functions as needed depending on certain circumstances. We can manipulate the arguments by providing necessary data to the functions in order to apply the function’s logic to different sets of data at different times. The argument-list in the functions are considered “local variables” inside the function and are not accessible outside of the function.

          To place arguments, add one or more variables, separated by comma/s, in the parenthesis upon defining the function as shown below. Then, when the function is called, anything included within the parentheses will be passed into that variable as the function executes.

If a function declared with argument-list receives no values from a calling statement, then all arguments will have a data and data type of undefined.  

4.2. Function as an expression

          Another way to define a function in JavaScript is as an expression:  The most common syntax would be to create an unnamed function and assign it to a variable.  Below is a rewrite of the same function in the previous section using this method below:

var addTwoNumbersv3 = function(num1, num2)
{     
     return num1 + num2; 
}

          In this case addTwoNumbersv3 is a variable not a function name, and represents the value that is being returned by the unnamed function, thus:

will still write on the browser the number 9.

4.3. Differences between two methods in declaring functions

          So, what is the difference between the function as a declaration and the function as an expression?

          Function as a declaration could be “hoisted” while as an expression cannot.  It means that you can use a function or make a function call before it is declared. Thus, the example below will still work but not for function as an expression.

 
/* calling the function addTwoNumbersv2, the result of this function is 9 */
document.write(addTwoNumbersv2(3, 6));
/* this example will return the sum of a given two arguments */
function addTwoNumbersv2(num1, num2)
{ 
   return num1 + num2;
}

          Function as an expression has several advantages, like creating a callback and when you would like to test immediately the result of lines of codes without giving it a name.  For more information about function as an expression refer to the web page Function Expression using the URL below: 

https://developer.mozilla.org/en-US/docs/web/JavaScript/Reference/Operators/function

5. Summary and Referencess

Summary

• Functions are essential components of scripts. There are native and custom functions that we can readily call out when needed in any part of the script.
• Custom functions can be created using either function by declaration method or function as an expression.
• Functions are basically composed of (1) a function name, which is usually representative of the operation expected to be performed by the function, (2) followed by open and close parentheses that contain optional arguments, otherwise just empty, and (3) executable codes enclosed in curly brackets.
• Functions may be called out and used anytime within the script. Furthermore, they can be edited or customized as needed, changing or setting the arguments, providing necessary data to the function. The function’s basic logic will still be used as is, only with different data at specific instances.

References