Battlefy
Published in

Battlefy

How to avoid math and profit from it

Off-by-one error is one of the most common bugs. We can reduce this category of bugs with how we choose to write code. The more math present in our code, the more opportunities for errors.

This blog post will run through several scenarios that can be solved with typical math heavier patterns and alternative reduced math solutions. By doing less math in our code, we are allowing computers to do what they are meant for.

The code samples are written in JavaScript and may include lodash (imported as _).

Access every element in an array

// BEFORE
for (let i = 0; i < array.length; i++) {
const element = array[i];
..
}
// AFTER
for (const element of array) {
..
}

Common errors

  • using var instead of let (causes i to be visible outside of for loop)
  • using const instead of let (loop fails on i++)
  • typo , instead of ; (comma surprisingly is an operator)
  • typo i <= array.length
  • typo i < array.length — 1
  • typo j instead of i (hard to detect if j has been defined before the loop)
  • typo array(i) instead of array[i] (especially hard to detect if array is typeof function which happens to be used in an array-like fashion)

Access every element in an array with an index

// BEFORE
for (let i = 0; i < array.length; i++) {
const element = array[i];
..
}
// AFTER
array.forEach((element, i) => {
..
});

Access every element in an array in reverse

// BEFORE
for (let i = array.length - 1; i >= 0; i--) {
const element = array[i];
..
}
// AFTER
for (const element of [...array].reverse()) {
..
}

Common errors (omits one similar to “Access every element in an array”)

  • typo let i = array.length
  • typo i > 0

Transform every element into a new array

// BEFORE
const result = [];
for
(let i = 0; i < array.length; i++) {
result[i] = someFunction(array[i]);
}
// AFTER
const result = array.map((element) => someFunction(element));

Alternatively, if someFunction ignores parameters after the first, shorten to array.map(someFunction).

Concatenate two arrays

// BEFORE
const result = [];
for (let i = 0; i < array1.length; i++) {
result[i] = array1[i];
}
for (let i = 0; i < array2.length; i++) {
result[array1.length + i] = array2[i];
}
// AFTER
const result = [...array1, ...array2];

Combine two arrays pair-wise with some function

// BEFORE
const result = [];
for (let i = 0; i < Math.max(array1.length, array2.length); i++) {
result[i] = someFunction(array1[i], array2[i]);
}
// AFTER
const result = _.zip(array1, array2).map(([element1, element2]) => someFunction(element1, element2));

Note someFunction will receive undefined items from the shorter array.

Take first n elements from an array

// BEFORE
const result = [];
for (let i = 0; i < Math.min(n, array.length); i++) {
result[i] = array[i];
}
// AFTER
const
result = array.slice(0, n);

Drop first n elements from an array

// BEFORE
const result = [];
for (let i = n; i < array.length; i++) {
result[i - n] = array[i];
}
// AFTER
const result = array.slice(n);

Take last n elements from an array

// BEFORE
const result = [];
const init = Math.max(0, array.length - n);
for (let i = init; i < array.length; i++) {
result[i - init] = array[i];
}
// AFTER
const result = array.slice(-n);

Drop last n elements from an array

// BEFORE
const result = [];
for (let i = 0; i < Math.max(0, array.length - n); i++) {
result[i] = array[i];
}
// AFTER
const result = array.slice(0, -n);

Take subarray from start to end index

// BEFORE
const subarray = [];
for
(let i = start; i < Math.min(end, array.length); i++) {
subarray[i - start] = array[i];
}
// AFTER
const subarray = array.slice(start, end);

Drop subarray from start to end index

// BEFORE
const subarray = [];
for
(let i = 0; i < Math.min(start, array.length); i++) {
subarray[i] = array[i];
}
for (let i = end; i < array.length; i++) {
subarray[start + i] = array[i];
}
// AFTER
const subarray = [...array.slice(0, start), ...array.slice(end)];

Take subarray from start index to length n

