If you work with graphics, machine learning, game development, or 3D rendering, you need matrix operations. If you skipped linear algebra in college (or never took it), here is the practical subset that covers most real-world use cases.
What a matrix is
A matrix is a 2D array of numbers. That is all. No mystery. A 3x3 matrix has 3 rows and 3 columns:
| 1 2 3 |
| 4 5 6 |
| 7 8 9 |
In JavaScript:
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
Matrix addition and subtraction
Element-wise. Both matrices must have the same dimensions.
function add(A, B) {
return A.map((row, i) => row.map((val, j) => val + B[i][j]));
}
Matrix multiplication
This is where most developers stumble. Matrix multiplication is NOT element-wise. The element at position (i,j) in the result is the dot product of row i from matrix A and column j from matrix B.
Requirements: A must have the same number of columns as B has rows. An m*n matrix times an n*p matrix produces an m*p matrix.
function multiply(A, B) {
const rows = A.length;
const cols = B[0].length;
const n = B.length;
const result = Array.from({ length: rows }, () =>
Array(cols).fill(0)
);
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
for (let k = 0; k < n; k++) {
result[i][j] += A[i][k] * B[k][j];
}
}
}
return result;
}
Key property: matrix multiplication is NOT commutative. A * B is usually NOT equal to B * A. This catches developers constantly in graphics programming where transformation order matters.
The identity matrix
The identity matrix is the matrix equivalent of 1. Multiplying any matrix by the identity matrix returns the original matrix.
| 1 0 0 |
| 0 1 0 |
| 0 0 1 |
function identity(n) {
return Array.from({ length: n }, (_, i) =>
Array.from({ length: n }, (_, j) => i === j ? 1 : 0)
);
}
Transpose
Swap rows and columns. Row i becomes column i.
function transpose(M) {
return M[0].map((_, j) => M.map(row => row[j]));
}
Transpose is used constantly in machine learning. If your data has features as columns and samples as rows, transposing gives you features as rows and samples as columns. Many algorithms expect a specific orientation.
Determinant
The determinant of a square matrix is a single number that tells you whether the matrix is invertible (nonzero determinant) or singular (zero determinant).
For a 2x2 matrix:
function det2x2(M) {
return M[0][0] * M[1][1] - M[0][1] * M[1][0];
}
For larger matrices, use cofactor expansion:
function determinant(M) {
const n = M.length;
if (n === 1) return M[0][0];
if (n === 2) return det2x2(M);
let det = 0;
for (let j = 0; j < n; j++) {
const minor = M.slice(1).map(row =>
[...row.slice(0, j), ...row.slice(j + 1)]
);
det += M[0][j] * determinant(minor) * (j % 2 === 0 ? 1 : -1);
}
return det;
}
Practical applications
CSS transforms. Every CSS transform (translate, rotate, scale, skew) is a matrix operation. The browser computes a 4x4 transformation matrix and applies it to every pixel.
/* This CSS */
transform: rotate(45deg) scale(1.5) translate(10px, 20px);
/* Is internally computed as a matrix multiplication */
transform: matrix(1.06, 1.06, -1.06, 1.06, -11.21, 25.61);
3D graphics. Game engines and 3D renderers use 4x4 matrices for everything: camera position, object transforms, projection from 3D to 2D screen coordinates.
Machine learning. Neural networks are essentially chains of matrix multiplications with nonlinear activations between them. The weights of a neural network are stored as matrices.
Image processing. Convolution (blur, sharpen, edge detection) is a matrix operation. A convolution kernel is a small matrix multiplied against patches of the image.
For computing matrix operations interactively, I keep a calculator at zovo.one/free-tools/matrix-calculator. It handles multiplication, determinants, inverses, transposes, and eigenvalues. Useful for verifying implementations and working through textbook exercises.
I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.
SOCIAL SHARE CARD GENERATOR