JavaScript Matrix

We will study the JavaScript matrix in this article. Let us first comprehend about array and matrix.

We all know how to create a dimensional array but most of us do not know how to create a 2-dimensional array so in this article we will learn how to construct an array of 2-dimensional in JavaScript.

Array

An array is a variable that can hold more than one value of the same type. The array can be one-dimensional, two-dimensional, three-dimensional, etc.

Example:

The above array named "cricketers" is a one-dimensional array that contains the name of cricketers only which means an array can hold the value of the same type of data.

Constructing an array in JavaScript:

We can create an array in JavaScript by utilizing array literal.

Syntax:

In the above-provided syntax, the "var" is the keyword that is utilized to create an array that can be initialized at any time. The "arrayName" is the name of the array. The element1, element2 and element3 are the same kind of elements present in the array.

Matrix

A matrix is a rectangular array that consists of rows and columns. It is similar to a table or grid that contains rows and columns.

Dimensions of matrix

Following are the examples that show the dimensions of a matrix:

Example-1:

The above matrix contains one row and two columns which means this matrix has a dimension of (1 x 2).

Example-2:

The above matrix contains two rows and three columns which means this matrix has a dimension of (2 x 3).

Matrix in JavaScript

In JavaScript, the matrix is also called an array of arrays or multidimensional array.

Operations of Matrix

Let us first consider the following matrix on which we will perform all operations.

var A = [[9, 1, 5], [3, 2, 5], [4, 8, 6]];
var B = matrix(A);

Following are the operations that are performed by the matrix:

1. Row:

It is utilized to return the row.

B(0);

It returns [9, 1, 5].

2. Column:

It is utilized to return the column.

B([], 0);

It returns [[9], [3], [4]].

3. Identity:

B();

It returns [[9, 1, 5], [3, 2, 5], [4, 8, 6]].

4. Range:

B([1,2]);

It returns [[3, 2, 5], [4, 8, 6]].

5. Set:

B.set(0).to(0);

It returns [[0, 0, 0], [3, 2, 5], [4, 8, 6]].

6. Size:

It is utilized to find the size of the matrix.

B.size();

It returns [3, 3].

7. Addition:

It is utilized to add two matrices.

B.add(C);

It adds matrix B and matrix C.

8. Subtraction:

It is utilized to subtract one matrix from another.

C.sub(B);

It subtracts matrix B from matrix C.

9. Multiplication:

It is utilized to multiply two matrices.

B.mul(C);

It multiplies matrices B and C.

10. Division:

It is utilized to divide one matrix by another.

B.div(C);

It divides matrix B by matrix C.

11. Product:

It is utilized to calculate the product of two matrices.

B.prod(C);

It returns the product of matrix B and matrix C.

12. Transpose:

It is utilized to find the transpose of a matrix.

B.trans();

It transposes the matrix B.

13. Inverse:

It is utilized to inverse a matrix.

C.inv();

It inverses the matrix C.

14. Determinant:

It is utilized to calculate the determinant of a matrix.

B.det();

It returns the determinant of B.

15. Merge:

Two matrices can be merged in the top, bottom, left and right directions.

Top direction:

A = matrix([2, 4, 6, 8]);
A.merge.top([1, 3, 5, 7]);

It merges the matrix in the top direction.

Bottom direction:

A = matrix([2, 4, 6, 8]);
A.merge.bottom([1, 3, 5, 7]);

It merges the matrix in the bottom direction.

Left direction:

A = matrix([[2, 4], [6, 8]]);
A.merge.left([1, 3], [5, 7]);

It merges the matrix in the left direction.

Right direction:

A = matrix([[2, 4], [6, 8]]);
A.merge.right([1, 3], [5, 7]);

It merges the matrix in the right direction.

16. Equals:

It is utilized to check whether the two matrices are equal or not.

Demonstrations of JavaScript Matrix

Let us see demonstrations for some of the matrix operations in JavaScript.

Demonstration-1:

We will construct a program for adding matrix A and matrix B.

Code:

let A = [ 
	[2, 2, 2, 2], 
	[2, 2, 2, 2], 
	[2, 2, 2, 2], 
	[2, 2, 2, 2], 
]; 

