Arrays for Complete Beginners in JavaScript OOP

Arrays are ordered lists of values. They let you store many items (numbers, words, objects) in one place, then access, add, remove, search, and transform them. We will learn the essentials and then use a simple object oriented class to manage an internal array.

JavaScript Implementation

// Arrays for Complete Beginners   OOP wrapper

class ArrayBox {
  constructor(items = []) {
    this.items = Array.isArray(items) ? items : [];
  }

  // --- Basics ---
  createFrom(list) { this.items = Array.isArray(list) ? list.slice() : []; }
  length() { return this.items.length; }
  readAt(i) { return this.items[i]; }
  updateAt(i, value) { this.items[i] = value; return this.items[i]; }

  // --- Add / Remove ---
  push(value) { this.items.push(value); return this.items.length; }
  pop() { return this.items.pop(); }
  unshift(value) { this.items.unshift(value); return this.items.length; }
  shift() { return this.items.shift(); }

  // Insert or remove at specific position
  insertAt(i, value) { this.items.splice(i, 0, value); return this.items.slice(); }
  removeAt(i, count = 1) { return this.items.splice(i, count); }

  // --- Copying and combining ---
  sliceRange(start, end) { return this.items.slice(start, end); } // end not included
  concatWith(otherArray) { return this.items.concat(otherArray); }

  // --- Searching ---
  indexOf(value) { return this.items.indexOf(value); }
  includes(value) { return this.items.includes(value); }
  find(predicateFn) { return this.items.find(predicateFn); }         // first match or undefined
  findIndex(predicateFn) { return this.items.findIndex(predicateFn); }

  // --- Iteration ---
  forEach(fn) { this.items.forEach(fn); }
  entries() { return this.items.entries(); } // iterator of [index, value]
  keys() { return this.items.keys(); }       // iterator of index
  values() { return this.items.values(); }   // iterator of value

  // --- Transformations ---
  map(fn) { return this.items.map(fn); }
  filter(fn) { return this.items.filter(fn); }
  reduce(fn, init) { return this.items.reduce(fn, init); }
  some(fn) { return this.items.some(fn); }
  every(fn) { return this.items.every(fn); }

  // --- Order & presentation ---
  sortAsc() { return this.items.sort((a, b) => (a > b) - (a < b)); }
  sortDesc() { return this.items.sort((a, b) => (b > a) - (b < a)); }
  reverseSelf() { return this.items.reverse(); }
  joinWith(sep = ",") { return this.items.join(sep); }
  toString() { return this.items.toString(); }

  // --- Utilities ---
  clear() { this.items.length = 0; }
  clone() { return this.items.slice(); }
}

// ---------- Example usage ----------
const box = new ArrayBox([10, 20, 30]);     // Create

box.push(40);                               // [10,20,30,40]
box.unshift(5);                             // [5,10,20,30,40]
box.insertAt(2, 15);                        // [5,10,15,20,30,40]
box.updateAt(3, 22);                        // [5,10,15,22,30,40]
const first = box.readAt(0);                // 5

const removed = box.removeAt(4, 1);         // remove value at index 4 -> [5,10,15,22,40]
box.pop();                                   // remove last -> [5,10,15,22]
box.shift();                                 // remove first -> [10,15,22]

const has15 = box.includes(15);             // true
const idx22 = box.indexOf(22);              // 2

const doubled = box.map(n => n * 2);        // [20,30,44]
const evens = box.filter(n => n % 2 === 0); // [10,22]
const sum = box.reduce((acc, n) => acc + n, 0); // 47

box.sortAsc();                               // [10,15,22]
box.reverseSelf();                           // [22,15,10]

const part = box.sliceRange(0, 2);           // [22,15]
const joined = box.joinWith(" - ");          // "22 - 15 - 10"

console.log({
  first, removed, has15, idx22, doubled, evens, sum, part, joined,
  final: box.clone()
});

Complete Explanation of the Code

