Forem: Travis van der F.

Beyond Code, Into Systems

Travis van der F. — Wed, 01 Apr 2026 20:28:31 +0000

Handling traffic is easy.

Handling millions of users at once?
That’s where real engineering begins 🚀

Behind every scalable app, there’s an architecture that quietly does the heavy lifting.

📌 Core building blocks:
→ API Gateway is the single clean entry point.
→ Load Balancer spreads traffic intelligently.
→ Frontend Servers serve users in real time.
→ CDN/Edge brings content closer to users.
→ Cache speeds things up and reduces pressure.
→ Auto Scaling adapts instantly to demand.

The goal isn’t just to make it work 💡
It is to make it fast, resilient, and always available.
Because users don’t see your system design, they feel it.

If you are building products, do not stop at code.
Start thinking in systems 🤔⚙️

Array Traversal Patterns

Travis van der F. — Thu, 22 Jan 2026 10:45:02 +0000

Array Traversal

An array is a data structure that stores multiple elements (usually of the same type) in an ordered sequence, where each element is accessed by its index. Arrays can be 1D (a simple list) or 2D (a grid or table with rows and columns), and beyond two dimensions are known as multidimensional.

When working with arrays, it almost always ends up performing the same basic action, which is moving through the elements one by one. Maybe it's printing values, searching for a target, adding everything up, finding an average, or updating a few items. That step-by-step process is called traversal.

Traversal is not just “looping.” It is choosing a pattern that fits the job. Sometimes the pattern is about the order in which elements are visited (forward vs. reverse). Sometimes it is about filtering, meaning that one processes only elements that match a rule (conditional traversal). And sometimes walking through multiple arrays together, keeping their matching positions aligned (parallel traversal).

Forward Traversal

Forward traversal means visiting elements in their natural order, from the first to the last. This is the most common traversal style because it matches how arrays are usually read and processed.

1D Traversal

10 → 20 → 30 → 40

[10, 20, 30, 40]

2D Traversal (row by row)

1 2 3 4 5 6 7 8 9

1 2 3
4 5 6
7 8 9

Reverse Traversal

Reverse traversal means traversing the elements in the opposite direction: from the last to the first. This is useful when the end of the array matters first, or when going backward makes a task simpler.

1D Traversal

40 → 30 → 20 → 10

[10, 20, 30, 40]

2D Traversal (reverse row-major order)

9 8 7 6 5 4 3 2 1

1 2 3
4 5 6
7 8 9

Conditional Traversal

Conditional traversal means the array is traversed, but only elements that satisfy a condition are processed. Think of it as scanning past everything, but only stopping when something meets a rule.

The condition can depend on:

The value (e.g., only values > 0).
The index/position (e.g., only even indices).
Or some specific pattern rule (e.g., only border elements).

for each element:
    if (condition is true):
        process element

Value-based condition: Only positive values

[3, -1, 8, 0, 5]

3, 8, 5

Index-based condition: Only even indices (0, 2, 4)

[10, 20, 30, 40, 50]

10, 30, 50

Parallel Traversal

Parallel traversal means traversing two or more arrays simultaneously, using the same index in each. This is useful when the arrays are related, and the goal is to compare or combine matching elements.

Parallel Traversal Pairs

(A[0], B[0]) → (A[1], B[1]) → (A[2], B[2])
= (10, 1) → (20, 2) → (30, 3)

A = [10, 20, 30]
B = [ 1,  2,  3]

Conclusion

Array traversal is really about being intentional about how elements are visited and the pattern used to visit them. The simplest way is forward traversal, which goes from the start to the end of an array, which is the natural way most programs read data. A reverse traversal goes through the elements in the opposite direction, starting at the last element and moving backward. This is helpful if you want to process recent items first, reverse a sequence, or make comparisons from the end.

Sometimes, the goal is to pick certain elements, not just follow an order. This is called conditional traversal. You still go through the array, but you only act on elements that meet a rule, like “positive numbers only,” “even indices only,” or “border elements only.” Many special traversal types are just conditional traversals with a specific rule.

Finally, parallel traversal shifts the focus from a single array to multiple arrays at once. Instead of choosing special positions inside a single structure, two (or more) arrays are iterated together using the same index. This is useful for comparing lists, combining corresponding values, or producing element-by-element results.

A helpful way to remember it is:

Forward traversal

Focus on the order of elements:
Visit elements from the first index to the last:
index 0 → n-1

Reverse traversal

Focus on the order of elements:
Visit elements from the last index to the first:
index n-1 → 0

Conditional traversal

Visit all elements, but only act on some (which elements meet the rule):
e.g., process only even numbers.

Parallel traversal

Working with several arrays at once!
Going through multiple arrays at the same time using the same index:
e.g., matching names with scores.

