HoorayForArrays.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "raw_mimetype": "text/markdown",
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Hooray for Arrays!\n",
    "\n",
    "### Tips and Tricks for JavaScript's Best Object \n",
    "***\n",
    "Erin McKean"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<div style=\"width: 900px;\">\n",
    "    \n",
    "    <div style=\"width: 550px; height: 450px; float: left;\" ><div style=\"text-align: center\"><img src=\"images/hirobot.png\" alt=\"hello robot\" style=\"width: 500px;\"/></div>\n",
    "</div>\n",
    "<div style=\"width: 10px; height: 200px; float: left;\"></div>\n",
    "    <div style=\"width: 350px; height: 300px; float: right;\"><div style=\"text-align: left; font-size: large; font-family: serif\">\n",
    "    <br>\n",
    "    <span style=\"font-size: 28px;line-height: 115%;\">Developer Advocate, IBM</span>\n",
    "    <p>\n",
    "    <span style=\"font-size: 28px; line-height: 115%;\">wordnik.com &amp; developer.wordnik.com</span>\n",
    "    <p>\n",
    "    \n",
    " </div></div>\n",
    "    </div>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "“For all knowledge and wonder (which is the seed of knowledge) is an impression of pleasure in itself.”\n",
    "\n",
    "—Francis Bacon"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "**Frequency Illusion**: \"The illusion in which a word, a name, or other thing that has recently come to one's attention suddenly seems to appear with improbable frequency shortly afterwards.\" \n",
    "\n",
    "—<small>Wikipedia contributors, \"List of cognitive biases,\" Wikipedia, The Free Encyclopedia, https://en.wikipedia.org/w/index.php?title=List_of_cognitive_biases&oldid=823170077 (accessed February 13, 2018).</small> "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### What is an array?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "“An array is a linear allocation of memory in which elements are accessed by integers that are used to compute offsets. Arrays can be very fast data structures. **Unfortunately, JavaScript does not have anything like this kind of array**.”\n",
    "\n",
    "—Douglas Crockford, _JavaScript: The Good Parts_ \\(O’Reilly, 2008\\)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### What is a *JavaScript* array?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "The JavaScript **Array** object is a global object that is used in the construction of arrays; which are high-level, list-like objects. \n",
    "\n",
    "—MDN web docs, _developer.mozilla.org_"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<div style=\"width: 1200px;\">\n",
    "    <div  style=\"width: 700px;  margin: 0 auto;\">\n",
    "    <div style=\"width: 500px; height: 400px; float: left;\" ><div style=\"text-align: center\"><img src=\"images/array-hat.png\" alt=\"object wearing an array hat\" style=\"width: 500px;\"/></div>\n",
    "</div>\n",
    "    <div style=\"width: 200px; height: 400px; float: left;\"><div style=\"text-align: center; font-size: large\"> an array is an object <br> wearing an array hat </div></div></div>\n",
    "    </div>\n",
    "</div>\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Identifying arrays"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 252,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "object\n"
     ]
    }
   ],
   "source": [
    "//what does an Array think it is?\n",
    "var iAmAnArray = ['yes', 'I', 'am'];\n",
    "console.log(typeof iAmAnArray);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 253,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "true\n"
     ]
    }
   ],
   "source": [
    "//use isArray() instead\n",
    "console.log(Array.isArray(iAmAnArray));"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Creating arrays"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 254,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] []\n"
     ]
    }
   ],
   "source": [
    "//initialize an empty array\n",
    "var thisArray = [];\n",
    "console.log(thisArray);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 255,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "The length of thisArray is: 0\n"
     ]
    }
   ],
   "source": [
    "console.log(\"The length of thisArray is: \" + thisArray.length);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 256,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"I\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"b\",\"e\",\"s\",\"t\",\" \",\"o\",\"f\",\" \",\"t\",\"i\",\"m\",\"e\",\"s\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"w\",\"o\",\"r\",\"s\",\"t\",\" \",\"o\",\"f\",\" \",\"t\",\"i\",\"m\",\"e\",\"s\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"a\",\"g\",\"e\",\" \",\"o\",\"f\",\" \",\"w\",\"i\",\"s\",\"d\",\"o\",\"m\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"a\",\"g\",\"e\",\" \",\"o\",\"f\",\" \",\"f\",\"o\",\"o\",\"l\",\"i\",\"s\",\"h\",\"n\",\"e\",\"s\",\"s\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"e\",\"p\",\"o\",\"c\",\"h\",\" \",\"o\",\"f\",\" \",\"b\",\"e\",\"l\",\"i\",\"e\",\"f\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"e\",\"p\",\"o\",\"c\",\"h\",\" \",\"o\",\"f\",\" \",\"i\",\"n\",\"c\",\"r\",\"e\",\"d\",\"u\",\"l\",\"i\",\"t\",\"y\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"s\",\"e\",\"a\",\"s\",\"o\",\"n\",\" \",\"o\",\"f\",\" \",\"L\",\"i\",\"g\",\"h\",\"t\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"s\",\"e\",\"a\",\"s\",\"o\",\"n\",\" \",\"o\",\"f\",\" \",\"D\",\"a\",\"r\",\"k\",\"n\",\"e\",\"s\",\"s\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"s\",\"p\",\"r\",\"i\",\"n\",\"g\",\" \",\"o\",\"f\",\" \",\"h\",\"o\",\"p\",\"e\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"w\",\"i\",\"n\",\"t\",\"e\",\"r\",\" \",\"o\",\"f\",\" \",\"d\",\"e\",\"s\",\"p\",\"a\",\"i\",\"r\",\",\",\" \",\"w\",\"e\",\" \",\"h\",\"a\",\"d\",\" \",\"e\",\"v\",\"e\",\"r\",\"y\",\"t\",\"h\",\"i\",\"n\",\"g\",\" \",\"b\",\"e\",\"f\",\"o\",\"r\",\"e\",\" \",\"u\",\"s\",\",\",\" \",\"w\",\"e\",\" \",\"h\",\"a\",\"d\",\" \",\"n\",\"o\",\"t\",\"h\",\"i\",\"n\",\"g\",\" \",\"b\",\"e\",\"f\",\"o\",\"r\",\"e\",\" \",\"u\",\"s\",\",\",\" \",\"w\",\"e\",\" \",\"w\",\"e\",\"r\",\"e\",\" \",\"a\",\"l\",\"l\",\" \",\"g\",\"o\",\"i\",\"n\",\"g\",\" \",\"d\",\"i\",\"r\",\"e\",\"c\",\"t\",\" \",\"t\",\"o\",\" \",\"H\",\"e\",\"a\",\"v\",\"e\",\"n\",\",\",\" \",\"w\",\"e\",\" \",\"w\",\"e\",\"r\",\"e\",\" \",\"a\",\"l\",\"l\",\" \",\"g\",\"o\",\"i\",\"n\",\"g\",\" \",\"d\",\"i\",\"r\",\"e\",\"c\",\"t\",\" \",\"t\",\"h\",\"e\",\" \",\"o\",\"t\",\"h\",\"e\",\"r\",\" \",\"w\",\"a\",\"y\",\" \",\"–\",\" \",\"i\",\"n\",\" \",\"s\",\"h\",\"o\",\"r\",\"t\",\",\",\" \",\"t\",\"h\",\"e\",\" \",\"p\",\"e\",\"r\",\"i\",\"o\",\"d\",\" \",\"w\",\"a\",\"s\",\" \",\"s\",\"o\",\" \",\"f\",\"a\",\"r\",\" \",\"l\",\"i\",\"k\",\"e\",\" \",\"t\",\"h\",\"e\",\" \",\"p\",\"r\",\"e\",\"s\",\"e\",\"n\",\"t\",\" \",\"p\",\"e\",\"r\",\"i\",\"o\",\"d\",\",\",\" \",\"t\",\"h\",\"a\",\"t\",\" \",\"s\",\"o\",\"m\",\"e\",\" \",\"o\",\"f\",\" \",\"i\",\"t\",\"s\",\" \",\"n\",\"o\",\"i\",\"s\",\"i\",\"e\",\"s\",\"t\",\" \",\"a\",\"u\",\"t\",\"h\",\"o\",\"r\",\"i\",\"t\",\"i\",\"e\",\"s\",\" \",\"i\",\"n\",\"s\",\"i\",\"s\",\"t\",\"e\",\"d\",\" \",\"o\",\"n\",\" \",\"i\",\"t\",\"s\",\" \",\"b\",\"e\",\"i\",\"n\",\"g\",\" \",\"r\",\"e\",\"c\",\"e\",\"i\",\"v\",\"e\",\"d\",\",\",\" \",\"f\",\"o\",\"r\",\" \",\"g\",\"o\",\"o\",\"d\",\" \",\"o\",\"r\",\" \",\"f\",\"o\",\"r\",\" \",\"e\",\"v\",\"i\",\"l\",\",\",\" \",\"i\",\"n\",\" \",\"t\",\"h\",\"e\",\" \",\"s\",\"u\",\"p\",\"e\",\"r\",\"l\",\"a\",\"t\",\"i\",\"v\",\"e\",\" \",\"d\",\"e\",\"g\",\"r\",\"e\",\"e\",\" \",\"o\",\"f\",\" \",\"c\",\"o\",\"m\",\"p\",\"a\",\"r\",\"i\",\"s\",\"o\",\"n\",\" \",\"o\",\"n\",\"l\",\"y\",\".\"]\n"
     ]
    }
   ],
   "source": [
    "// in ES6 we now have Array.from()\n",
    "var longString = \"It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way – in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.\"; \n",
    "var longStringArray = Array.from(longString);\n",
    "console.log(longStringArray);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 257,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"I\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"b\",\"e\",\"s\",\"t\",\" \",\"o\",\"f\",\" \",\"t\",\"i\",\"m\",\"e\",\"s\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"w\",\"o\",\"r\",\"s\",\"t\",\" \",\"o\",\"f\",\" \",\"t\",\"i\",\"m\",\"e\",\"s\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"a\",\"g\",\"e\",\" \",\"o\",\"f\",\" \",\"w\",\"i\",\"s\",\"d\",\"o\",\"m\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"a\",\"g\",\"e\",\" \",\"o\",\"f\",\" \",\"f\",\"o\",\"o\",\"l\",\"i\",\"s\",\"h\",\"n\",\"e\",\"s\",\"s\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"e\",\"p\",\"o\",\"c\",\"h\",\" \",\"o\",\"f\",\" \",\"b\",\"e\",\"l\",\"i\",\"e\",\"f\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"e\",\"p\",\"o\",\"c\",\"h\",\" \",\"o\",\"f\",\" \",\"i\",\"n\",\"c\",\"r\",\"e\",\"d\",\"u\",\"l\",\"i\",\"t\",\"y\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"s\",\"e\",\"a\",\"s\",\"o\",\"n\",\" \",\"o\",\"f\",\" \",\"L\",\"i\",\"g\",\"h\",\"t\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"s\",\"e\",\"a\",\"s\",\"o\",\"n\",\" \",\"o\",\"f\",\" \",\"D\",\"a\",\"r\",\"k\",\"n\",\"e\",\"s\",\"s\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"s\",\"p\",\"r\",\"i\",\"n\",\"g\",\" \",\"o\",\"f\",\" \",\"h\",\"o\",\"p\",\"e\",\",\",\" \",\"i\",\"t\",\" \",\"w\",\"a\",\"s\",\" \",\"t\",\"h\",\"e\",\" \",\"w\",\"i\",\"n\",\"t\",\"e\",\"r\",\" \",\"o\",\"f\",\" \",\"d\",\"e\",\"s\",\"p\",\"a\",\"i\",\"r\",\",\",\" \",\"w\",\"e\",\" \",\"h\",\"a\",\"d\",\" \",\"e\",\"v\",\"e\",\"r\",\"y\",\"t\",\"h\",\"i\",\"n\",\"g\",\" \",\"b\",\"e\",\"f\",\"o\",\"r\",\"e\",\" \",\"u\",\"s\",\",\",\" \",\"w\",\"e\",\" \",\"h\",\"a\",\"d\",\" \",\"n\",\"o\",\"t\",\"h\",\"i\",\"n\",\"g\",\" \",\"b\",\"e\",\"f\",\"o\",\"r\",\"e\",\" \",\"u\",\"s\",\",\",\" \",\"w\",\"e\",\" \",\"w\",\"e\",\"r\",\"e\",\" \",\"a\",\"l\",\"l\",\" \",\"g\",\"o\",\"i\",\"n\",\"g\",\" \",\"d\",\"i\",\"r\",\"e\",\"c\",\"t\",\" \",\"t\",\"o\",\" \",\"H\",\"e\",\"a\",\"v\",\"e\",\"n\",\",\",\" \",\"w\",\"e\",\" \",\"w\",\"e\",\"r\",\"e\",\" \",\"a\",\"l\",\"l\",\" \",\"g\",\"o\",\"i\",\"n\",\"g\",\" \",\"d\",\"i\",\"r\",\"e\",\"c\",\"t\",\" \",\"t\",\"h\",\"e\",\" \",\"o\",\"t\",\"h\",\"e\",\"r\",\" \",\"w\",\"a\",\"y\",\" \",\"–\",\" \",\"i\",\"n\",\" \",\"s\",\"h\",\"o\",\"r\",\"t\",\",\",\" \",\"t\",\"h\",\"e\",\" \",\"p\",\"e\",\"r\",\"i\",\"o\",\"d\",\" \",\"w\",\"a\",\"s\",\" \",\"s\",\"o\",\" \",\"f\",\"a\",\"r\",\" \",\"l\",\"i\",\"k\",\"e\",\" \",\"t\",\"h\",\"e\",\" \",\"p\",\"r\",\"e\",\"s\",\"e\",\"n\",\"t\",\" \",\"p\",\"e\",\"r\",\"i\",\"o\",\"d\",\",\",\" \",\"t\",\"h\",\"a\",\"t\",\" \",\"s\",\"o\",\"m\",\"e\",\" \",\"o\",\"f\",\" \",\"i\",\"t\",\"s\",\" \",\"n\",\"o\",\"i\",\"s\",\"i\",\"e\",\"s\",\"t\",\" \",\"a\",\"u\",\"t\",\"h\",\"o\",\"r\",\"i\",\"t\",\"i\",\"e\",\"s\",\" \",\"i\",\"n\",\"s\",\"i\",\"s\",\"t\",\"e\",\"d\",\" \",\"o\",\"n\",\" \",\"i\",\"t\",\"s\",\" \",\"b\",\"e\",\"i\",\"n\",\"g\",\" \",\"r\",\"e\",\"c\",\"e\",\"i\",\"v\",\"e\",\"d\",\",\",\" \",\"f\",\"o\",\"r\",\" \",\"g\",\"o\",\"o\",\"d\",\" \",\"o\",\"r\",\" \",\"f\",\"o\",\"r\",\" \",\"e\",\"v\",\"i\",\"l\",\",\",\" \",\"i\",\"n\",\" \",\"t\",\"h\",\"e\",\" \",\"s\",\"u\",\"p\",\"e\",\"r\",\"l\",\"a\",\"t\",\"i\",\"v\",\"e\",\" \",\"d\",\"e\",\"g\",\"r\",\"e\",\"e\",\" \",\"o\",\"f\",\" \",\"c\",\"o\",\"m\",\"p\",\"a\",\"r\",\"i\",\"s\",\"o\",\"n\",\" \",\"o\",\"n\",\"l\",\"y\",\".\"]\n"
     ]
    }
   ],
   "source": [
    "//we also now have the 'spread' (...) operator:\n",
    "var anotherLongStringArray = [...longString];\n",
    "console.log(anotherLongStringArray);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Using [ ] vs **new** Array"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 258,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"a\"]\n"
     ]
    }
   ],
   "source": [
    "// new Array() with string: 👍\n",
    "var anArray = new Array('a');\n",
    "console.log(anArray);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 259,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [null,null,null]\n",
      "The length of thatArray is: 3\n"
     ]
    }
   ],
   "source": [
    "// new Array() with number: 😬\n",
    "var thatArray = new Array(3);\n",
    "console.log(thatArray);\n",
    "console.log(\"The length of thatArray is: \" + thatArray.length);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 260,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [3]\n"
     ]
    }
   ],
   "source": [
    "// ES6 gives us Array.of to help fix this\n",
    "var arrayOf3 = Array.of(3);\n",
    "console.log(arrayOf3);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### How long is ~~a piece of string~~ an array?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 261,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "We've counted 5 sheep.\n"
     ]
    }
   ],
   "source": [
    "// array length is index of last array element + 1\n",
    "var countingSheep = ['yan', 'tan', 'tethera', 'methera', 'pip'];\n",
    "console.log(\"We've counted \" + countingSheep.length + \" sheep.\");"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 262,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"yan\",\"tan\",\"tethera\",\"methera\",\"pip\",null]\n",
      "We've counted 6 sheep.\n"
     ]
    }
   ],
   "source": [
    "// you can add length\n",
    "countingSheep.length = 6;\n",
    "console.log(countingSheep);\n",
    "console.log(\"We've counted \" + countingSheep.length + \" sheep.\");"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 263,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "ename": "Javascript Error",
     "evalue": "Invalid array length",
     "output_type": "error",
     "traceback": [
      "RangeError: Invalid array length\n    at evalmachine.<anonymous>:3:23\n    at ContextifyScript.Script.runInContext (vm.js:32:29)\n    at Object.exports.runInContext (vm.js:64:17)\n    at Context.rawRun (/Users/emckean/Code/jupyter-nodejs/build/context.js:184:30)\n    at Domain.<anonymous> (/Users/emckean/Code/jupyter-nodejs/build/context.js:204:27)\n    at Domain.run (domain.js:221:14)\n    at Context.rawEvaluate (/Users/emckean/Code/jupyter-nodejs/build/context.js:202:9)\n    at Context.execute (/Users/emckean/Code/jupyter-nodejs/build/context.js:354:21)\n    at Kernel.executeRequest (/Users/emckean/Code/jupyter-nodejs/build/kernel.js:224:16)\n    at Kernel.onShell (/Users/emckean/Code/jupyter-nodejs/build/kernel.js:126:14)"
     ]
    }
   ],
   "source": [
    "// not too much length, though!\n",
    "var superLongArray = [];\n",
    "superLongArray.length = 4294967296;\n",
    "console.log(superLongArray.length);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 264,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "ename": "Javascript Error",
     "evalue": "Invalid array length",
     "output_type": "error",
     "traceback": [
      "RangeError: Invalid array length\n    at evalmachine.<anonymous>:3:22\n    at ContextifyScript.Script.runInContext (vm.js:32:29)\n    at Object.exports.runInContext (vm.js:64:17)\n    at Context.rawRun (/Users/emckean/Code/jupyter-nodejs/build/context.js:184:30)\n    at Domain.<anonymous> (/Users/emckean/Code/jupyter-nodejs/build/context.js:204:27)\n    at Domain.run (domain.js:221:14)\n    at Context.rawEvaluate (/Users/emckean/Code/jupyter-nodejs/build/context.js:202:9)\n    at Context.execute (/Users/emckean/Code/jupyter-nodejs/build/context.js:354:21)\n    at Kernel.executeRequest (/Users/emckean/Code/jupyter-nodejs/build/kernel.js:224:16)\n    at Kernel.onShell (/Users/emckean/Code/jupyter-nodejs/build/kernel.js:126:14)"
     ]
    }
   ],
   "source": [
    "// can't be negative\n",
    "var negativeArray = [];\n",
    "negativeArray.length = -5;"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 265,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "ename": "Javascript Error",
     "evalue": "Invalid array length",
     "output_type": "error",
     "traceback": [
      "RangeError: Invalid array length\n    at evalmachine.<anonymous>:3:21\n    at ContextifyScript.Script.runInContext (vm.js:32:29)\n    at Object.exports.runInContext (vm.js:64:17)\n    at Context.rawRun (/Users/emckean/Code/jupyter-nodejs/build/context.js:184:30)\n    at Domain.<anonymous> (/Users/emckean/Code/jupyter-nodejs/build/context.js:204:27)\n    at Domain.run (domain.js:221:14)\n    at Context.rawEvaluate (/Users/emckean/Code/jupyter-nodejs/build/context.js:202:9)\n    at Context.execute (/Users/emckean/Code/jupyter-nodejs/build/context.js:354:21)\n    at Kernel.executeRequest (/Users/emckean/Code/jupyter-nodejs/build/kernel.js:224:16)\n    at Kernel.onShell (/Users/emckean/Code/jupyter-nodejs/build/kernel.js:126:14)"
     ]
    }
   ],
   "source": [
    "// or decimal\n",
    "var decimalArray = [];\n",
    "decimalArray.length = 3.1416;"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 266,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"yan\",\"tan\",\"tethera\",\"methera\",\"pip\",null]\n",
      "[Array] [\"yan\",\"tan\",\"tethera\",\"methera\"]\n"
     ]
    }
   ],
   "source": [
    "// you can truncate an array\n",
    "console.log(countingSheep);\n",
    "countingSheep.length = 4;\n",
    "console.log(countingSheep);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 267,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"yan\",null,\"tethera\",\"methera\"] 4\n"
     ]
    }
   ],
   "source": [
    "// deleting from an array doesn't shorten the array\n",
    "delete countingSheep[1];\n",
    "console.log(countingSheep, countingSheep.length)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### The ins and outs of adding and removing array items"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 268,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"yan\",\"tan\",\"tethera\",\"methera\"]\n"
     ]
    }
   ],
   "source": [
    "//you can always just add at the index:\n",
    "countingSheep[1] = 'tan';\n",
    "console.log(countingSheep);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 269,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"yan\",\"tan\",\"tethera\",\"methera\"]\n",
      "yan\n",
      "[Array] [\"tan\",\"tethera\",\"methera\"]\n"
     ]
    }
   ],
   "source": [
    "// better ways to remove items from an array\n",
    "console.log(countingSheep);\n",
    "console.log(countingSheep.shift());\n",
    "console.log(countingSheep);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 270,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"tan\",\"tethera\",\"methera\"]\n",
      "methera\n",
      "[Array] [\"tan\",\"tethera\"]\n"
     ]
    }
   ],
   "source": [
    "//pop()\n",
    "console.log(countingSheep);\n",
    "console.log(countingSheep.pop());\n",
    "console.log(countingSheep);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 271,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "3\n",
      "[Array] [\"yan\",\"tan\",\"tethera\"]\n"
     ]
    }
   ],
   "source": [
    "//unshift()\n",
    "console.log(countingSheep.unshift('yan'));\n",
    "console.log(countingSheep);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 272,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "5\n",
      "[Array] [\"yan\",\"tan\",\"tethera\",\"methera\",\"pip\"]\n"
     ]
    }
   ],
   "source": [
    "//push()\n",
    "console.log(countingSheep.push('methera', 'pip'));\n",
    "console.log(countingSheep);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 273,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "undefined\n"
     ]
    }
   ],
   "source": [
    "// shift and pop on empty arrays\n",
    "var emptyArray = [];\n",
    "console.log(emptyArray.shift());"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 274,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "undefined\n"
     ]
    }
   ],
   "source": [
    "console.log(emptyArray.pop());"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 275,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"yan\",\"tan\",\"tethera\",\"methera\",\"pip\"]\n",
      "[Array] [\"tan\",\"tethera\"]\n",
      "[Array] [\"yan\",\"methera\",\"pip\"]\n"
     ]
    }
   ],
   "source": [
    "// be precise with splice\n",
    "console.log(countingSheep);\n",
    "var lostSheep = countingSheep.splice(1, 2);\n",
    "console.log(lostSheep);\n",
    "console.log(countingSheep);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 276,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"yan\",\"tan\",\"tethera\",\"methera\",\"pip\"]\n"
     ]
    }
   ],
   "source": [
    "// splice adds, too\n",
    "countingSheep.splice(1, 0, 'tan', 'tethera');\n",
    "console.log(countingSheep);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 277,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"methera\"]\n",
      "[Array] [\"yan\",\"tan\",\"tethera\",\"pip\"]\n"
     ]
    }
   ],
   "source": [
    "//can splice from the end\n",
    "var lostSheep = countingSheep.splice(-2, 1);\n",
    "console.log(lostSheep);\n",
    "console.log(countingSheep);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 278,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"yan\",\"tan\",\"tethera\",\"pip\",\"sethera\",\"lethera\",\"hovera\"]\n"
     ]
    }
   ],
   "source": [
    "// push arrays together with concat\n",
    "var moreSheep = ['sethera', 'lethera', 'hovera'];\n",
    "var lotsOfSheep = countingSheep.concat(moreSheep);\n",
    "console.log(lotsOfSheep);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 279,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "yan,tan,tethera,pip,sethera,lethera,hovera\n"
     ]
    }
   ],
   "source": [
    "// toString() will make an array into a string\n",
    "console.log(lotsOfSheep.toString());"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 280,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "yan,tan,tethera,pip,sethera,lethera,hovera\n"
     ]
    }
   ],
   "source": [
    "// get the same result with join(): \n",
    "console.log(lotsOfSheep.join());"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 281,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "yan, tan, tethera, pip, sethera, lethera, hovera\n"
     ]
    }
   ],
   "source": [
    "//you can change the join separator\n",
    "console.log(lotsOfSheep.join(', '));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 282,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "yan,,,\n",
      "yan,,,\n"
     ]
    }
   ],
   "source": [
    "//null elements stay null\n",
    "var missingSheep = [\"yan\", null, undefined, \"\"];\n",
    "console.log(missingSheep.toString());\n",
    "console.log(missingSheep.join());"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 283,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"ha\",\"ha\",\"ha\",\"ha\"]\n"
     ]
    }
   ],
   "source": [
    "// extending arrays is easy with Array.copyWithin in ES6\n",
    "var laugh = ['ha', 'ha', 'hee', 'hee'];\n",
    "console.log(laugh.copyWithin(2, 0, 2));\n",
    "/* take two elements starting at 0 and insert them at 2\n",
    "will overwrite, not extend */"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 284,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\",\"ha\"]\n"
     ]
    }
   ],
   "source": [
    "// fill arrays quickly with Array.fill in ES6\n",
    "var evilLaugh = new Array(25);\n",
    "//^^ we actually want this new Array behavior here\n",
    "evilLaugh.fill('ha');\n",
    "console.log(evilLaugh);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Finding the right &lsquo;find&rsquo; method"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "notes"
    }
   },
   "outputs": [],
   "source": [
    "var taleOfTwoArrays = longString.split(\" \");\n",
    "console.log(taleOfTwoArrays, taleOfTwoArrays.length)\n",
    "var taleArray1 = [];\n",
    "var taleArray2 = [];\n",
    "\n",
    "// spoilers!\n",
    "taleOfTwoArrays.forEach(item =>{\n",
    "    if (Math.random() > .5) {\n",
    "        taleArray1.push(item)\n",
    "    } else {\n",
    "        taleArray2.push(item)\n",
    "    }\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 285,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "worst\n"
     ]
    }
   ],
   "source": [
    "/* use find() when you want to find the result of a function\n",
    " (taleArray1 has a random selection of words from that A Tale of Two Cities quote) */\n",
    "console.log(taleArray1.find(item => {\n",
    "//we're treating each item here as an array of characters\n",
    "  return item[0] === \"w\";\n",
    "}));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 286,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "3\n"
     ]
    }
   ],
   "source": [
    "// if we want the index of the matching item, use findIndex(): \n",
    "console.log(taleArray1.findIndex(item => {\n",
    "  return item[0] === \"w\";\n",
    "}));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 287,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "true\n"
     ]
    }
   ],
   "source": [
    "/* if we just want to know whether one or more elements meets our test, \n",
    "we can use some(): */\n",
    "console.log(taleArray1.some(item => {\n",
    "    return item[0] === 'w';\n",
    "}));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 288,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "false\n"
     ]
    }
   ],
   "source": [
    "// if we need to be sure that *every* item passes our test, we can use every(): \n",
    "console.log(taleArray1.every(item => {\n",
    "    return item[0] === 'w';\n",
    "}));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 289,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [1,2,3]\n",
      "[Array] [1,2,3,4]\n",
      "[Array] [1,2,3,4]\n",
      "[Array] [1,2,3,4,5]\n",
      "[Array] [1,2,3,4,5]\n",
      "[Array] [1,2,3,4,5,6]\n",
      "false\n"
     ]
    }
   ],
   "source": [
    "/* if you add an item during your test function, tough luck, \n",
    "find(), findIndex(), some() and every() won't find it */\n",
    "var changedArray = [1, 2, 3];\n",
    "\n",
    "console.log(changedArray.some((item, index) => {\n",
    "    console.log(changedArray);\n",
    "    changedArray.push(index + 4);  \n",
    "    console.log(changedArray);\n",
    "    return item === 4;\n",
    "}));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 290,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [1,2,3,4,5,6]\n",
      "[Array] [1,0,3,4,5,6]\n",
      "[Array] [1,0,3,4,5,6]\n",
      "[Array] [1,0,0,4,5,6]\n",
      "[Array] [1,0,0,4,5,6]\n",
      "[Array] [1,0,0,0,5,6]\n",
      "[Array] [1,0,0,0,5,6]\n",
      "[Array] [1,0,0,0,0,6]\n",
      "[Array] [1,0,0,0,0,6]\n",
      "[Array] [1,0,0,0,0,0]\n",
      "[Array] [1,0,0,0,0,0]\n",
      "[Array] [1,0,0,0,0,0,0]\n",
      "false\n"
     ]
    }
   ],
   "source": [
    "/* if you *change* an item before find(), findIndex(), some(), or every() get to it, \n",
    "value will be the value at the time the item is visited */\n",
    "\n",
    "console.log(changedArray.some((item, index) => {\n",
    "    console.log(changedArray);\n",
    "    changedArray[index + 1] = 0;  \n",
    "    console.log(changedArray);\n",
    "    return item === 2;\n",
    "}));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 291,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "9\n"
     ]
    }
   ],
   "source": [
    "// use indexOf() when you know what element you want\n",
    "console.log(taleOfTwoArrays.indexOf('worst'));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 292,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "-1\n"
     ]
    }
   ],
   "source": [
    "// returns -1 if it doesn't exist\n",
    "console.log(taleOfTwoArrays.indexOf('whatevs'));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 293,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "-1\n"
     ]
    }
   ],
   "source": [
    "//HOWEVER: if you are trying to find NaN: \n",
    "var NaNArray = [0, NaN];\n",
    "\n",
    "//indexOf() won't find it: \n",
    "console.log(NaNArray.indexOf(NaN));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 294,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "1\n"
     ]
    }
   ],
   "source": [
    "//findIndex() will:\n",
    "console.log(NaNArray.findIndex(x => Number.isNaN(x)));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 295,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "-1\n"
     ]
    }
   ],
   "source": [
    "/* can give an index to start at; since 'worst' is the 9th element, \n",
    "it won't be found */\n",
    "console.log(taleOfTwoArrays.indexOf('worst', 10));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 296,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "120\n",
      "-1\n"
     ]
    }
   ],
   "source": [
    "// if you start the index > length, the array won't be searched\n",
    "console.log(taleOfTwoArrays.length);\n",
    "console.log(taleOfTwoArrays.indexOf('worst', 121));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "/* negative index is taken as offset from the end of the array ... \n",
    " if the negative index is greater than the length of the array \n",
    " the whole array will be searched */\n",
    "console.log(taleOfTwoArrays.indexOf('was', -121));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 298,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "90\n"
     ]
    }
   ],
   "source": [
    "// lastIndexOf is like indexOf, but it searches from the end\n",
    "console.log(taleOfTwoArrays.lastIndexOf('was'));\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 299,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "-1\n"
     ]
    }
   ],
   "source": [
    "// if the negative index > length of the array, the array won't be searched\n",
    "console.log(taleOfTwoArrays.lastIndexOf('was', -122));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 300,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "false\n"
     ]
    }
   ],
   "source": [
    "/* if you just want to know if your array includes an element, \n",
    "but you don't care where it is, use includes(): */\n",
    "console.log(taleArray1.includes('Heaven'));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 301,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"was\",\"was\",\"worst\",\"was\",\"wisdom,\",\"was\",\"was\",\"was\",\"was\",\"was\",\"was\",\"was\",\"winter\",\"we\",\"we\",\"we\",\"were\",\"we\",\"were\",\"way\",\"was\"]\n"
     ]
    }
   ],
   "source": [
    "/* use filter() when you want a new array consisting just of elements \n",
    "that match your function */\n",
    "var wWords = taleOfTwoArrays.filter(item => {\n",
    "    return item[0] === 'w';\n",
    "});\n",
    "\n",
    "console.log(wWords);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 302,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"was\",\"was\",\"was\",\"was\",\"was\",\"was\",\"was\",\"was\",\"was\",\"was\",\"was\",\"way\",\"we\",\"we\",\"we\",\"we\",\"were\",\"were\",\"winter\",\"wisdom,\",\"worst\"]\n"
     ]
    }
   ],
   "source": [
    "// you can sort your arrays with (you guessed it) sort():\n",
    "console.log(wWords.sort());"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 303,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [10,2,\"Four\",\"four\"]\n"
     ]
    }
   ],
   "source": [
    "// watch out: sort() is according to string Unicode code points\n",
    "var mixedUpArray = [2, 10, 'four', 'Four'];\n",
    "console.log(mixedUpArray.sort());\n",
    "\n",
    "/* this is called 'lexicographic' sort ...\n",
    "but I am actually a lexicographer and we don't sort this way  ¯\\_(ツ)_/¯ */"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 304,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"was\",\"way\",\"we\",\"were\",\"winter\",\"wisdom,\",\"worst\"]\n"
     ]
    }
   ],
   "source": [
    "// the new Set object in ES6 makes it easier to get arrays of unique elements!\n",
    "var uniqueWWords = Array.from(new Set(wWords));\n",
    "console.log(uniqueWWords);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 305,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"was\",\"way\",\"we\",\"were\",\"winter\",\"wisdom,\",\"worst\"]\n"
     ]
    }
   ],
   "source": [
    "// you can also use the 'spread' (...) operator: \n",
    "console.log([...new Set(wWords)]);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 306,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"yan\",\"tan\",\"tethera\",\"pip\",\"sethera\",\"lethera\",\"hovera\"]\n",
      "[Array] [\"hovera\",\"lethera\",\"sethera\",\"pip\",\"tethera\",\"tan\",\"yan\"]\n"
     ]
    }
   ],
   "source": [
    "// reverse an array with ... wait for it ... reverse():\n",
    "console.log(lotsOfSheep);\n",
    "console.log(lotsOfSheep.reverse());"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 307,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Here's the reverse of 'reverse': esrever\n"
     ]
    }
   ],
   "source": [
    "/* supposedly reversing a string is something people are asked to do in interviews, \n",
    "so here you go: */\n",
    "function reverse(str) {\n",
    "    return str.split(\"\").reverse().join(\"\");\n",
    "}\n",
    "\n",
    "console.log(\"Here's the reverse of 'reverse': \" + reverse('reverse'));"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Iterating"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 308,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "was 3\n",
      "way 3\n",
      "we 2\n",
      "were 4\n",
      "winter 6\n",
      "wisdom, 7\n",
      "worst 5\n"
     ]
    }
   ],
   "source": [
    "// array.forEach() means never having to write out 'i=0; i++' again:\n",
    "\n",
    "uniqueWWords.forEach(item => {\n",
    "    console.log(item, item.length);\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 309,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "undefined\n"
     ]
    }
   ],
   "source": [
    "//remember, forEach() doesn't return anything:\n",
    "\n",
    "var x = uniqueWWords.forEach(item => {\n",
    "    item;\n",
    "});\n",
    "\n",
    "console.log(x);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 310,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [\"WAS\",\"WAY\",\"WE\",\"WERE\",\"WINTER\",\"WISDOM,\",\"WORST\"]\n"
     ]
    }
   ],
   "source": [
    "// map() creates a new array by applying your function to each member of an array:\n",
    "\n",
    "var capWords = uniqueWWords.map(item => {\n",
    "    return item.toUpperCase();\n",
    "});\n",
    "\n",
    "console.log(capWords);\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 311,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "The longest item in capWords is: 'WISDOM,'.\n"
     ]
    }
   ],
   "source": [
    "// reduce() smushes an array to a single value, using a function of your choice\n",
    "\n",
    "var smushed = capWords.reduce(function(accumulator, currentValue){\n",
    "// this is a reasonable place to use the ternary operator    \n",
    "    return accumulator.length > currentValue.length ? accumulator : currentValue;\n",
    "});\n",
    "\n",
    "console.log(\"The longest item in capWords is: '\"+ smushed + \"'.\");\n",
    "\n",
    "//reduceRight() smushes starting from the other end  ¯\\_(ツ)_/¯"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 312,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "weird\n",
      "super weird\n",
      "function () {\n",
      "    return this[0];\n",
      "  }\n"
     ]
    }
   ],
   "source": [
    "// for-in is weird\n",
    "var unexpectedArray = ['weird', 'super weird'];\n",
    "\n",
    "for (var item in unexpectedArray) {\n",
    "    console.log(unexpectedArray[item]);\n",
    "};"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Entries, Keys"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 313,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "\n",
      "3\n",
      "4\n",
      "undefined\n",
      "[Array] [\"\",null,3,4,null]\n"
     ]
    }
   ],
   "source": [
    "var arrayWithGaps = ['', , 3, 4, undefined];\n",
    "\n",
    "// forEach() doesn't operate on null values\n",
    "arrayWithGaps.forEach(item=>{\n",
    "    console.log(item);\n",
    "});\n",
    "\n",
    "// map() will run on null values but undefined will become null\n",
    "\n",
    "var gapTest = arrayWithGaps.map(item => {\n",
    "    return item;\n",
    "});\n",
    "\n",
    "console.log(gapTest);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 314,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[Array] [0,\"\"]\n",
      "[Array] [1,null]\n",
      "[Array] [2,3]\n",
      "[Array] [3,4]\n",
      "[Array] [4,null]\n"
     ]
    }
   ],
   "source": [
    "// but entries() will\n",
    "var arrayWithGaps = ['', , 3, 4, undefined];\n",
    "var iterator = arrayWithGaps.entries();\n",
    "for (let item of iterator) {\n",
    "  console.log(item);\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 315,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Here are the keys from Object.keys: 0,2,3,4\n"
     ]
    }
   ],
   "source": [
    "/*Object.keys doesn't like holes in your arrays \n",
    "(won't give you a key for an empty or null item): */\n",
    "var arrayWithGaps = ['', , 3, 4, undefined];\n",
    "console.log(\"Here are the keys from Object.keys: \" + Object.keys(arrayWithGaps));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 316,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "0\n",
      "1\n",
      "2\n",
      "3\n",
      "4\n"
     ]
    }
   ],
   "source": [
    "var arrayWithGaps = ['', , 3, 4, undefined];\n",
    "// but keys() will handle them \n",
    "var keyIterator = arrayWithGaps.keys();\n",
    "for (let key of keyIterator){\n",
    "    console.log(key)\n",
    "}\n",
    "\n",
    "\n",
    "/* values() works the same way as keys but it's not supported in browsers \n",
    "yet so I can't show you :( */"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### The biggest gotcha of all"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "<div style=\"width: 700px;\">\n",
    "    <div style=\"width: 900px; height: 700px;\" ><div style=\"text-align: center\"><img src=\"images/speedgauge-kristyfox-ccbysa20.jpg\" alt=\"semicolon sticker\" style=\"width: 540px;\"/></div><br><p style=\"text-align: right; font-size: small\"> image by kristyfox CC-BY-SA 2.0 @Flickr\n",
    "</div>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### But Wait! There's More!\n",
    "\n",
    "* MDN web docs should be your first stop:  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference\n",
    "*  *JavaScript, The Good Parts*, Douglas Crockford (Yahoo Press, 2008)\n",
    "*  *Learning JavaScript, 3e*, Ethan Brown (O'Reilly, 2016)\n",
    "*  *You Don't Know JS [series]*, Kyle Simpson (O'Reilly, 2014) \n",
    "*  *Practical Modern JavaScript*, Nicolas Bevacqua (O'Reilly, 2017)\n",
    "*  *Exploring ES6*, Axel Rauschmayer (2017)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<div style=\"width: 900px;\">\n",
    "    <div style=\"width: 900px; height: 700px;\" ><div style=\"text-align: center\"><img src=\"images/semicolon-sticker.jpg\" alt=\"semicolon sticker\" style=\"width: 700px;\"/></div>\n",
    "</div>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<div style=\"width: 900px;\">\n",
    "    \n",
    "    <div style=\"width: 550px; height: 450px; float: left;\" ><div style=\"text-align: center\"><img src=\"images/thankyoubot.png\" alt=\"thankful robot\" style=\"width: 500px;\"/></div>\n",
    "</div>\n",
    "<div style=\"width: 10px; height: 200px; float: left;\"></div>\n",
    "    <div style=\"width: 350px; height: 300px; float: right;\"><div style=\"text-align: left; font-size: large; font-family: serif\">\n",
    "    <br>\n",
    "    <span style=\"font-size: 28px;line-height: 115%;\">twitter &amp; github: @emckean</span>\n",
    "    <p>\n",
    "    <span style=\"font-size: 28px; line-height: 115%;\">Sign up for IBM Cloud! https://ibm.biz/BdZdXN</span>\n",
    "    <p>\n",
    "    <span style=\"font-size: 28px; line-height: 115%;\">Check out IndexConf! https://indexconf.com (use IND18LAST - 20% discount)</span>\n",
    "    <br>\n",
    " </div></div>\n",
    "    </div>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true,
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [],
   "source": [
    "// changing the array prototype\n",
    "if (!Array.prototype.first) {\n",
    "  Array.prototype.first = function() {\n",
    "    return this[0];\n",
    "  }\n",
    "}\n",
    "console.log(countingSheep.first());\n"
   ]
  }
 ],
 "metadata": {
  "celltoolbar": "Slideshow",
  "kernelspec": {
   "display_name": "NodeJS",
   "language": "javascript",
   "name": "nodejs"
  },
  "language_info": {
   "codemirror_mode": "javascript",
   "file_extension": ".js",
   "mimetype": "text/javascript",
   "name": "nodejs",
   "pygments_lexer": "javascript",
   "version": "0.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}