let B = [ 
	[7, 7, 7, 7], 
	[6, 6, 6, 6], 
	[2, 2, 2, 2], 
	[1, 1, 1, 1], 
]; 
let result = []; 
for (let i = 0; i < A.length; i++) { 
	let r = ""; 
	for (let j = 0; j < A[i].length; j++) { 
		r += A[i][j] + B[i][j] + " "; 
	} 
	result.push(r.trim()); 
} 
result.forEach(r => console.log(r));

Output:

We can witness a resultant matrix which is the addition of matrix A and matrix B.

Demonstration-2:

We will build up a program to subtract matrix B from matrix A.

Code:

function subtract(A, B) {
  const outcome = [];

  for (let i = 0; i < A.length; ++i) {
    const row = [];

    for (let j = 0; j < A[i].length; ++j) {
      row.push(A[i][j] - B[i][j]);
    }

    outcome.push(row);
  }

  return outcome;
}


function display(matrix) {
  for (let i = 0; i < matrix.length; ++i) {
    console.log(matrix[i].join('\t'));
  }
}


const A = [
  [4, 2, 1],
  [8, 2, 3],
  [5, 7, 8]
];

const B = [
  [2, 5, 1],
  [8, 7, 6],
  [2, 1, 9]
];


const outcome = subtract(A, B);


console.log("A:");
display(A);

console.log("\nB:");
display(B);

console.log("\nResultant Matrix (A - B):");
display(outcome);

Output:

We can witness a resultant matrix which is the subtraction of matrix B from matrix A.

Demonstration-3:

We will construct a program to multiply matrix A and matrix B.

Code:

function multiplyMatrices(matrixA, matrixB) {
  const result = [];

  const m = matrixA.length;
  const n = matrixA[0].length;
  const p = matrixB[0].length;

  for (let i = 0; i < m; ++i) {
    result[i] = Array(p).fill(0);
  }

  for (let i = 0; i < m; ++i) {
    for (let j = 0; j < p; ++j) {
      for (let k = 0; k < n; ++k) {
        result[i][j] += matrixA[i][k] * matrixB[k][j];
      }
    }
  }

  return result;
}

function displayMatrix(matrix) {
  for (let i = 0; i < matrix.length; ++i) {
    console.log(matrix[i].join('\t'));
  }
}
const matrixA = [
  [4, 1, 1],
  [2, 3, 5],
  [5, 6, 2]
];

const matrixB = [
  [5, 4, 1],
  [0, 7, 9],
  [6, 1, 0]
];

const resultantMatrix = multiplyMatrices(matrixA, matrixB);

console.log("First Matrix:");
displayMatrix(matrixA);

console.log("\nSecond Matrix:");
displayMatrix(matrixB);

console.log("\nResultant Matrix:");
displayMatrix(resultantMatrix);

Output:

Here in the outcome we can witness a resultant matrix which is the multiplication of matrix A and matrix B.

Demonstration-4:

We will construct a JavaScript program to divide matrix C by matrix D.

Code:

function divide(matrix) {
  for (let i = 0; i < matrix.length; ++i) {
    console.log(matrix[i].map(num => num.toFixed(2)).join("\t"));
  }
}

function matrixDivision(C, D) {
  const outcome = [];

  for (let i = 0; i < C.length; ++i) {
    outcome[i] = [];
    for (let j = 0; j < C[i].length; ++j) {
      outcome[i][j] = C[i][j] / D[i][j];
    }
  }


  console.log("Result of matrix division:");
  divide(outcome);
}


const C = [
  [10.0, 20.0],
  [25.0, 2.0]
];
const D = [
  [5.0, 4.0],
  [2.0, 1.0]
];

matrixDivision(C, D);

Output:

Here is the outcome in which we can have a gaze at the resultant matrix which is the division of matrix C by matrix D.

Conclusion:

We have understood the JavaScript Matrix in this article. A matrix is a two-dimensional array that contains rows and columns. There are many operations that can be performed on matrices and we have discussed some of the operations with the assistance of demonstrations.

Next TopicgroupBy() in JavaScript

← prev next →