With that foundation, the next natural step is to explore traversal patterns in 2D arrays (matrices) that select elements by their positions, especially Main Diagonal Traversal and Anti-Diagonal Traversal, which use simple index relationships to pick diagonal elements in a structured way.

#HappyCoding

Continue on: Understanding Array Traversal Patterns in JavaScript

Understanding Array Traversal Patterns in JavaScript

Travis van der F. — Mon, 19 Jan 2026 14:51:33 +0000

When working with arrays, one of the most common tasks is moving through and visiting each element in an array one by one to read, manipulate (modify), or process the elements and their data. This process is called array traversal, and in this article, we'll explore how it works with two-dimensional arrays. Working with 2D arrays can feel abstract at first, but once visualized as grids or tables, common patterns become much clearer. Arrays are among the most fundamental data structures in programming, and understanding how to work with them efficiently is crucial for solving real-world problems. While simple one-dimensional arrays store a single list of items (like a row of vegetables), 2D arrays add another layer of organization. They store arrays within arrays, creating a grid-like structure. Think of the difference between a single row of carrots versus an entire garden plot with multiple rows and columns of different vegetables.

To make this clearer, it's important to understand the distinction between two-dimensional arrays and multidimensional arrays:

Two-Dimensional: These are arrays with exactly two dimensions, which are rows and columns. A 2D array is like a flat garden plot or a spreadsheet. Each element can be accessed using two indices: array[row][column]. Most common use cases involve 2D arrays: game boards (chess, tic-tac-toe), image pixel data, spreadsheet-like data, and seating charts.

Multidimensional Arrays: These extend beyond two dimensions, such as a 3D array, which is like stacking multiple garden plots on top of each other and requires three (or more) indices to access elements: array[layer][row][column]. Examples include 3D graphics and modeling, video data (frames × height × width), and scientific simulations with multiple variables across space and time.

This article focuses specifically on 2D arrays because they represent the sweet spot of complexity. They are complex enough to require special traversal patterns, but simple enough to visualize and understand intuitively. Mastering 2D array patterns provides the foundation for working with higher-dimensional arrays when needed.

Recognizing common 2D array patterns allows developers to:

Write cleaner code: Using established patterns makes code more readable and maintainable.
Solve problems faster: Many algorithmic challenges involve 2D grids and matrices.
Optimize performance: Knowing the right traversal pattern can improve efficiency.
Debug more effectively: Understanding how data is accessed makes it easier to spot issues.

Makes sense? And I am sure it is fairly straightforward. So now, let's define a 2D array (and go deeper). As previously mentioned, think of it like a vegetable garden plot divided into rows and beds. To access any vegetable, two indices are used: garden[row][column]. For example, garden[1][2] gives the bell pepper 🫑 (row 1, column 2).

const garden = [
  ['🥕', '🥬', '🌽'],
  ['🍅', '🥒', '🫑'],
  ['🥔', '🧅', '🥦']
];

It's simply an array of arrays! And in this article, we will cover three essential 2D array traversal patterns:

Main Diagonal Traversal: Moving from the top-left corner to the bottom-right corner, following a diagonal path through the array. This pattern is essential for algorithms that involve diagonal relationships, such as checking winning conditions in board games or processing the diagonal elements of a matrix.
Anti-Diagonal Traversal: Crossing from the top-right corner to the bottom-left corner. This complementary pattern is useful for checking the opposite diagonal, completing board game logic, or processing data that flows in the reverse diagonal direction.
Border Traversal: Walking around the perimeter of the array, visiting all edge elements while skipping internal ones. This pattern appears frequently in problems involving boundaries, such as image edge detection, flood fill algorithms, and spiral matrix traversals.

Pattern 1: Main Diagonal Traversal

Imagine following a diagonal garden path from the top-left corner (carrots) to the bottom-right corner (broccoli). With each step, the movement is down one row AND right one column at the same time.

Step 0: Row 0, Col 0 → ['🥕', '🥬', '🌽']
                         ↓
Step 1: Row 1, Col 1 → ['🍅', '🥒', '🫑']
                                ↓
Step 2: Row 2, Col 2 → ['🥔', '🧅', '🥦']

Since both the row and the column increase by the same amount, they're always equal. When traversing the main diagonal, the row index and column index are always the same:

// access: 🥕, 🥒, 🥦
for (let i = 0; i < garden.length; i++) {
  console.log(garden[i][i]);
}

It works because at each step i, the access is garden[i][i]:

Step 0: garden[0][0] = 🥕 (carrot)
Step 1: garden[1][1] = 🥒 (cucumber)
Step 2: garden[2][2] = 🥦 (broccoli)

Pattern 2: Anti-Diagonal Traversal

Now imagine sliding from the top-right corner to the bottom-left corner. Each step, you move down one row, BUT left one column; they move in opposite directions.

Step 0: Row 0, Col 2 → [1, 2, 3]
                              ↓
Step 1: Row 1, Col 1 → [4, 5, 6]
                           ↓
