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

# Introduction

A **vector** is a quantity that has both size — or magnitude — and direction; as opposed to a **scalar** quantity, which has size only.

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):

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

`const `**u** = [4, 1]

# Scalar Multiplication

Vectors can be stretched or squeezed by a scalar quantity.

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).

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) => **a**.map(x => 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:

constu= [4,1]

const k = 2

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

# Vector Addition

Two vectors can be added ‘head-to-tail’ by adding respective coordinates:

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

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:

constu= [4,1]

constv= [2,3]

constw= f(u,v)console.log(w) // [6, 4]

# Magnitude and Direction

The magnitude — or length — of a vector is denoted by vertical bars on each side of the variable name:

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(x.map(squared));`

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.24497866312686414console.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?

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.*