EN
JavaScript - Math.log10() method example
9 points
The Math.log10() method returns the logarithm with base 10 of a number.
xxxxxxxxxx1
// Logarithm with base 10:2
// x y3
console.log( Math.log10( 1 ) ); // 04
console.log( Math.log10( 3 ) ); // 0.477121254719662445
console.log( Math.log10( 10 ) ); // 16
console.log( Math.log10( 100 ) ); // 27
console.log( Math.log10( 1000 ) ); // 38
9
console.log( Math.log10( -1 ) ); // NaN10
console.log( Math.log10( 0 ) ); // -Infinity11
console.log( Math.log10( +Infinity ) ); // +Infinity12
The Math.log10() method is presented on the following chart:
| Syntax | Math.log10(x) |
| Parameters | x - integer or float number value in the range 0 to +Infinity (primitive value). |
| Result |
If If If |
| Description |
|
xxxxxxxxxx1
if (Math.log10 == null) {2
Math.log10 = function(x) {3
/*4
1. Using logarithm definition:5
b^y = x <=> log_b(x) = y6
Where: b - base7
8
2. We can create system of equations:9
y = log_b(x)10
x = b^y11
12
3. Which can be expressed as:13
x = b^log_b(x)14
15
4. We can transform equation:16
log_10(x) = log_10(e^log_e(x)) = log_10(e) * log_e(x) = log_e(x) * log_10(e)17
18
5. It can be written in JavaScript:19
log_10(e) <=> Math.LOG10E 20
log_e(x) * log_10(e) <=> Math.log(x) * Math.LOG10E21
*/22
return Math.log(x) * Math.LOG10E;23
};24
}25
26
// Usage example:27
// x y28
console.log( Math.log10( 1 ) ); // 029
console.log( Math.log10( 3 ) ); // 0.477121254719662430
console.log( Math.log10( 10 ) ); // 131
console.log( Math.log10( 100 ) ); // 232
console.log( Math.log10( 1000 ) ); // 333
34
console.log( Math.log10( -1 ) ); // NaN35
console.log( Math.log10( 0 ) ); // -Infinity36
console.log( Math.log10( +Infinity ) ); // +Infinityxxxxxxxxxx1
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 range14
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 pixels35
36
var nx = (x - x1) / xRange; // normalized x37
var ny = 1.0 - (y - y1) / yRange; // normalized y38
39
var point = {40
x: nx * canvas.width,41
y: ny * canvas.height42
};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 thickness70
drawChart( 2, '#ff001b', 0.8 ); // red71
drawChart( Math.E, '#159600', 0.8 ); // green72
drawChart( 10, '#0000ff', 2 ); // blue73
74
console.log('x range: <' + x1 + '; ' + x2 + '>');75
console.log('y range: <' + y1 + '; ' + y2 + '>');76
77
</script>78
</body>79
</html>