Step 2: Row 2, Col 0 → [7, 8, 9]

Notice the pattern as the row increases, the column decreases:

Row goes: 0 → 1 → 2 (increasing)
Column goes: 2 → 1 → 0 (decreasing)

let size = matrix.length; // same as garden.length

// access: 3, 5, 7
for (let i = 0; i < size; i++) {
  console.log(matrix[i][(size-1)-i]);
}

And this works because the formula ((size-1)-i)) gives the decreasing column index:

Step 0: matrix[0][2] = 3 (where 2 = (3-1)-0)
Step 1: matrix[1][1] = 5 (where 1 = (3-1)-1)
Step 2: matrix[2][0] = 7 (where 0 = (3-1)-2)

Pattern 3: Border Traversal

The trickier one, until it's understood, is just combining both diagonals. Imagine walking around the perimeter of a garden, following the fence. This path visits every vegetable on the outer edge, but skips everything in the middle beds.

Using this larger garden as the example:
START →    →     →     → 
↓  ['🥕' '🌿' '🌾' '🌽'] ↓
↓  ['🍅' '🥒' '🫑' '🌶️'] ↓
↓  ['🥔' '🧅' '🧄' '🥦'] ↓
      ←    ←     ←    ←    END

The border vegetables are: 🥕, 🌿, 🌾, 🌽, 🌶️, 🥦, 🧄, 🧅, 🥔, 🍅
The inside vegetables (NOT border): 🥒, 🫑

The key to border traversal is understanding that the path follows four separate fence sides, and on each side, one coordinate stays fixed while the other changes.

Side 1: North Fence (Moving East)

The path is on row 0, walking across all columns:

// row = 0 (fixed), col = 0, 1, 2, 3 (changing)
// gets: 🥕, 🌿, 🌾, 🌽
for (let col = 0; col < 4; col++) {
  console.log(garden[0][col]);
}

Side 2: East Fence (Moving South)

The path is in the last column, walking down all rows:

// col = 3 (fixed), row = 0, 1, 2 (changing)
// gets: 🌽, 🌶️, 🥦
for (let row = 0; row < 3; row++) {
  console.log(garden[row][3]);
}

Side 3: South Fence (Moving West)

The path is on the last row, walking backwards across columns:

// row = 2 (fixed), col = 3, 2, 1, 0 (changing backwards)
// gets: 🥦, 🧄, 🧅, 🥔
for (let col = 3; col >= 0; col--) {
  console.log(garden[2][col]);
}

Side 4: West Fence (Moving North)

The path is on column 0, walking up the rows:

// col = 0 (fixed), row = 2, 1, 0 (changing backwards)
// gets: 🥔, 🍅, 🥕
for (let row = 2; row >= 0; row--) {
  console.log(garden[row][0]);
}

Now, one might ask? How to find these magic numbers that make up the column and rows? And how does this all look together? Combining all four fence sides:

function traverseGardenBorder(garden)
{
  const rows = garden.length;    // magic number
  const cols = garden[0].length; // magic number
  const result = [];

  // north fence (west to east)
  for (let col = 0; col < cols; col++) {
    result.push(garden[0][col]);
  }

  // east fence (north to south, skip top corner)
  for (let row = 1; row < rows; row++) {
    result.push(garden[row][cols - 1]);
  }

  // south fence (east to west, skip east corner if more than 1 row)
  if (rows > 1) {
    for (let col = cols - 2; col >= 0; col--) {
      result.push(garden[rows - 1][col]);
    }
  }

  // west fence (south to north, skip both corners if more than 1 column)
  if (cols > 1) {
    for (let row = rows - 2; row >= 1; row--) {
      result.push(garden[row][0]);
    }
  }

  return result;
}

Once you understand how a 2D array is structured and picture it as movement through a space (following paths, crossing plots, and walking fences), traversal patterns become much more intuitive. The most common approach is row-wise traversal, where you visit elements left to right and top to bottom, similar to reading a page. Column-wise traversal shifts the direction, moving top to bottom through each column instead.

After the basics, you can explore more interesting patterns. Reverse traversal lets you work backward from the end. Diagonal traversal helps reveal connections across rows and columns. Spiral traversal moves around the edges and works inward, layer by layer, which often shows up in coding challenges and practical data-processing tasks.

And to close this article, if anyone is wondering why array traversal is such a fundamental concept, it is because it appears in:

Searching Elements
Sorting Algorithms
Summing or Averaging Values
Filtering Data
Mapping one array to another ⛓️
And, almost every algorithm that works with arrays!

#HappyCoding

PHP Attribute: SensitiveParameter

Travis van der F. — Tue, 13 Jan 2026 09:53:36 +0000

