🏠 Array Literals

By Robert Laing

A programming language is low level when its programs require attention to the irrelevant. — Perlism #8

Array literals use square brackets as opposed to the curly brackets used by object literals.

Everytime I return to JavaScript, I find myself having to refresh on the difference between splice, slice, toSpliced… so heading my own advice on Learn by Testing, I’ve made these simple examples to reference as needed.

Removing an item

This involves using splice and indexOf as in splice(start, deleteCount) which returns an array of length deleteCount, ie one in this example.

describe("array operations", function() {

  it ('Remove "d" from ["a","b","c","d","e","f","g","h"]', function() {
    const myArr1 = ["a","b","c","d","e","f","g","h"];
    const myArr2 = myArr1.splice(myArr1.indexOf("d"), 1);
    expect(myArr1).toEqual(["a","b","c","e","f","g","h"]);
    expect(myArr2).toEqual(["d"]);
  });

});

Splitting an array into two

Let’s say we have an array of cards and we want to draw the first three into our hand, again splice(start, deleteCount) is our template.

describe("array operations", function() {

  it ('Draw first three elements of ["a","b","c","d","e","f","g","h"]', function() {
    const deck = ["a","b","c","d","e","f","g","h"];
    const hand = deck.splice(0, 3);
    expect(deck).toEqual(["d","e","f","g","h"]);
    expect(hand).toEqual(["a","b","c"]);
  });

});

Inserting an item

Again splice is what we want as in splice(start, deleteCount, item1) where deleteCount is zero (so an empty array is returned which we can ignore), start is the position where we want to insert, and item1 the element to insert.

describe("array operations", function() {

  it ('Insert "x" into idx=3 position in ["a","b","c","d","e","f","g","h"]', function() {
    const myArr = ["a","b","c","d","e","f","g","h"];
    myArr.splice(3, 0, "x");
    expect(myArr).toEqual(["a","b","c","x","d","e","f","g","h"]);
  });

});

Inserting several items

The above pattern works on any number of items to be inserted splice(start, 0, item1, item2, item3...)

describe("array operations", function() {

  it ('Insert "x","y", and "z" starting at idx=3 ["a","b","c","d","e","f","g","h"]', function() {
    const myArr = ["a","b","c","d","e","f","g","h"];
    myArr.splice(3, 0, "x","y","z");
    expect(myArr).toEqual(["a","b","c","x","y","z","d","e","f","g","h"]);
  });

});

Replacing an item

Though we can use splice, it’s much easier to use myArr[start] = item1;

describe("array operations", function() {

  it ('Replace "d" with "x" using splice in ["a","b","c","d","e","f","g","h"]', function() {
    const myArr = ["a","b","c","d","e","f","g","h"];
    myArr.splice(3, 1, "x");
    expect(myArr).toEqual(["a","b","c","x","e","f","g","h"]);
  });

  it ('Replace "d" with "x" using assignment in ["a","b","c","d","e","f","g","h"]', function() {
    const myArr = ["a","b","c","d","e","f","g","h"];
    myArr[3] = "x";
    expect(myArr).toEqual(["a","b","c","x","e","f","g","h"]);
  });

});