JavaScript FUNCTIONS
Tags: javascript, functional, beginners, webdev
Published: 2021-10-11 17:23:56


<p>
Understanding functions is so crucial when learning any programming language and it isn’t any different when it comes to JavaScript. JavaScript has a diverse use of functions and one them are their use in the place of special syntax for object-oriented programing found in other programming languages. In this article we are going to discuss the following:
</p>
<ul>
<li> How to define and use  a function</li>
<li>Passing parameters to a function</li>
<li>Pre-defined functions that are available to you </li>
<li> The scope of variables in JavaScript</li>
<li>The Concept that functions are just data</li>
</ul>
<p>
Before we dive into the soup, I will assume that you have an understanding of computer basics, HTML and CSS basics as well as some basics in JavaScript.
</p>
With all that in mind let’s dive into the wonderful world of JavaScript Functions.
<h3>
What is a function?
</h3>
<p>
A function is a block of code with a name, and since it has a name it can be reused over and over again. 
</p>
<h2>Function Declaration</h2>
A function declaration also known as a function statement is made up of:
<ul>
<li>The Function Statement with the function keyword</li>
<li>The name of the function</li>
<li>A list of parameters(arguments) to the function enclosed in parentheses and separated by commas. </li>
<li>The body of the function which contains the code</li>
<li>The return statement which gives the out put of the function</li>
<li>The JavaScript Statement that defines the function, enclosed in curly brackets.</li>
</ul>
For example:
```js
 Function sum ( a, b ){
      Let c = a + b;
      return c;
}
```
</p>
<p>
The Function sum takes two parameters, a and b. The function consists of two statements; one that declares a new variable c and assigns it the sum of a and b and the other statement that returns the value of c. The statement return specifies the value returned by the function. Primitive (such as number) parameters are passed to the functions by value. If you pass an object as a parameter and the function changes the objects properties, that change is visible outside the function.  
</p>
<h3>Function Expressions</h3>
A function can also be created using function expression. Such a function doesn’t necessarily need to have a name like the latter way of declaring functions. For example:
```js
const sum = function(a, b){
       let c = a+b;
       return   c;
}
console.log(sum(3, 5)) // 8
```
Inorder to make debugging easier a name can be given to a function  for example:
```js
const sum = function add(a, b){
     return a + b;
}
Console.log (sum (4, 5)) // 9
```
<h2>Calling a Function</h2>
<p>
Now that we have glanced into what a function is and how it is declared, let’s now see how we can execute these functions.  Calling the function actually performs the specified actions with the indicated parameters as defined when declaring the functions.
You could call it as follows ;
</p>
```js
sum(2,5); // 7
```

<p>This statement  calls  the function with arguments of 5,5. The Function excutes its statements and returns  the value of 10 .
</p>
<h3>Parameters</h3>
<p>
If you are to recall what we have discussed in the previous section,  when declaring a function you   specify the parameters the function expects to receive when it’s called in the parentheses. A may not require any parameters but when it does and you forget to pass them, JavaScript will assign the value undefined to the one that you didn’t fill in.
For example;</p>
```js
function sum( a, b){
    let c = a + b;
    return c;
}
sum(4); // NAN
```
The function call will return NAN (Not A Number) because it tries to sum 4 and undefined. Therefore, make sure you pass a function with correct values and the correct number of values.
<h3 > Pre-defined functions in JavaScript</h3>
Let’s have a look at some of  the in-built functions in JavaScript available for to use.
<ul>
<li> parseInt ()</li>
<li> parseFloat ()</li>
<li> isNaN ()</li>
<li> isFinite ()</li>
<li> eval ()</li>
</ul>
<h3> parseInt ()</h3>
parseInt () takes any type of data and converts it into an integer. If it fails it returns NAN. For example
```js
parseInt (‘1234’)  // 1234
parseInt (‘ABC123’)  // NAN
parseInt (‘1234AB’)  // 1234
```
<h3>parseFloat ()</h3>
parseFloat () is similar to parseInt() but also looks for decimals when trying to figure out a number from your input
```js
parseFloat (‘123’) // 123
parseFloat(‘1.23’) // 1.23
parseFloat(‘1.34abc.00’) // 1.34
parseFloat (‘a.123.bcd’)  // NAN 
```
Both parseInt () and parseFloat () give up at the first occurance of an unexpected character, like a letter even though the rest of the string might be numbers.
<h3>isNAN ()</h3>
isNAN () is used to check whethe the input value is a valid number that can be used safely in an arithemetic operation. This is another convenient way of verifying whether the function parseInt and parseFloat succeed.
For example;
```js
isNAN (NAN) // true
isNAN (123)  // false
isNAN (1.34)  // FALSE
```
<h3>isFinite () </h3>
isFinite () checks if An input is a  number  that  is neither  inifinity nor NAN.
For example:
```js
isFinite (infinity) // false
isFinite (12) // true
isFinite (egrye123) // 
isFinite(11gttf345) // true
```
<h3>eval ()</h3>
eval () takes a string input and executes it as JavaScript Code;
```js
eval (‘let i = 2;’)
i; // 2
```
However you should avoid executing JavaScript from a string as it imposes an enormous risk.
<h2>Scope of Variables</h2>   
<p> 
In JavaScript variables are defined in a function scope, meaning that variables defined inside a function cannot be accessed from anywhere outside the function since that variable is defined only in the scope of the function.  In contrast, a function defined in global scope can access all variables defined in the global scope.</p>
```js 
let global= 12;
function func(){
         let local =2;
          global ++;
         return global;
}
func(); // 2
func(); // local
```

At this point, you now have a profound understanding of JavaScript Functions. This article lays a foundation that will allow you to grasp advanced JavaScript concepts like object oriented JavaScript and patterns. Till next time, thank you for reading