EN
JavaScript - Math.log() method example
9 points
The Math.log()
method returns the natural logarithm (base e) of a number.
xxxxxxxxxx
1
// x y
2
console.log( Math.log( 1 ) ); // 0
3
console.log( Math.log( 7 ) ); // 1.9459101490553132
4
console.log( Math.log( 10 ) ); // 2.3025850929940460
5
console.log( Math.log( 100 ) ); // 4.6051701859880920
6
console.log( Math.log( 1000 ) ); // 6.9077552789821370
7
8
console.log( Math.log( -1 ) ); // NaN
9
console.log( Math.log( 0 ) ); // -Infinity
10
console.log( Math.log( +Infinity ) ); // +Infinity
11
12
13
console.log( Math.E ); // 2.718281828459045
14
15
// Logarithm with custom base is placed in the below example.
The Math.log()
method is presented on the following chart:

Syntax | Math.log(x) |
Parameters | x - integer or float number value in range 0 to +Infinitive (primitive value). |
Result |
If If If |
Description |
|
This example shows a logarithmic function calculation with own base.
xxxxxxxxxx
1
function calculateLogarithm(base, x) {
2
var a = Math.log(x);
3
var b = Math.log(base);
4
5
return a / b;
6
}
7
8
// Logarithm with custom base:
9
// base x y
10
console.log( calculateLogarithm( 2, 2 ) ); // 1
11
console.log( calculateLogarithm( 2, 4 ) ); // 2
12
console.log( calculateLogarithm( Math.E, Math.E ) ); // 1
13
console.log( calculateLogarithm( 3, 9 ) ); // ~2
14
console.log( calculateLogarithm( 3, 81 ) ); // ~4
15
console.log( calculateLogarithm( 10, 10 ) ); // 1
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style> #canvas { border: 1px solid black; } </style>
5
</head>
6
<body>
7
<canvas id="canvas" width="400" height="400"></canvas>
8
<script>
9
10
var canvas = document.querySelector('#canvas');
11
var context = canvas.getContext('2d');
12
13
// logarithm chart range
14
var x1 = 0;
15
var x2 = 10;
16
var y1 = -5;
17
var y2 = 4;
18
19
var dx = 0.005;
20
21
var xRange = x2 - x1;
22
var yRange = y2 - y1;
23
24
function calculateLogarithm(base, x) {
25
var a = Math.log(x);
26
var b = Math.log(base);
27
28
return a / b;
29
}
30
31
function calculatePoint(base, x) {
32
var y = calculateLogarithm(base, x);
33
34
// chart will be reversed horizontaly because of reversed canvas pixels
35
36
var nx = (x - x1) / xRange; // normalized x
37
var ny = 1.0 - (y - y1) / yRange; // normalized y
38
39
var point = {
40
x: nx * canvas.width,
41
y: ny * canvas.height
42
};
43
44
return point;
45
}
46
47
function drawChart(base, color, thickness) {
48
var point = calculatePoint(base, x1);
49
50
context.beginPath();
51
context.lineWidth = thickness;
52
context.strokeStyle = color;
53
context.moveTo(point.x, point.y);
54
55
for (var x = x1 + dx; x < x2; x += dx) {
56
point = calculatePoint(base, x);
57
context.lineTo(point.x, point.y);
58
}
59
60
point = calculatePoint(base, x2);
61
context.lineTo(point.x, point.y);
62
context.stroke();
63
}
64
65
console.log('log_2(x) <- red');
66
console.log('log_e(x) <- green');
67
console.log('log_10(x) <- blue');
68
69
// base color thickness
70
drawChart( 2, '#ff001b', 0.8 ); // red
71
drawChart( Math.E, '#159600', 2 ); // green
72
drawChart( 10, '#0000ff', 0.8 ); // blue
73
74
console.log('x range: <' + x1 + '; ' + x2 + '>');
75
console.log('y range: <' + y1 + '; ' + y2 + '>');
76
77
</script>
78
</body>
79
</html>