Interactive visualization of array methods

Sometimes understanding how data structures work is not intuitive, this is an experiment to see if simple guides and visualization are useful.

Instructions

  • given a new array, let's slice a piece of it off. Continue
  • let's grab the first two keys by slicing our array into a new one. Continue
  • So we'll do var sliced = arr.slice(0, 1);. Slice
  • Giving us our new slice! How about that?
  • How about pushing? Continue
  • Pushing is exactly what it sounds like — pushing another item into an array. We’ll do: arr.push(20); Push
  • And voila! The array now has a new item added to it.

Visualization

var arr = [1, 2, 3, 4, 5];

var arr = [1, 2, 3];

[1, 2, 3, 20]