Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❤ 💻
We are community of people that helps each other.

If you are beginner in IT field, you are more then welcome to ask questions, it will help you to learn faster. We are here to help you.

We are always beginner in something, we just need to remember it along the way.

there are no wrong questions - Ask Question

JavaScript - Math.log() method example

0 contributions
9 points

The Math.log() method returns the natural logarithm (base e) of a number. 

// ONLINE-RUNNER:browser;

// Natural logarithm (logarithm with base e):
//                     x            y
console.log( Math.log( 1    ) ); // 0
console.log( Math.log( 7    ) ); // 1.9459101490553132
console.log( Math.log( 10   ) ); // 2.3025850929940460
console.log( Math.log( 100  ) ); // 4.6051701859880920
console.log( Math.log( 1000 ) ); // 6.9077552789821370

console.log( Math.log( -1        ) ); //  NaN
console.log( Math.log(  0        ) ); // -Infinity
console.log( Math.log( +Infinity ) ); // +Infinity

console.log( Math.E ); // 2.718281828459045

// Logarithm with custom base is placed in below example.

The Math.log() method is presented on the following chart:

Math.log(x) function visualization - JavaScript Math Object.
Math.log(x) function visualization - JavaScript Math Object.

1. Documentation

SyntaxMath.log(x)
Parametersx - integer or float number value in range 0 to +Infinitive (primitive value).
Result

number value calcualted as ln(x) mathematical function (primitive value).

If x is nagative it returns NaN.

If x is equal to 0 it returns -Infinity.

If x is equal to +Infinity it returns -Infinity.

Description

log is a static method that takes one parameter and returns an approximation of the ln(x) function (natural logarithm function - logarithm with base e).

2. Logarithm with custom base example

This example shows a logarithmic function calculation with own base.

// ONLINE-RUNNER:browser;

function calculateLogarithm(base, x) {
	var a = Math.log(x);
    var b = Math.log(base);
  
    return a / b;
}

// Logarithm with custom base:
//                               base    x               y
console.log( calculateLogarithm( 2,      2      ) ); //  1
console.log( calculateLogarithm( 2,      4      ) ); //  2
console.log( calculateLogarithm( Math.E, Math.E ) ); //  1
console.log( calculateLogarithm( 3,      9      ) ); // ~2
console.log( calculateLogarithm( 3,      81     ) ); // ~4
console.log( calculateLogarithm( 10,     10     ) ); //  1

3. Canvas plot example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style> #canvas { border: 1px solid black; } </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    
    var canvas = document.querySelector('#canvas');
    var context = canvas.getContext('2d');

    // logarithm chart range
    var x1 =  0;
    var x2 = 10;
    var y1 = -5;
    var y2 =  4;

    var dx = 0.005;

    var xRange = x2 - x1;
    var yRange = y2 - y1;

    function calculateLogarithm(base, x) {
        var a = Math.log(x);
        var b = Math.log(base);

        return a / b;
    }

    function calculatePoint(base, x) {
        var y = calculateLogarithm(base, x);

        // chart will be reversed horizontaly because of reversed canvas pixels

        var nx = (x - x1) / xRange;       // normalized x
        var ny = 1.0 - (y - y1) / yRange; // normalized y

        var point = {
            x: nx * canvas.width,
            y: ny * canvas.height
        };

        return point;
    }

    function drawChart(base, color, thickness) {
        var point = calculatePoint(base, x1);

        context.beginPath();
        context.lineWidth = thickness;
      	context.strokeStyle = color;
        context.moveTo(point.x, point.y);

        for (var x = x1 + dx; x < x2; x += dx) {
            point = calculatePoint(base, x);
            context.lineTo(point.x, point.y);
        }

        point = calculatePoint(base, x2);
        context.lineTo(point.x, point.y);
        context.stroke();
    }
    
    console.log('log_2(x)  <- red');
    console.log('log_e(x)  <- green');
    console.log('log_10(x) <- blue');
    
    //           base     color   thickness
    drawChart(      2, '#ff001b',       0.8 ); // red
    drawChart( Math.E, '#159600',       2   ); // green
    drawChart(     10, '#0000ff',       0.8 ); // blue

    console.log('x range: <' + x1 + '; ' + x2 + '>');
    console.log('y range: <' + y1 + '; ' + y2 + '>');

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

References

  1. Natural logarithm - Wikipedia

0 contributions

Suggested wiki articles:

Suggested findings

Let's do the work and have some fun
  • Dirask is online IT community for professionals and hobbyist to share their knowledge and help each other in extraordinary easy way. ❤ đź’» 🙂
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    we will help you. 👍 ✔ 🦄
Read more