JavaScript FUNCTIONS

Priscillah Nalubega - Oct 11 '21 - - Dev Community

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:

  • How to define and use a function
  • Passing parameters to a function
  • Pre-defined functions that are available to you
  • The scope of variables in JavaScript
  • The Concept that functions are just data

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.

With all that in mind let’s dive into the wonderful world of JavaScript Functions.

What is a function?

A function is a block of code with a name, and since it has a name it can be reused over and over again.

Function Declaration

A function declaration also known as a function statement is made up of:

  • The Function Statement with the function keyword
  • The name of the function
  • A list of parameters(arguments) to the function enclosed in parentheses and separated by commas.
  • The body of the function which contains the code
  • The return statement which gives the out put of the function
  • The JavaScript Statement that defines the function, enclosed in curly brackets.

For example:

 Function sum ( a, b ){
      Let c = a + b;
      return c;
}
Enter fullscreen mode Exit fullscreen mode

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.

Function Expressions

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:

const sum = function(a, b){
       let c = a+b;
       return   c;
}
console.log(sum(3, 5)) // 8
Enter fullscreen mode Exit fullscreen mode

Inorder to make debugging easier a name can be given to a function for example:

const sum = function add(a, b){
     return a + b;
}
Console.log (sum (4, 5)) // 9
Enter fullscreen mode Exit fullscreen mode

Calling a Function

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 ;

sum(2,5); // 7
Enter fullscreen mode Exit fullscreen mode

This statement calls the function with arguments of 5,5. The Function excutes its statements and returns the value of 10 .

Parameters

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;

function sum( a, b){
    let c = a + b;
    return c;
}
sum(4); // NAN
Enter fullscreen mode Exit fullscreen mode

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.

Pre-defined functions in JavaScript

Let’s have a look at some of the in-built functions in JavaScript available for to use.

  • parseInt ()
  • parseFloat ()
  • isNaN ()
  • isFinite ()
  • eval ()

parseInt ()

parseInt () takes any type of data and converts it into an integer. If it fails it returns NAN. For example

parseInt (1234)  // 1234
parseInt (ABC123)  // NAN
parseInt (1234AB)  // 1234
Enter fullscreen mode Exit fullscreen mode

parseFloat ()

parseFloat () is similar to parseInt() but also looks for decimals when trying to figure out a number from your input

parseFloat (123) // 123
parseFloat(1.23) // 1.23
parseFloat(1.34abc.00) // 1.34
parseFloat (a.123.bcd)  // NAN 
Enter fullscreen mode Exit fullscreen mode

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.

isNAN ()

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;

isNAN (NAN) // true
isNAN (123)  // false
isNAN (1.34)  // FALSE
Enter fullscreen mode Exit fullscreen mode

isFinite ()

isFinite () checks if An input is a number that is neither inifinity nor NAN.
For example:

isFinite (infinity) // false
isFinite (12) // true
isFinite (egrye123) // 
isFinite(11gttf345) // true
Enter fullscreen mode Exit fullscreen mode

eval ()

eval () takes a string input and executes it as JavaScript Code;

eval (let i = 2;)
i; // 2
Enter fullscreen mode Exit fullscreen mode

However you should avoid executing JavaScript from a string as it imposes an enormous risk.

Scope of Variables

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.

let global= 12;
function func(){
         let local =2;
          global ++;
         return global;
}
func(); // 2
func(); // local
Enter fullscreen mode Exit fullscreen mode

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

. . . . . . . . .
Terabox Video Player