Arrow functions, and Array map and reduce Operations: An Introduction to Vector Algebra with JavaScript — Part 1

Photo by SpaceX on Unsplash


They are of fundamental importance in science and engineering and can describe all kinds of physical phenomena: such as air rushing past an aircraft’s wing, or forces acting on a rollercoaster.

A vector is written in bold, like a and b, and is often seen in diagrams as pointed arrows.

Let’s start with the following vector, u, which is described by an arrow 4 units in the positive x-axis direction, and 1 unit up in the positive y-axis direction:

The graph shows vector u from point A (0,0) to point B (4,1):

Courtesy of

The easiest way to represent this with JavaScript is using an array:

const u = [4, 1]

Scalar Multiplication

Mathematically, a scalar k is applied to vector u by multiplying each element of u by k:

Continuing with the previous example, we can create a new vector w, which is twice the length of vector u:

Again, beginning at the origin A (0,0), vector w stretches to the new location of B, which is now at coordinates (8,2).

Courtesy of

Scaling is straightforward to achieve in JavaScript by multiplying each array member by a constant k in a for-loop.

However, a more convenient way to do this is to use an array’s map function. The following inline function expression accepts a vector array and scaling constant:

const f = (a, k) => => x * k)

Here, we also make use of JavaScript’s arrow function notation, where the function keyword is ditched in favor of a ‘fat arrow’ (=>).

For example, let’s create vector w, from the diagram above, by scaling vector u by a factor of 2. I’ve used bold in the code to indicate which quantities are vectors:

const u = [4,1]
const k = 2
const w = f(u, k)
console.log(w) // [8, 2]

Vector Addition

Courtesy of

The addition of vectors u and v could be represented as a new vector w, as follows:

Courtesy of

We can again use the map operator with a variable, e, which keeps track of the running total at each index:

const f = (a, b) => [...a].map((e,i) => e + b[i])

We add vectors u and v as follows:

const u = [4,1]
const v = [2,3]
const w = f(u, v)
console.log(w) // [6, 4]

Magnitude and Direction

The general form for the magnitude of an n-dimensional vector from the origin is:

We can calculate the square of each element again with the map method:

const squared = x => Math.pow(x, 2);

However, let’s use JavaScript’s reduce method instead this time to add up an array of elements, as shown in the following example. This method takes two parameters: the running-total and the current square:

const sum = x => x.reduce((a, x) => a + x, 0);

Let’s combine what we’ve learned to write one possible expression to calculate a vector’s magnitude:

const sumOfSquares = x => sum(;
const magnitude = a => Math.sqrt(sumOfSquares(a));

Consider the first vector we defined earlier:

The magnitude of our vector AB is:

const vector = [4,1];
console.log(magnitude(vector)); // 4.123105625617661

We can also find the angle that AB makes with the positive x-axis using the following formula for two-dimensional vectors:

We can calculate this angle in radians using the arctan method of the JavaScript Math object, then convert it to degrees:

const convertRadiansToDegrees = x => x * 180 / Math.PI;
const radians = Math.atan(1/4);
const degrees = convertRadiansToDegrees(radians);

The results are:

console.log(`Result in radians: ${radians}`)
// Result in radians: 0.24497866312686414
console.log(`Result in degrees: ${degrees}`)
// Result in degrees: 14.03624346792647

Similarly, what about the distance and angle that BC makes the positive direction of the x-axis?

Courtesy of

If we begin with some initial point (x1, y1) and a terminal point (x2, y2), the distance between these two points is:

I will leave this as an exercise for the reader to calculate the magnitude and angle of BC.

George is a software engineer, author, blogger, and tech enthusiast who believes in helping others to make us happier and healthier.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store