If you're not using it, the risk is already live. The SensitiveParameter attribute introduced in PHP 8.2 is a thoughtful security feature designed to prevent accidental exposure of sensitive data in stack traces, a small piece of metadata with a big safety payoff. It lets you mark specific function or method parameters as “do not show this if something goes wrong.” When PHP builds a backtrace (stack trace) for an exception, error, or debugging output that includes arguments, the value of any parameter marked sensitive is automatically wrapped in a protective wrapper rather than the actual value. In practice, that means a password, API key, access token, or other secret is far less likely to appear in logs, error pages, monitoring dashboards, or bug reports, where it can be copied, indexed, forwarded, or accidentally exposed.

What makes it especially useful is that it targets a very common leak path: “helpful” diagnostics. It does not encrypt anything and does not prevent your code from using the value normally; it simply reduces accidental disclosure when PHP reports what happened. Think of it as a seatbelt for observability: it will not replace good security practices like careful logging policies, secret management, and least-privilege access, but it meaningfully reduces the risk that a single crash becomes a credential leak. PHP also provides the related SensitiveParameterValue class, which prevents sensitive values from being exposed in traces.

The SensitiveParameter Attribute

This attribute marks function or method parameters as sensitive, instructing PHP to redact their values in stack traces. Instead of showing the actual value, PHP displays Object(SensitiveParameterValue) for the parameter.

class GardenAccess
{
    public function unlockGreenhouse(
        string $gardenerName,
        #[SensitiveParameter] string $accessCode): bool
    {
        // validate access code
        if (strlen($accessCode) < 8) {
            throw new InvalidArgumentException('Access code too short');
        }

        return $this->validateAccess($gardenerName, $accessCode);
    }

    private function validateAccess(string $gardenerName, string $accessCode): bool
    {
        // access validation logic (simplified example)
        $validCode = 'tomato2024secret';
        return $accessCode === $validCode;
    }
}

$garden = new GardenAccess();

try { // usage (plain text user and password (simplified example)
    $garden->unlockGreenhouse('Travis', 'carrot');
}
catch (Exception $e)
{
    echo $e->getMessage()."\n";
    echo $e->getTraceAsString();
}

In the stack trace, the $accessCode parameter appears as Object(SensitiveParameterValue) rather than showing "carrot", protecting the sensitive data even though it was invalid.

The SensitiveParameterValue Class

While #[SensitiveParameter] handles automatic redaction, the SensitiveParameterValue class provides manual control over sensitive values. This proves useful when working with values that need protection beyond just function parameters.

class VegetablePatchConfig
{
    private SensitiveParameterValue $irrigationApiKey;

    public function __construct(string $apiKey)
    {
        $this->irrigationApiKey = new SensitiveParameterValue($apiKey);
    }

    public function connectToIrrigationSystem(): void
    {
        $actualKey = $this->irrigationApiKey->getValue();

        // key for API authentication
        if (!$this->authenticateWithKey($actualKey)) {
            throw new RuntimeException('Irrigation system authentication failed');
        }
    }

    private function authenticateWithKey(string $key): bool
    {
        // authentication logic (simplified example)
        return strlen($key) > 0;
    }
}

The getValue() method retrieves the actual sensitive value when needed, but the wrapped object itself won't expose the value in stack traces or when debugging.

When to Use these Features

These attributes shine in scenarios involving:

Authentication credentials (passwords, tokens, orbAPI keys).
Encryption keys or secrets.
Personal identification numbers.
Credit card details or payment information.
Any data that should never appear in logs.

Best Practice(s)

Apply #[SensitiveParameter] liberally to any parameter that handles confidential information. The performance impact is negligible, and the security benefit is substantial. Remember that this feature only protects values in stack traces—it doesn't encrypt data or prevent logging elsewhere in the application. For properties or variables that require similar protection, wrap them in SensitiveParameterValue instances. This ensures consistent security handling throughout the codebase.

The combination of these features reflects PHP's recognition that security often breaks down not through sophisticated attacks, but through simple oversights, such as forgetting that error logs might expose sensitive data. By making it easy to mark and protect sensitive parameters, PHP helps developers build more secure applications by default. Perhaps a bit too long for an attribute article, but worth exploring and explaining.

Mistakes do happen, one stack trace, one exposed secret.
#HappyCoding

PHP Snippets: Property Hooks

Travis van der F. — Fri, 09 Jan 2026 17:37:05 +0000

PHP 8.4 just made our lives easier. Remember all those getter and setter methods we wrote? There's a better way now!

The Modern Method

Property hooks allow attaching logic directly to properties:

class Berry
{
    public string $name {
        get => ucfirst($this->value);
        set => trim($value);
    }
}

$berry = new Berry();
$berry->name = "  strawberry  ";
echo $berry->name; // Strawberry

And really, that's it!

No separate methods needed. The get hook capitalizes the first letter when reading the property, and the set hook trims whitespace when writing to it. Clean, readable, and everything's in one place.

Reviewing the Legacy Method

Because it's good to know the fundamentals and history, before PHP 8.5, we had to write this whole dance:

class Berry
{
    private string $name;