Class setup: class ArrayBox defines a reusable blueprint. Each object keeps its own list in this.items.
Constructor: Accepts an optional starting array. If it’s an array, use it; otherwise start empty. This prevents errors when created with bad input.
Basics: createFrom replaces content with a copy; length returns item count; readAt reads by index; updateAt writes a value at an index and returns it.
Add/Remove at ends: push/pop work on the end; unshift/shift work on the start. Methods that add return the new length.
Insert/Remove at position: insertAt places a value at any index; removeAt deletes a number of items starting at an index and returns what was removed.
Copy/Combine: sliceRange returns a portion without changing the original; concatWith returns a new array combining two arrays.
Search: indexOf returns the index of a value (or -1); includes returns true/false; find returns the first item passing a test; findIndex returns its index.
Iteration helpers: forEach visits each item; map transforms items into a new array; filter keeps matching items; reduce folds items into one value; some/every test any/all items.
Order/Presentation: sortAsc/sortDesc sort using a compare function; reverseSelf flips order; joinWith/toString create text.
Utilities: clear empties the list; clone returns a shallow copy. The example usage shows a typical workflow then prints results.

Performance Note: Methods like map and filter create new arrays (extra memory). Methods like push, pop, splice, sort, and reverse change the array in place (no extra array but they mutate the original). Choose based on whether you need to preserve the original.

Standard Pseudocode

