Fibonacci series in JavaScript

This section will discuss the Fibonacci series and how we can generate the Fibonacci series in JavaScript.

Fibonacci series is a series that generates subsequent series of numbers by the addition of the two previous numbers. The first two terms of the Fibonacci series are zero and one, respectively. And the next terms are the addition of the two previous terms.

Representation of the Fibonacci series

Fn = (Fn -1) + (Fn - 2)

Fn represents the addition of the previous terms (Fn - 1) and (Fn - 2). Here Fn-1 is the first terms, and Fn-2 is the second terms of the Fibonacci series.

Example:

First terms of the series is: 0
Second term of the series is: 1
Third terms of the series is: (0 + 1) = 1
Fourth terms of the series is: (second + third) term = (1 + 1) = 2
Fifth term of the series is: (Third + fourth) = 1 + 2 = 3

Here is generated series: 0, 1, 1, 2, 3, … Similarly, we can find the series of the next terms.

Steps to find the Fibonacci series of n numbers

Following are the steps to find the series of the Fibonacci Series:

Step 1: Declare the variables x, y, z, n, i

Step 2: Initialize the local variable x = 1, y = 1, i = 2

Step 3: Read a number from the user

Step 4: Display the value of x and y

Step 5: Repeat the process of Fibonacci series until i > n

z = x + y
Display the value of z
x = y, y = z
i = i + 1

Step 6: Stop the execution of the Fibonacci series

Get the Fibonacci series up to n terms

Let's consider an example to get the Fibonacci series up to a desired numbers in JavaScript using for loop.

Program1.html

<html>
<head>
<title> Fibonacci Series in JavaScript </title>
</head>
<body>
<script>
// declaration of the variables
var n1 = 0,  n2 = 1, next_num, i;
var num = parseInt (prompt (" Enter the limit for Fibonacci Series "));
document.write( "Fibonacci Series: ");
for ( i = 1; i <= num; i++)
{  document.write (" <br> " +  n1); // print the n1
	next_num = n1 + n2; // sum of n1 and n2 into the next_num
	
	n1 = n2; // assign the n2 value into n2
	n2 = next_num; // assign the next_num into n2
}

</script>
</body>
</html>

Output:

When we execute the above program, it displays the given image. There is a prompt box to define the Fibonacci series limits, and then click the OK button to continue.

After that, it displays the Fibonacci series that starts with 0 and 1. And the next term is the addition of its previous two terms, as shown below.

Get the Fibonacci series of the first 8 terms

Let's consider an example to get the Fibonacci series of the first 8 terms in JavaScript using for and if statements.

Program3.html

<html>
<head>
<title>
Fibonacci Series in JavaScript </title>
</head>
<body>
<script type = "text/javascript">
// declaration of the variables
var number = 8; 
var num1 = 0, num2 = 1;
var next_term = 0;
document.write( " Fibonacci series of the number 8: " + "<br>")
for (i = 1; i < number; i++) // use for loop to iterate the series till given number 
{
if ( i <= 1) 
next_term = i; // assign the variable i to next_term
else
{
next_term = num1 + num2; // sum the num1 and num2
num1 = num2;
num2 = next_term;
}
// print the sum of the series
document.write( " Adding " + num1 + " and " + next_term + " = " + (num1 + num2) + "<br>" );

}
</script>
</body>
<html>

Output:

Get the sum of the first 7 terms of the Fibonacci series

Let's consider an example to get the sum of the Fibonacci series in JavaScript using function and for loop.

Simple2.html

<html>
<head>
<title>
Fibonacci Series in JavaScript </title>
</head>
<body>
<script type = "text/javascript">
function fibo( num)
{
var n1 = 0; // declaration of variables n1, n2, i and temp.
var n2 = 1;
var temp;
var i = 0;
for (i = 0; i < num; i++)
{
temp = n1 + n2; // store the sum of n1 and n2 in temp variable.
n1 = n2; // assign the n2 value into the n1 variable
n2 = temp; // assign the new value of temp into n2 variable
}
return n2;
}
// get a number from the user
const f1 = parseFloat (prompt (' Enter a number to get the sum of Fibonacci Series '));
window.alert( "The sum of Fibonacci Series is: " +fibo(f1) );  /* print the sum of series */

</script>
</body>
</html>

Output

When the above code is executed, it displays a prompt box that takes a number to return the sum of the Fibonacci series.

Here we have entered 7 as the input to return the series sum, as shown below.

Click on the OK button.

In the above image, it returns the sum of first 7 terms is 21.

Get the Fibonacci series using Recursion Function

Let's consider an example to get the Fibonacci series in JavaScript using recursive function.

Recursion.html

<html>
<head> 
<title> 
Fibonacci Series using Recursion in JavaScript. </title>
</head>
<body style= "text-align: center;">
<h2> Fibonacci Series in JavaScript Using Recursion </h2>

<script>
// Using Recursion to find the Fibonacci Series.
function recur(num)
{
// when num is equal to 1, it returns 0 and 1
if (num == 1)
{
return [0, 1];
}
else
{
// it continuously calls the recur function till n-1
total = recur (num - 1);
/* push function add previous two terms and returns store the result into the total variable. */ 
total.push( total[ total.length - 1] + total[ total.length - 2]);
return total;
}

}
// Series of first 12 terms using Recursion.
document.write("Fibonacci Series of f(12) in JavaScript: " + recur( 12 ) + "<br>");
</script>
</body>
</html>

Output

In the above program, we have created the Fibonacci series using the recursion function that avoids the loop to display the series. The recursion function continuously calls the recur() function to print the series till the recur(12) is satisfied. At each iteration, the value of recur() function is decremented by 1 and store the value into the total variable.

Get the Fibonacci series in Reverse Order

Let's consider an example to get the Fibonacci series in Reverse Order using for loop.

Reverse.html

<html>
<head>
<title>
Reverse Fibonacci Series
</title>
</head>
<body style= "text-align: center;">
<h2> Fibonacci Series in Reverse Order </h2>
<script>
var a = 1, b = 0, res, num;
num = prompt( "Enter the number of terms ");
document.write ("Fibonacci Series of " + num + " terms  is " );
for ( var i =0; i < num; i++)
{
document.write ("  " + b);
res = a + b;
a = b;
b = res;
}
document.write( "" + "<br>");
document.write( "Fibonacci Series of " + num + " terms in Reverse Order is " + "<br>"); 
// print the series in reverse order
for ( i = 0; i < num; i++)
{
document.write( "  " +  a);
res = b - a;
b = a;
a = res;
}
</script>
</body>
</html>

Output

When the above code is executed, it shows a prompt box to take a number from the user.

Here we have entered 10 as the input and then click the OK button. After that, it generates the Fibonacci series of the first 10 terms in ascending order and in reverse order.