    public function getName(): string
    {
        return ucfirst($this->name);
    }

    public function setName(string $value): void
    {
        $this->name = trim($value);
    }
}

$berry = new Berry();
$berry->setName("  blueberry  ");
echo $berry->getName(); // Blueberry

It's the same result, but with much more code. A private property was required, along with getter and setter methods. It all added up quickly, especially with multiple properties.

Overall, property hooks aren't just about saving keystrokes. They make code easier to understand because the logic lives right where the property is defined. No hunting through classes to find where values get transformed, adding extra text for the eyes. It's all there, front and center.

Welcome to modern PHP!
#HappyCoding

JavaScript Snippets: Split & Map

Travis van der F. — Wed, 07 Jan 2026 17:50:57 +0000

Ever stumbled across this little snippet of JavaScript code and wondered what mystical sorcery is happening? It looks simple enough, but there's some clever stuff going on here. Let's go through it all.

Firstly, there is the string "1,2,3". Maybe it came from a CSV file, user input, or an API response. The problem? JavaScript treats this as a single string, not three separate numbers. And if one tries to do math with text, things get weird fast.

First up is .split(","). Think of this as taking a pair of scissors to the string. Every time it finds a comma, it makes a cut, ending up with an array:

["1", "2", "3"]

Notice those quotes? That's the catch. We've separated our values, but they're still strings. If you tried adding them together now, you'd get "12" instead of 3. Not exactly what we want!

This is where .map(Number) comes in to save the day. The map function iterates over each item in the array and applies a transformation to it. In this case, it calls the Number function on each string, which converts text to a number. And the final result? A proper array of numbers! Allowing the freedom to do whatever math magic one desires.

[1, 2, 3]

The Elegant Shortcut

Here's a neat detail: writing map(Number) is JavaScript shorthand. The longer version is map(x => Number(x)), but since Number already expects one argument, it can be passed directly to map, making less typing with the same result.

And what one might wonder, what happens without a map(Number)?

Let's see the difference in action. If the map(Number) part is skipped and just uses split:

"1,2,3".split(",")  // Result: ["1", "2", "3"]

It results in an array of strings. Now watch what happens when retrieving these values:

const withoutMap = "1,2,3".split(",");
console.log(withoutMap[0] + withoutMap[1]);  // "12" - string concatenation!

const withMap = "1,2,3".split(",").map(Number);
console.log(withMap[0] + withMap[1]);  // 3 - actual math!

See the problem? Without map(Number), it's still working with text. JavaScript happily glues the strings together instead of adding them. And this is why that extra .map(Number) step is crucial. It's the difference between getting "123" when you expected 6, or having your sorting function put "10" before "2" because it's treating everything alphabetically.

Overall, this pattern shows up everywhere in real-world JavaScript. Parsing CSV data? Converting URL parameters? Processing form inputs? You'll reach for this combo again and again. It's one of those small pieces of code that makes you appreciate how expressive JavaScript can be when you know the right tools. Two methods, one line, problem solved.

#HappyCoding

The Confusing World of Array Deletion in JavaScript

Travis van der F. — Sat, 27 Dec 2025 22:38:26 +0000

One of JavaScript's most controversial, yet quietly discussed subjects which goes beyond implicit type coercion (e.g., [] + {}) is handling arrays natively, specifically for programmers of other languages learning with the goal of actually understanding JavaScript. While it's one of the most popular programming languages in the world, its design choices around array manipulation have frustrated programmers for decades, including newcomers. This is especially clear when trying to do something simple, such as removing an item from an array.

Let's get into the different approaches!
For the entirety of this article, consider a simple basket of fruit:

const fruits = ['apple', 'banana', 'orange', 'grape', 'mango'];

Now, imagine wanting to remove 'orange' from this basket. JavaScript offers several ways to do this, each with its own quirks, return values, and gotchas.

Approach 1: Using the Splice Function

The most common way to remove an element is using splice():

const fruits = ['apple', 'banana', 'orange', 'grape', 'mango'];
const index  = fruits.indexOf('orange'); // returns 2

if (index > -1)
{
  const removed = fruits.splice(index, 1);
  console.log(removed);  // returns an array ['orange']
  console.log(fruits);   // ['apple', 'banana', 'grape', 'mango']
}

And here's where things get interesting. The splice() function doesn't just remove the element, it also mutates the original array and returns an array of the removed element(s). Not just the element itself, but an array containing it. This is where the second parameter (set to 1 in this example) comes into play: if you increase it (e.g., to 2 or 3), those array elements will also be returned, such as 'grape' and/or 'mango'.

This return value makes sense when removing multiple items:

const fruits  = ['apple', 'banana', 'orange', 'grape', 'mango'];
const removed = fruits.splice(1, 3); // remove 3 items starting at index 1

console.log(removed);  // ['banana', 'orange', 'grape']
console.log(fruits);   // ['apple', 'mango']

But for a single element, getting back a one-item array feels unnecessarily wrapped.

The splice() vs. slice() Naming Confusion

Perhaps the most infamous naming confusion in JavaScript, particularly within arrays, is between splice() and slice(). They differ by just one letter, however do completely opposite things and describe very little. Let's take a look:

const fruits = ['apple', 'banana', 'orange', 'grape', 'mango'];

// slice sounds destructive but it isn't
const sliced = fruits.slice(1, 3);
console.log(sliced);  // new array: ['banana', 'orange']
console.log(fruits);  // unchanged array: ['apple', 'banana', 'orange', 'grape', 'mango']

// splice sounds like joining but does is destructive
const spliced = fruits.splice(1, 3);
console.log(spliced);  // new array: ['banana', 'orange', 'grape'] 
console.log(fruits);   // changed array: ['apple', 'mango']

This mockery here is painful. "Slice" sounds like cutting or removing, yet it leaves the original array intact, whereas "Splice" sounds like joining things together (like splicing rope or film). Yet, it actually removes elements and mutates the original array. Also, note that the returned arrays are different when both functions are called!

This single-letter difference has caused countless bugs and hours of debugging frustration, and it's considered one of the worst naming decisions in JavaScript's history.

Removing Multiple Elements

When removing multiple elements with the same value using splice(), the approach changes significantly because splice() only removes elements at specific index positions and not by value. As an example here, we now have orange twice:

const fruits = ['apple', 'orange', 'banana', 'orange', 'grape', 'orange'];

const index = fruits.indexOf('orange');
// indexOf() only finds the FIRST occurrence

fruits.splice(index, 1);  // ['apple', 'banana', 'orange', 'grape', 'orange']
console.log(fruits);      // only removed the first 'orange'

To remove multiple occurrences, the code needs to loop backwards through the array:

const fruits = ['apple', 'orange', 'banana', 'orange', 'grape', 'orange'];

// loop backwards to avoid index shifting issues
for (let i = fruits.length - 1; i >= 0; i--)
{
  if (fruits[i] === 'orange')
  {
    fruits.splice(i, 1);
  }
}

console.log(fruits);  // ['apple', 'banana', 'grape']

Unfortunately, its readability is confusing, so the question arises:
Why loop backwards?

When removing elements while looping forward, the indices shift, and some elements get skipped. Let's see how this would look forward (which is wrong):

const fruits = ['orange', 'orange', 'banana'];

for (let i = 0; i < fruits.length; i++) // normal forward iteration
{
  if (fruits[i] === 'orange')
   {
     fruits.splice(i, 1);
     // after removing index 0, the second 'orange' moves to index 0
     // but i becomes 1, so it gets skipped
  }
}

console.log(fruits);  // still has an orange: ['orange', 'banana']

This complexity is one reason why filter() is often the preferred native solution for removing multiple values, though it operates differently (more on that later).

Method 2: The Delete Operator

This one is a trap, and isn't so clear at first glance! When try using the delete operator:

const fruits = ['apple', 'banana', 'orange', 'grape', 'mango'];
const index = fruits.indexOf('orange');

delete fruits[index];

console.log(fruits);        // ['apple', 'banana', empty, 'grape', 'mango']
console.log(fruits.length); // still contains 5 elements
console.log(fruits[2]);     // undefined

As noticed (or not), the delete operator doesn't actually remove the element, but rather. it sets that position to undefined, leaving a hole in the array. The length remains the same, but iteration becomes problematic, resulting in what's known as a "sparse array."

Using this method with arrays is best avoided. It lingers from JavaScript's object-oriented roots and often surprises programmers with its unexpected behavior.

Method 3: The Filter Function

This alternative, easily promising and for a completely different approach, the filter() creates a new array without the unwanted element:

const fruits   = ['apple', 'banana', 'orange', 'grape', 'mango'];
const filtered = fruits.filter(fruit => (fruit !== 'orange'));
                 // arrow function keeps it simple (low logic)

console.log(filtered);  // ['apple', 'banana', 'grape', 'mango']
console.log(fruits);    // ['apple', 'banana', 'orange', 'grape', 'mango']

As noticed, fruits is unchanged!
This method follows an entirely different design. Instead of mutating the original array, it returns a brand new array. This immutable approach is safer and more predictable, but it comes with a performance cost for large arrays.

Another key difference is that filter() removes multiple occurrences of 'orange', not just the first one as previously seen with splice().

const fruits   = ['apple', 'orange', 'banana', 'orange', 'grape'];
const filtered = fruits.filter(fruit => (fruit !== 'orange'));

console.log(filtered);  // ['apple', 'banana', 'grape']

And if one is wondering, how about a mutation design of this straightforward function? Well, JavaScript doesn't have a built-in mutable version of filter(). If mutation of the original array is needed, then here are some options.

Mutable Option 1: Reassign after filtering

let fruits = ['apple', 'orange', 'banana', 'orange', 'grape'];
fruits     = fruits.filter(fruit => (fruit !== 'orange'));

console.log(fruits);  // ['apple', 'banana', 'grape']

This reassigns the variable but technically creates a new array rather than mutating the original, yet it's readable and straightforward.

Mutable Option 2: Backwards loop with splice()

const fruits = ['apple', 'orange', 'banana', 'orange', 'grape'];

for (let i = fruits.length - 1; i >= 0; i--)
{
  if (fruits[i] === 'orange')
  {
    fruits.splice(i, 1);
  }
}

console.log(fruits);  // ['apple', 'banana', 'grape']

This is truly mutable, as it actually mutates the original array in place. But as previously pointed out, backwards iteration isn't readable at first glance.

Mutable Option 3: Clear and refill

const fruits   = ['apple', 'orange', 'banana', 'orange', 'grape'];
const filtered = fruits.filter(fruit => (fruit !== 'orange'));

fruits.length = 0;         // clear the array
fruits.push(...filtered);  // refill it

console.log(fruits);  // ['apple', 'banana', 'grape']

This is mutable but clunky; its readability is fair, but it requires additional external steps and is unnecessary unless memory becomes the primary constraint.

Additional Methods: The Pop & Shift Functions

Although these additional methods do not remove a specific element, they do, however, remove elements from the end or beginning of an array, which should be recognized:

const fruits = ['apple', 'banana', 'orange', 'grape', 'mango'];

const lastFruit = fruits.pop();
console.log(lastFruit);  // returns the removed  element 'mango'
console.log(fruits);     // ['apple', 'banana', 'orange', 'grape']

const firstFruit = fruits.shift();
console.log(firstFruit); // returns the removed  element  'apple'
console.log(fruits);     // ['banana', 'orange', 'grape']

Notice the inconsistency? Unlike splice(), these methods return the actual element, not an array containing it. Both methods mutate the original array, but their return values follow a different pattern.

The naming is also strange. While pop() makes intuitive sense (like popping something off a stack), shift() is less clear. The term "shift" suggests moving elements around, not removing the first one. Many programmers wish it had been called popFront() or removeFirst() instead, as seen in languages like C++ and Swift.

And, so, as a final conclusion:

The filter function always returns a new array, leaving the original unchanged. JavaScript doesn't have a native method that filters in place while mutating the original array, which is why the backwards loop with the splice function is the go-to solution when true mutation is required.

In most cases, the filter() is the best choice.
- It's clear, predictable, removes all matching elements in one pass, and avoids the pitfalls of array mutation.
- The immutable approach also prevents bugs in larger applications where unexpected mutations can cause problems.
The backwards loop with splice() is the right method when working with very large arrays where performance matters.
- Or when the original array reference must be preserved (for example, when other parts of the code hold references to it).
And delete, never use it for arrays.

#HappyCoding

References at github.com/travisfont

First-Class Functions in JavaScript

Travis van der F. — Mon, 15 Dec 2025 21:20:58 +0000

For developers learning JavaScript, the term "first-class functions" frequently appears in discussions and documentation. But what does it actually mean, and why does it matter?

In JavaScript, all functions are "first-class citizens". But what does this actually mean? This fancy term means functions are treated like any other value in the language; that's it. Just as a string or number can be stored in a variable, it can be passed to a function, and the same applies to functions themselves. Think of it this way: in a kitchen, ingredients aren't stuck in one place. Vegetables can be moved from the fridge to the counter, passed to someone else, or stored in different containers. Functions in JavaScript work the same way!

Let's explore four different core concepts:

Assign Functions to Variables

const washCarrot = function(carrot)
{
   return `${carrot} is now clean!`;
};

console.log(washCarrot('Orange carrot')); // "Orange carrot is now clean!"

Just as vegetables are stored in containers, functions can be stored in variables.

Pass Functions as Arguments

function prepareVegetable(veggie, quantity, prepMethod)
{
   return prepMethod(veggie, quantity);
}

const chop  = (veg, qty) => `Chopped ${qty} ${veg}`;
const steam = (veg, qty) => `Steamed ${qty} ${veg}`;

console.log(prepareVegetable('broccoli', 3, chop)); // "Chopped 3 broccoli"
console.log(prepareVegetable('carrots', 5, steam)); // "Steamed 5 carrots"

As shown here, functions can be passed to other functions, much like ingredients and preparation instructions are passed to a chef.

Return Functions from other Functions

function createVeggieCounter(vegetable)
{
   return function(quantity)
   {
      return `You have ${quantity} ${vegetable}`;
   };
}

const countTomatoes  = createVeggieCounter('tomatoes');
const countCucumbers = createVeggieCounter('cucumbers');

console.log(countTomatoes(12)); // "You have 12 tomatoes"
console.log(countCucumbers(8)); // "You have 8 cucumbers"

Interestingly enough, functions can also create and return other functions, just like a recipe that generates specifically unique instructions.

Store Functions in Data Structures

const kitchenTasks = {
   wash: (veggie)  => `Washing ${veggie}`,
   peel: (veggie)  => `Peeling ${veggie}`,
   slice: (veggie) => `Slicing ${veggie}`
};

console.log(kitchenTasks.wash('spinach')); // "Washing spinach"

And as shown here, functions can also be organized into objects or arrays, much like organizing kitchen tools.

These flexibilities aren't just neat techniques. They are the foundation for some of JavaScript's most powerful (and useful) features. Array methods like map and filter rely entirely on first-class functions, including event handlers, callbacks, promises, and functional programming patterns, all of which depend on treating functions as first-class values.

const vegetables = ['carrot', 'broccoli', 'spinach', 'tomato', 'cucumber'];

const upperCaseVeggies = vegetables.map(veggie => veggie.toUpperCase());
// ['CARROT', 'BROCCOLI', 'SPINACH', 'TOMATO', 'CUCUMBER']

const longNameVeggies = vegetables.filter(veggie => veggie.length > 6);
// ['broccoli', 'spinach', 'cucumber']

Overall, first-class functions give JavaScript incredible flexibility. Functions aren't locked into special syntax or limited in how they can be used. They're values that can be moved around, transformed, and combined just like any other data in a program.

Once developers internalize this concept, opportunities to write cleaner and more modular code become apparent. The reasoning behind certain JavaScript patterns becomes clearer, and the language's full power becomes accessible.

Understanding first-class functions is essential because they're everywhere in modern JavaScript development. Frameworks like React rely heavily on passing functions as props. Asynchronous operations use callbacks and promise handlers. Event-driven programming depends entirely on functions being passed around as values. Without grasping this concept, much of JavaScript's ecosystem remains confusing and difficult to navigate.

However, this flexibility comes with potential traps. Passing functions around carelessly can lead to memory leaks, especially when event listeners aren't properly cleaned up (future article on this!). Deeply nested callbacks create the infamous "callback hell," making code difficult to read and maintain. Functions that reference variables from outer scopes (closures) can accidentally capture more state than intended, which will most likely lead to hard-to-track-down bugs. Performance can also suffer when too many function instances are created, particularly in loops or frequently called code.

The key is understanding both the power and the responsibility that come with first-class functions. When used thoughtfully, they enable elegant solutions to complex problems. When used carelessly, they can create maintenance nightmares and subtle bugs that plague applications for months, slowly creating unestimated technical debt.

Related concepts often confused:

First-class functions: about how functions are treated.
Higher-order functions: functions that take or return other functions.
Closures: functions remembering their lexical scope.

#HappyCoding

References:

Functional Composition in JavaScript

Travis van der F. — Wed, 10 Dec 2025 18:33:29 +0000

Also known as function pipelines.

Functional composition is the idea of creating a new function by passing the output of one function directly into another. It allows complex behavior to emerge from small, simple pieces. It can be pictured as a relay race where one runner hands the baton to the next. Each function does its part, and the final result comes from their combined flow.

Instead of writing: Math.sqrt(minusOne(double(square(42))));

It can be rewritten to be more readable and modular by looping over an array of functions.

Defining simple functions (actions):

const double   = x => x * 2;
const minusOne = x => x - 1;
const square   = x => x * x;

These small arrow functions:

double(x): multiplies by 2
minusOne(x): subtracts 1
square(x): multiplies a number by itself
Math.sqrt: built-in function taking the square root

Then building an array from these functions:

const functions = [
  square,
  double,
  minusOne,
  Math.sqrt,
];

Order here matters too. Keep in mind that it's not calling the functions here; instead, it's storing their references in an array.

Next, call each function (in order) with a starting value defined (as a number):

let result = 42; // starting magic number

for (const fn of functions) {
  result = fn(result);
}

This loop:
1. Takes the current result.
2. Passes it into the next function.
3. Stores the output back into the result.

Which will perform as:

result = square(42)
result = double(result)
result = minusOne(result)
result = Math.sqrt(result)

To understand this fully, let's compute the steps:

Step 1: square(42) = 42 * 42 = 1764
Step 2: double(1764) = 1764 * 2 = 3528
Step 3: minusOne(3528) = 3528 - 1 = 3527
Step 4: Math.sqrt(3527) = ≈ 59.380

And so, the final output and final code:

const double   = x => x * 2;
const minusOne = x => x - 1;
const square   = x => x * x;

const functions = [
  square,
  double,
  minusOne,
  Math.sqrt,
];

let result = 42; // starting number

for (const fn of functions) {
  result = fn(result);
}

console.log('The answer is ' + result);
// The answer is 59.380217