JavaScript Array Mastery: Push, Pop, and Splice Challenge

What You’ll Build

In this coding challenge, you will create a function called transform(arr, commands). The function receives an initial array of numbers and a list of command objects. Each command describes an array operation such as push, pop, or splice.

Your goal is to apply every command in order and return the final transformed array without modifying the original input array.

This challenge is great practice for learning how JavaScript arrays work and how to safely manipulate data.

Concept Overview

Arrays are one of the most important data structures in JavaScript. They allow you to store ordered collections of values and provide built-in methods for adding, removing, and modifying elements.

• push(value) – adds a value to the end of an array.
• pop() – removes the last element from an array.
• splice(start, deleteCount, ...items) – removes elements and optionally inserts new ones.
• slice() – creates a shallow copy of an array.

Understanding these methods is essential for handling lists, form data, shopping carts, dashboards, APIs, and many other real-world applications.

Example

Given the following input:

const arr = [1, 2, 3];

const commands = [
  { type: "push", value: 4 },
  { type: "pop" },
  {
    type: "splice",
    start: 0,
    deleteCount: 1,
    items: [9, 9]
  }
];

The operations are applied in order:

1. Push 4 → [1, 2, 3, 4]
2. Pop → [1, 2, 3]
3. Splice → Remove the first element and insert 9, 9

Final result:

[9, 9, 2, 3]

Coding Challenge

Write a function transform(arr, commands) that processes a list of array commands and returns the final transformed array.

Your implementation must work on a copy of the input array so the original array remains unchanged.

Requirements / Input‑Output Expectations

Constraints

• arr – an array of integers.
• commands – an array of command objects.

Hints

• { type: "push", value: number }
• { type: "pop" }
• { type: "splice", start: number, deleteCount: number, items?: number[] }

Solution Walkthrough

• Return a new array containing the final state after all commands have been applied.
• The original input array must remain unchanged.

Starter Code

• The input array length will be between 0 and 100.
• There will be at most 50 commands.
• All values are integers between -1000 and 1000.
• splice indices will always be valid.
• Command types will be one of push, pop, or splice.

Solution

1. Create a copy of the input array using slice().
2. Loop through each command using a for...of loop.
3. Use a switch statement to handle different command types.
4. Remember that splice() can insert values using the spread operator.
5. Return the transformed copy after all commands have been processed.

Stretch Goals

The solution follows a simple command-processing pattern:

1. Create a shallow copy of the original array using slice().
2. Iterate through every command.
3. Check the command type.
4. Apply the matching array method.
5. Continue until all commands have been processed.
6. Return the updated copy.

This approach prevents unintended side effects and keeps the original data intact.

Starter Code

/**
 * Apply a series of array commands.
 *
 * @param {number[]} arr
 * @param {Object[]} commands
 * @returns {number[]}
 */
function transform(arr, commands) {
  // TODO: Create a copy of arr

  // TODO: Process each command

  // TODO: Return the final array
}

const arr = [1, 2, 3];
const commands = [
  { type: "push", value: 4 },
  { type: "pop" }
];

console.log(transform(arr, commands));
// Expected output: [1, 2, 3]

Solution

function transform(arr, commands) {
  const result = arr.slice();

  for (const cmd of commands) {
    switch (cmd.type) {
      case "push":
        result.push(cmd.value);
        break;

      case "pop":
        result.pop();
        break;

      case "splice": {
        const items = cmd.items || [];
        result.splice(
          cmd.start,
          cmd.deleteCount,
          ...items
        );
        break;
      }

      default:
        throw new Error(
          "Unsupported command type: " + cmd.type
        );
    }
  }

  return result;
}

Alternative Solution Using Array Methods

function transform(arr, commands) {
  return commands.reduce((result, cmd) => {
    switch (cmd.type) {
      case "push":
        result.push(cmd.value);
        break;

      case "pop":
        result.pop();
        break;

      case "splice":
        result.splice(
          cmd.start,
          cmd.deleteCount,
          ...(cmd.items || [])
        );
        break;
    }

    return result;
  }, arr.slice());
}

Stretch Goals

• Add support for shift and unshift commands.
• Add support for reverse and sort.
• Track and return a history of array states after each command.
• Create a version that intentionally mutates the original array.
• Build a small browser UI that lets users enter commands and see the array update in real time.