BEGIN

  CLASS ArrayBox

    PROCEDURE INITIALIZE(items)
      IF items IS AN ARRAY THEN
        SET this.items TO COPY OF items
      ELSE
        SET this.items TO EMPTY ARRAY
      END IF
    END PROCEDURE

    PROCEDURE createFrom(list)
      IF list IS AN ARRAY THEN
        SET this.items TO COPY OF list
      ELSE
        SET this.items TO EMPTY ARRAY
      END IF
    END PROCEDURE

    FUNCTION length
      RETURN SIZE OF this.items
    END FUNCTION

    FUNCTION readAt(i)
      RETURN this.items[i]
    END FUNCTION

    PROCEDURE updateAt(i, value)
      SET this.items[i] TO value
      RETURN this.items[i]
    END PROCEDURE

    PROCEDURE push(value)
      APPEND value TO this.items
      RETURN SIZE OF this.items
    END PROCEDURE

    FUNCTION pop
      IF SIZE OF this.items = 0 THEN
        RETURN UNDEFINED
      ELSE
        RETURN LAST ITEM REMOVED FROM this.items
      END IF
    END FUNCTION

    PROCEDURE unshift(value)
      PREPEND value TO this.items
      RETURN SIZE OF this.items
    END PROCEDURE

    FUNCTION shift
      IF SIZE OF this.items = 0 THEN
        RETURN UNDEFINED
      ELSE
        RETURN FIRST ITEM REMOVED FROM this.items
      END IF
    END FUNCTION

    PROCEDURE insertAt(i, value)
      INSERT value AT INDEX i IN this.items
      RETURN COPY OF this.items
    END PROCEDURE

    FUNCTION removeAt(i, count)
      IF count IS UNDEFINED THEN
        SET count TO 1
      END IF
      REMOVE count ITEMS STARTING AT INDEX i FROM this.items
      RETURN REMOVED ITEMS
    END FUNCTION

    FUNCTION sliceRange(start, end)
      RETURN SHALLOW COPY OF this.items FROM start TO end EXCLUSIVE
    END FUNCTION

    FUNCTION concatWith(otherArray)
      RETURN NEW ARRAY MADE BY JOINING this.items AND otherArray
    END FUNCTION

    FUNCTION indexOf(value)
      RETURN POSITION OF value IN this.items OR -1
    END FUNCTION

    FUNCTION includes(value)
      IF POSITION OF value IN this.items IS NOT -1 THEN
        RETURN TRUE
      ELSE
        RETURN FALSE
      END IF
    END FUNCTION

    FUNCTION find(predicateFn)
      FOR EACH item IN this.items DO
        IF CALL predicateFn WITH item THEN
          RETURN item
        END IF
      END FOR
      RETURN UNDEFINED
    END FUNCTION

    FUNCTION findIndex(predicateFn)
      SET i TO 0
      WHILE i < SIZE OF this.items DO
        IF CALL predicateFn WITH this.items[i] THEN
          RETURN i
        END IF
        INCREMENT i
      END WHILE
      RETURN -1
    END FUNCTION

    PROCEDURE forEach(fn)
      FOR EACH item IN this.items DO
        CALL fn WITH item
      END FOR
    END PROCEDURE

    FUNCTION map(fn)
      INITIALIZE result AS EMPTY ARRAY
      FOR EACH item IN this.items DO
        APPEND CALL fn WITH item TO result
      END FOR
      RETURN result
    END FUNCTION

    FUNCTION filter(fn)
      INITIALIZE result AS EMPTY ARRAY
      FOR EACH item IN this.items DO
        IF CALL fn WITH item THEN
          APPEND item TO result
        END IF
      END FOR
      RETURN result
    END FUNCTION

    FUNCTION reduce(fn, init)
      SET acc TO init
      FOR EACH item IN this.items DO
        SET acc TO CALL fn WITH acc AND item
      END FOR
      RETURN acc
    END FUNCTION

    FUNCTION some(fn)
      FOR EACH item IN this.items DO
        IF CALL fn WITH item THEN
          RETURN TRUE
        END IF
      END FOR
      RETURN FALSE
    END FUNCTION

    FUNCTION every(fn)
      FOR EACH item IN this.items DO
        IF NOT CALL fn WITH item THEN
          RETURN FALSE
        END IF
      END FOR
      RETURN TRUE
    END FUNCTION

    FUNCTION sortAsc
      SORT this.items BY (a, b) WHERE
        IF a > b THEN RETURN 1
        ELSE IF a < b THEN RETURN -1
        ELSE RETURN 0
        END IF
      END SORT
      RETURN this.items
    END FUNCTION

    FUNCTION sortDesc
      SORT this.items BY (a, b) WHERE
        IF b > a THEN RETURN 1
        ELSE IF b < a THEN RETURN -1
        ELSE RETURN 0
        END IF
      END SORT
      RETURN this.items
    END FUNCTION

    PROCEDURE reverseSelf
      REVERSE ORDER OF this.items
      RETURN this.items
    END PROCEDURE

    FUNCTION joinWith(sep)
      RETURN STRING OF this.items JOINED BY sep
    END FUNCTION

    FUNCTION toString
      RETURN STRING REPRESENTATION OF this.items
    END FUNCTION

    PROCEDURE clear
      SET SIZE OF this.items TO 0
    END PROCEDURE

    FUNCTION clone
      RETURN SHALLOW COPY OF this.items
    END FUNCTION

  END CLASS

  INITIALIZE box AS NEW ArrayBox WITH [10, 20, 30]

  CALL box.push(40)
  CALL box.unshift(5)
  CALL box.insertAt(2, 15)
  CALL box.updateAt(3, 22)

  SET first TO box.readAt(0)

  SET removed TO box.removeAt(4, 1)
  CALL box.pop()
  CALL box.shift()

  SET has15 TO box.includes(15)
  SET idx22 TO box.indexOf(22)

  SET doubled TO box.map(FUNCTION(n) RETURN n * 2 END FUNCTION)
  SET evens TO box.filter(FUNCTION(n) RETURN n MOD 2 = 0 END FUNCTION)
  SET sum TO box.reduce(FUNCTION(acc, n) RETURN acc + n END FUNCTION, 0)

  CALL box.sortAsc()
  CALL box.reverseSelf()

  SET part TO box.sliceRange(0, 2)
  SET joined TO box.joinWith(" - ")

  SET finalCopy TO box.clone()

  PRINT first, removed, has15, idx22, doubled, evens, sum, part, joined, finalCopy

END

Explanation of the Pseudocode

BEGIN / END: Marks the start and end of the whole algorithm.
CLASS / PROCEDURE / FUNCTION: Define a blueprint (ArrayBox) and its actions. Procedures do work; functions return values.
Constructor logic: INITIALIZE uses IF ... THEN ... ELSE to safely set up the internal array.
Basic operations: Read, write, and count items directly by their positions (indexes start at 0).
Adding/removing: push/pop (end) and unshift/shift (start) change the size; insertAt/removeAt change items at a specific index.
Copy/combine: sliceRange returns a portion without changing the original; concatWith builds a new combined array.
Searching: indexOf finds a position or -1; includes answers yes/no; find/findIndex use a test function you supply.
Iteration helpers: forEach runs a function for each item; map/filter create new arrays; reduce produces a single value; some/every check any/all items.
Ordering and text: sortAsc/sortDesc use a compare rule to order; reverseSelf flips order; joinWith/toString make text.
Utilities: clear empties the list; clone makes a shallow copy for safe keeping.
Program flow: Create a box, perform operations (add, insert, update, remove), compute results (map/filter/reduce), order items (sort/reverse), slice and join, copy, then PRINT results.