Fibonacci Series In JavaScript

Introduction to Fibonacci Series in JavaScript

The following article will help us how to find the Fibonacci Series in JavaScript. The functionality that we enjoy in the web applications is provided by the programming languages that operate on a server but that’s not all. The user interface of the application is something that helps the user to interact with the web application and hence considered equally important when it comes to designing a Web application. In this article, we are going to learn about one of the client-side scripting languages that endorse UI designing, known as JavaScript. JavaScript enables the application to dynamically create the populate the web page components. Working on JavaScript needs logics to be used in order to bring particular functionalities. Here we will see how the Fibonacci Series is written in JavaScript.

Fibonacci Series of JavaScript Using various Methods

Let us see fibo series using various methods with the help of an example as mentioned below:

1. Fibonacci Series using for loop

• Fibonacci Series can be considered as a list of numbers where everyone’s number is the sum of the previous consecutive numbers. The list starts from 0 and continues until the defined number count. It is not any special function of JavaScript and can be written using any of the programming languages as well. To understand this precisely, let us use an illustration. Suppose we are required to make a Fibonacci Series with 10 items then it will be like 0 1 1 2 3 5 8 13 21 34

• In the above series, we can see that every number is the sum of the previous two consecutive numbers. The very first number and second values are 0 and 1 respectively as the series starts with zero and one. The actual functioning begins from the value in the 3rd index. The value in the third position is 1 that is nothing but the sum of two previous consecutive numbers 0 and 1.
• The value in the fourth index is 2 which is the outcome of the sun of the two consecutive digits before it. The process of adding the previous two digits and adding it to the series continues until the count of values in the series becomes equal to the total count that we wanted in the series.
• Now let’s write an actual program using JavaScript to calculate the Fibonacci Series. The JavaScript code has to be added to the HTML page or it can also be added to the JavaScript page that ends with js extension. When the web application is intended to use the external Javascript then, in that case, this code can be defined file that can be added in the Javascript file but it’s way easier to add the code in the HTML web page and it works fine.
• Incase if used in the HTML page it has to be defined by using the script tag which instructs the browser that the code is written within it has to be considered as the javascript command and not as HTML code.

Program

<script type="text/javascript">
var pop = prompt("Enter the count of values in the series", " ");
var var1=0, var2=1;
document.write("Here is the fibonacci series : ");
document.write("",var1," ");
document.write("",var2," ");
var counter, sum;
for(counter=2; counter<pop; counter++)
{
sum=var1+var2;
document.write("",sum," ");
var1=var2;
var2=var3;
}
</script>

Output:

• In the above code for the Fibonacci series, the script tag has been defined which used javascript as type. The text/javascript attribute confirms that the code has to be executed in the client-side as its the javascript code. This will be later added to the HTML page in order to work together with the web page components. As the page loads, it will give a popup that asks for the count of values that has to be in the series.
• Whatever number the user inputs, it will be stored in the variable named pop. The variable will be storing the total number of values that the series should have. Later we have initialized the variable var1 and var 2 that store the values 0 and 1, respectively, as these are the two mandatory values in the Fibonacci series that kicks the process required to develop the series.

2. Fibonacci Series using while loop

• There are various methods of getting the Fibonacci series and in this section, we will see how the Fibonacci series can be developed using the while loop. In the below program everything is similar to that of what we have used in the above program.
• The primary difference that we have used the while loop instead of for loop. The variables are also the same and the role was given to the variables in terms of holding the values works the same way as it does in the last section.

So as the outcome, the output of this program will also be the same as what we get after executing the last for loop code.

Program

<script type="text/javascript">
var var1 = 0, var2 = 1, var3;
document.write("Here is the Fibonacci series with 10 values : ");
while(var1<40)
{
document.write(var1 + " ");
var3 = var1+var2;
var1 = var2;
var2 = var3;
}
</script>

Output:

• This program works fine with the while loop in order to generate the list of items in the Fibonacci series. The pop variable has to accept the values from the user that will give the total count of the count of elements in the series.
• The variable var1 and var2 have been assigned with the value 0 and 1 respectively in order to input these values when the series begins.
• Afterward, the while loop has been introduced that checks if the counter is less than the value stored in the pop variable. If found positive, it will terminate the execution and will give the list else it will sustain on execution.

3. Fibonacci Series using with recursion

• In this program, the Fibonacci series has been generated using the recursion. In the last two examples, we have developed the series using the for and the while loop but in this section, we will develop the same using the function that can be called over and over in order to get the expected series.
• The way it is different from both of the programs mentioned above is, it is not taking ay value from the user using the input box but just using the function where the value can be hardcoded.
• In the application where the developed want to prevent the application from using loops for any reason can use this way to get the same functionality as the loops do.

Program

<script>
var fseries = function (var1)
{
if (var1===1)
{
return [0, 1];
}
else
{
var sum = fseries(var1 - 1);
sum.push(sum[sum.length - 1] + sum[sum.length - 2]);
return sum;
}
};
document.write(fseries(10));
</script>

Output:

• The program is using the function named f series in order to produce the Fibonacci series. The number of elements that have to be in the list is stored in the val variable whose value is assigned when the function is getting called.
• In the second last line of this program, we have written series(10) which assigned 10 to the val variable while the function is being called. The outcome of this program will be the same as that of the above two applications. The list that is the outcome of this program will be having 10 elements in the list.
• When it comes to presenting the data of the series on the screen, it will print the variable var1 and var2 that gives the values of 0 and 1 to the series and then kicks the function to add the previous two consecutive numbers and add them.
• There is a for loop implemented that will ensure that the counter is kept on incrementing by one as the loop runs and meanwhile also make sure that the counter should be less than the value in pop. The process will continue till the loop terminates which will happen right after the desired series has been generated. By the end, the script tag has been closed with states that the code after this belongs to the parent file.
• There are certain things that have to be taken care of while developing the Fibonacci series and that is the approach of writing the code. This code could be shortened to offer efficiency to the application. If this has to be defined in the form of a function, one has to follow the approach accordingly to invoke the function.
• The script that is defined in the javascript file has to be written in the form of functions only so that it could be called from the page where the file has been called. Here we have written the script the intention to use it on the HTML page and hence the need of function was not there but it is a sure thing that in order to use this functionality across multiple webpages, it has to be mentioned in the javascript file while will be later added to all the web pages that want to use this functionality.

Conclusion

The modern web application needs various functionalities in the frontend as well as in the backend and the Fibonacci series is a method that could be used to offer particular functionality to the application. It is also used by the students to develop the logic to write an application and can be helpful in various manners.