How to get the standard deviation of an array of numbers using JavaScript?

JavascriptProgramming ScriptsWeb DevelopmentFront End Technology

In this tutorial, we will learn how to calculate the standard deviation of an array of numbers using JavaScript.

Let’s first get to know about mean, variance and standard deviation

Consider the following array of numbers −

arr: [10, 20, 30, 40]

And let’s calculate the mean, variance, and standard deviation of this array.

Mean − It is the average of all the array elements.

In a simple way it is sum of all the array element / number of array element.

mean= (10+20+30+40)/4 = 25

Variance − The variance is the sum of the squared difference from the mean / number of array element.

Variance= ((10-25)^2 +(20-25)^2 +(30-25)^2 +(40-25)^2 ) / 4 = ( 225 + 100 + 25 + 225 ) / 4 = 143.75

Standard Deviation − It is square root of the variance.

Standard deviation = (variance)^1/2
Standard Deviation= (143.75)^1/2= 11.989

Basically, standard deviation is calculation of how far a collection of number deviate from the average. When standard deviation is there it means numbers are close to the mean.

As no built-in support that is method is available in JavaScript but using Math library of JavaScript, we can achieve our work.

Procedure

We could follow the below steps to get the standard deviation of an array of numbers using JavaScript −

Step 1 − Calculate mean of the given array first

Step 2 − Calculate variance of that array using mean

Step 3 − Finally Calculate Standard Deviation by help of calculated mean and variance.

Step 1: Calculate mean of the given array first

Consider

arr: [1, 2, 3, 4, 5]

and we will perform all the calculation on this array.

As we have to calculate mean so we will have to get the sum of the array so we use here Array.reduce() method as you know reduce method reduce the array to the single value, so single which will be sum it will return then we will divide that sum with number of array elements.

const mean=arr.reduce((ele1, ele2) => ele1+ele2) / 5
//here 5 is the array size
//mean = 15/5 = 3

Step 2: Calculate variance of that array using mean

For calculating variance, we will use map method and while traversing we will calculate (current element-mean)^2 to all the array items.

const variance=
arr.map(ele=> Math.pow(ele- mean, 2)).reduce((a, b) =>a+b)
//variance= (4+1+0+1+4) / 5 = 2

Step 3: Finally Calculate Standard Deviation

For Standard Deviation, simply apply Math.sqrt (variance).

const standard_dev= Math.sqrt(variance)
//(2)^1/2= 1.4142135623730951

Example

Let’s see the full JavaScript code

<html> <head> <title>Get standard deviation of an array of numbers using JavaScript.</title> </head> <body> <p id="result1">Original Array: </p> <input type="button" value="Calcualte" onclick="Standard_deviation()" /> <p id="result2">Standard Devialtion: </p> <script> let arr = [1, 2, 3, 4, 5] document.getElementById("result1").innerHTML += arr; function Standard_deviation() { const len = arr.length; var mean = arr.reduce((ele1, ele2) => ele1 + ele2) / len; const variance = arr.map(ele => Math.pow(ele - mean, 2)). reduce((a, b) => a + b) / len; const Standard_Deviation = Math.sqrt(variance) document.getElementById("result2").innerHTML += Standard_Deviation } </script> </body> </html>

Here when the button Calculate will be clicked then it will call the function Standard_deviation which will calculate the standard deviation of the provided array, you can check by changing the values of the array.

So, this is how we saw the procedure to find the standard deviation of an array of numbers.

raja
Updated on 11-Oct-2022 08:23:47

Advertisements