// BEFORE
const subarray = [];
for
(let i = start; i < Math.min(start + n, array.length); i++) {
subarray[i - start] = array[i];
}
// AFTER
const subarray = array.slice(start);
subarray.length = n;

Drop subarray from start index to length n

// BEFORE
const subarray = [];
for
(let i = 0; i < Math.min(start, array.length); i++) {
subarray[i] = array[i];
}
for (let i = start + n; i < array.length; i++) {
subarray[start + i] = array[i];
}
// AFTER
const subarray = [...array];
subarray.splice(start, n);

Note the splice, not to be confused with slice.

Create array of length n with fill value

// BEFORE
const result = [];
for (let i = 0; i < n; i++) {
result[i] = value;
}
// AFTER
const result = Array(n).fill(value);

If someFunction needs the index, use Array.from({length: n}, (_, i) => someFunction(i)).

Pad end of array to length n with fill value

// BEFORE
const result = [];
const paddedLength = Math.max(0, n - array.length);
for (let i = 0; i < array.length; i++) {
result[i] = array[i];
}
for (let i = 0; i < paddedLength; i++) {
result[array.length + i] = value;
}
// AFTER
const result = Object.assign(Array(n).fill(value), ...array);

Pad start of array to length n with fill value

// BEFORE
const result = [];
const paddedLength = Math.max(0, n - array.length);
for (let i = 0; i < paddedLength; i++) {
result[i] = value;
}
for (let i = 0; i < array.length; i++) {
result[paddedLength + i] = array[i];
}
// AFTER
const result = Object.assign(Array(n).fill(value), [...array].reverse()).reverse();

Oof, that’s not great. But neither is [...Array(n).fill(value), ...array].slice(-(Math.max(n, array.length)). Leave a response if you have a better solution.

Extract head and tail from an array

// BEFORE
const head = array[0];
const tail = []
for (let i = 1; i < array.length; i++) {
tail[i - 1] = array[i];
}
// AFTER
const [head, ...tail] = array;

Extract initial and last from an array

// BEFORE
const initial = [];
for (let i = 0; i < array.length - 1; i++) {
initial[i] = array[i];
}
const last = array[array.length - 1];
// AFTER
const initial = array.slice(0, -1);
const last = array.at(-1);

Chunk by size n

// BEFORE
const result = [];
for (let i = 0; i < array.length; i += n) {
const chunk = [];
for (let j = 0; j < n && i + j < array.length; j++) {
chunk[j] = array[i + j];
}
result.push(chunk);
}
// AFTER
const result = [];
while (array.length) {
result.push(array.splice(0, n)); // modifies array
}

If one cannot modify the existing array, use lodash’s chunk.

Access matrix by columns

// BEFORE
for (let i= 0; i < matrix[0].length; i++) {
const column = [];
for(let j = 0; j < matrix.length; j++) {
column[i] = matrix[j][i];
}
// use column
..
}
// AFTER
for (const column of _.unzip(matrix)) { // unzip is transpose
// use column
..
}

This assumed matrix is rectangular.

Be careful with mathless code in production

While the examples show how to write less math, some are definitely harder to read and understand. Do not use these mathless forms it made your production code worse.

Do you want to write less math? You’re in luck, Battlefy is hiring.

--

--

--

Battlefy is the simplest way to start, manage, and find esports tournaments.

Recommended from Medium

Should I Upgrade to React 17?

How to fix node version in a Web-App

How to add Discord OAuth to your Sapper web application

The tools for the job — How I code frontend apps in 2020

How to create a VSCode extension using React

React: Flow and Lifecycle

Laravel Sanctum — Restful API Authentication

Laravel Sanctum - Restful API Authentication

Common rxjs patterns

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
Ronald Chen

Ronald Chen

Principal developer at Battlefy

More from Medium

The Fundamentals of TypeScript, in Increasing Levels of Difficulty

Solving supply chain attacks once and for all

SOLID: The Open-Closed Principle and the Double-Edged Sword

What is TypeScript and why would I use it in place of JavaScript?