Section 05, Objects, Inheritance, and Arrays.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "bf4e7e62",
   "metadata": {},
   "source": [
    "#### Execute this cell before running any code in this file..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "71e4864d",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Import Javascript Libraries: Execute this cell...\n",
    "from IPython.display import Javascript\n",
    "\n",
    "display(Javascript(\"jupyter_lib.js\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6919ec00",
   "metadata": {},
   "source": [
    "# Section 5: Objects, Inheritance, and Arrays\n",
    "\n",
    "Goals\n",
    " - Learn what an object is, and what it does.\n",
    " - Learn how objects can inherit properties from each other.\n",
    " - Learn how to store data contiguously (in an array).\n",
    " \n",
    "## Objects\n",
    "\n",
    "In Javascript, an object is a keyed collection. It allows you to assign names to values placed inside of it and recall them later. To create an object, we can use curly brackets `{}`. Objects created this way are called object literals."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0096808c",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let user = {}\n",
    "element.println(user);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ae4126fd",
   "metadata": {},
   "source": [
    "We can add properties and attributes to an object literal using the syntax below:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "158e9236",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let user = {\n",
    "    name: \"Bob\", // Key \"name\" maps to value \"Bob\"\n",
    "    age: 30 // Key \"age\" maps to value 30\n",
    "};"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f17d243b",
   "metadata": {},
   "source": [
    "To access properties, we can use the dot operator (`.`) or brackets (`[]`)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "574eddd9",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let user = {\n",
    "    name: \"Bob\", // Key \"name\" maps to value \"Bob\"\n",
    "    age: 30 // Key \"age\" maps to value 30\n",
    "};\n",
    "\n",
    "element.println(user.name);\n",
    "element.println(user.age);\n",
    "// These also work... if using brackets the input must be a string, or quoted.\n",
    "element.println(user[\"name\"]);\n",
    "element.println(user[\"age\"]);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "681697c1",
   "metadata": {},
   "source": [
    "We can create new properties after the object is created by simply assigning values to them with an `=` sign. To delete properties, we use the `delete` keyword."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "69f22746",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let user = {\n",
    "    name: \"Bob\", \n",
    "    age: 30,\n",
    "    // Key can be any string, but must be quoted if doesn't conform to variable naming conventions.\n",
    "    \"favorite color\": \"red\"\n",
    "};\n",
    "\n",
    "// Create some new properties.\n",
    "user.height = 6;\n",
    "user[\"full name\"] = \"Bob Smith\"; // Bracket access allows for any string, even ones with spaces.\n",
    "\n",
    "element.println(user.name);\n",
    "element.println(user.age);\n",
    "element.println(user.height);\n",
    "element.println(user[\"full name\"]);\n",
    "\n",
    "// Delete them\n",
    "delete user.height;\n",
    "\n",
    "let fn_key = \"full name\";\n",
    "delete user[fn_key]; // Square bracket access allows us to use variables.\n",
    "\n",
    "// These also work... if using brackets the input must be a string, or quoted.\n",
    "element.println(user.name);\n",
    "element.println(user.age);\n",
    "element.println(String(user.height));\n",
    "element.println(String(user[\"full name\"]));\n",
    "element.println(String(user.width)); // Never defined this property..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bca10f73",
   "metadata": {},
   "source": [
    "As shown above, accessing non existent properties simply returns undefined, and doesn't throw an error. This is unique to the Javascript language.\n",
    "\n",
    "To test for a property, we can use the `in` operator."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "731eec4e",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let user = {\n",
    "    name: \"Bob\", \n",
    "    age: 30,\n",
    "    \"favorite color\": \"red\"\n",
    "};\n",
    "\n",
    "element.println(\"name\" in user);\n",
    "element.println(\"foo\" in user);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "49da1232",
   "metadata": {},
   "source": [
    "All object keys in Javascript are strings, so if another type is used, it is converted to a string."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ec616c3a",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let obj = {\n",
    "    0: \"Test\" // 0 becomes \"0\".\n",
    "};\n",
    "\n",
    "// 0 gets converted to \"0\", so these are the same.\n",
    "element.println(obj[\"0\"]);\n",
    "element.println(obj[0]);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8ec548d2",
   "metadata": {},
   "source": [
    "#### Iterating Object Properties\n",
    "\n",
    "Often, we want to iterate over the properties of an object. We can to this using a `for in` loop."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ca2f858b",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let user = {\n",
    "    name: \"Bob\", \n",
    "    age: 30,\n",
    "    \"favorite color\": \"red\"\n",
    "};\n",
    "\n",
    "// Each property name gets stored in the `prop` variable\n",
    "for(let prop in user) {\n",
    "    // Get the value.\n",
    "    element.println(\"Property '\" + prop + \"' has value: \" + user[prop]);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f0dacbf7",
   "metadata": {},
   "source": [
    "### Functions in Objects\n",
    "\n",
    "As stated in the last section, functions can be stored just like any other value. This includes being stored in objects. We call functions attached to objects methods. Methods create a special variable `this` to refer to the current object they are called from."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "bb13431f",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let user = {\n",
    "    name: \"Bob\", \n",
    "    age: 30,\n",
    "    \"favorite color\": \"red\",\n",
    "    \"toString\": function() {\n",
    "        // this: Reference to the calling object.\n",
    "        return \"[User \" + this.name + \"]\";\n",
    "    }\n",
    "};\n",
    "\n",
    "// 'this' refers to user on this call, since user is the object before the dot.\n",
    "element.println(user.toString()); "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d1dec112",
   "metadata": {},
   "source": [
    "___Challenge Exercise: Create an object that represents a dog. It should have a name, color, and method that makes it bark.___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "701cdff9",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Write your code here."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b2dea189",
   "metadata": {},
   "source": [
    "## Reconstructing Objects: Using Classes\n",
    "\n",
    "We have discovered how to make a single object, but what if we want to make multiple objects of a similar type or with the same functions? Currently, the only way we know to do so is to copy and paste properties."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6bbc23b1",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Make two cats...\n",
    "\n",
    "let muzz = {\n",
    "    name: \"Muzz\",\n",
    "    color: \"Black and White\",\n",
    "    age: 2,\n",
    "    speak: function() {\n",
    "        element.println(\"Meow\");\n",
    "    },\n",
    "    info: function() {\n",
    "        return \"Name: \" + this.name + \", Color: \" + this.color + \", Age: \" + this.age;\n",
    "    }\n",
    "};\n",
    "\n",
    "let peter = {\n",
    "    name: \"Peter\",\n",
    "    color: \"Tan\",\n",
    "    age: 3,\n",
    "    speak: function() { // Have to copy this....\n",
    "        element.println(\"Meow\");\n",
    "    },\n",
    "    info: function() { // Have to copy this... Yuck!\n",
    "        return \"Name: \" + this.name + \", Color: \" + this.color + \", Age: \" + this.age;\n",
    "    }\n",
    "};\n",
    "\n",
    "muzz.speak();\n",
    "peter.speak();\n",
    "\n",
    "element.println(muzz.info());\n",
    "element.println(peter.info());"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "527880c2",
   "metadata": {},
   "source": [
    "It would be much better if we could make a generic object class or group, called Cat, that allows us to create as many cats as we like with different attributes. Javascript allows us to create classes, using the `class` keyword. Shared functions among objects can simply be placed inside the class, including a `constructor` function, that manages creating the object and giving it its initial properties. Functions inside a class don't need the `function` keyword placed before them.\n",
    "\n",
    "To construct a new object from a class, we can use the `new` keyword, which tells javascript to construct a new object of that type."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e97040d7",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "// The cat class, or group of objects...\n",
    "class Cat {\n",
    "    // Special function, makes the new cat object...\n",
    "    constructor(name, color = \"Mix\", age = 1) {\n",
    "        // Javascript handles creation of the object for us, you can imagine this at the start:\n",
    "        // let this = {};\n",
    "        \n",
    "        // We assign properties...\n",
    "        this.name = name;\n",
    "        this.color = color;\n",
    "        this.age = 1;\n",
    "        \n",
    "        // Javascript automatically returns the object for us when called with 'new' also, \n",
    "        // you can imagine this at the end:\n",
    "        // return this;\n",
    "    }\n",
    "    \n",
    "    // Functions from prior examples...\n",
    "    speak() {\n",
    "        element.println(\"Meow\");\n",
    "    }\n",
    "    \n",
    "    info() {\n",
    "        return \"Name: \" + this.name + \", Color: \" + this.color + \", Age: \" + this.age;\n",
    "    }\n",
    "}\n",
    "\n",
    "// Create a new cat, muzz. Just like a function call, but prefixed with the 'new' keyword.\n",
    "// Arguments get passed to the special constructor function\n",
    "let muzz = new Cat(\"Muzz\", \"Black and White\", 2);\n",
    "let peter = new Cat(\"Peter\", \"Tan\", 3)\n",
    "\n",
    "// Both muzz and peter automatically get the shared functions.\n",
    "\n",
    "muzz.speak();\n",
    "peter.speak();\n",
    "\n",
    "element.println(muzz.info());\n",
    "element.println(peter.info());"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "67f32ce2",
   "metadata": {},
   "source": [
    "___Challenge Exercise: Create a Dog class for making dogs. Each dog should have a name, breed, and age. Include methods(functions) to bark, and get the dog's age in human years.___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2756baa7",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Put your class here....\n",
    "let fido = new Dog(\"Fido\", \"Pit Bull\", 2);\n",
    "let daisy = new Dog(\"Daisy\", \"Golden Retriever/Vizsla\", 5)\n",
    "\n",
    "fido.bark();\n",
    "daisy.bark();\n",
    "\n",
    "element.println(fido.ageInHumanYears());\n",
    "element.println(daisy.ageInHumanYears());"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3c7707d0",
   "metadata": {},
   "source": [
    "## Class Inheritance\n",
    "\n",
    "We now can create types of objects, by using classes. Often, we want to identify relationships between object types, and share properties between object types. Javascript provides a concept of inheritance. This allows us to define \"is a\" relationships among object types, as shown below. To inherit the properties of another object type or class, we use the `extends` keyword after the class name."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "178e2d0d",
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "// Generic animal identifies some actions...\n",
    "class Animal {\n",
    "    constructor(name, max_speed) {\n",
    "        this.name = name;\n",
    "        this.max_speed = max_speed;\n",
    "    }\n",
    "    \n",
    "    run(speed = Infinity) {\n",
    "        element.println(this.name + \" runs with speed: \" + ((speed < this.max_speed)? speed: this.max_speed));\n",
    "    }\n",
    "    \n",
    "    stop() {\n",
    "        element.println(this.name + \" has stopped.\");\n",
    "    }\n",
    "}\n",
    "\n",
    "// A rabbit is an animal... But can also hide.\n",
    "class Rabbit extends Animal {\n",
    "    // We don't define a constructor, so animal constructor is used.\n",
    "    \n",
    "    hide() {\n",
    "        element.println(this.name + \" is hiding.\");\n",
    "    }\n",
    "}\n",
    "\n",
    "let r = new Rabbit(\"White Rabbit\", 20);\n",
    "\n",
    "// Rabbit 'inherits' animals properties and methods.\n",
    "r.run();\n",
    "r.stop();\n",
    "r.hide();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "38960a40",
   "metadata": {},
   "source": [
    "In the above example, `Animal` is considered the base class or parent class, while `Rabbit` is considered the sub class or child class."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "053d4225",
   "metadata": {},
   "source": [
    "### Method Overriding\n",
    "\n",
    "We can redefine a method in a subclass. This is called method overriding. If we still want to call the parent class version of the method, we can get the parent class with the special `super` variable. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8c709468",
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "// Generic animal identifies some actions...\n",
    "class Animal {\n",
    "    constructor(name, max_speed) {\n",
    "        this.name = name;\n",
    "        this.max_speed = max_speed;\n",
    "    }\n",
    "    \n",
    "    run(speed = Infinity) {\n",
    "        element.println(this.name + \" runs with speed: \" + ((speed < this.max_speed)? speed: this.max_speed));\n",
    "    }\n",
    "    \n",
    "    stop() {\n",
    "        element.println(this.name + \" has stopped.\");\n",
    "    }\n",
    "}\n",
    "\n",
    "// A rabbit is an animal... But can also hide.\n",
    "class Rabbit extends Animal { \n",
    "    // We overload stop...\n",
    "    stop() {\n",
    "        // Call the parent stop...\n",
    "        super.stop();\n",
    "        // Rabbits never stop!!!\n",
    "        element.println(this.name + \" started moving again...\");\n",
    "    }\n",
    "    \n",
    "    hide() {\n",
    "        element.println(this.name + \" is hiding.\");\n",
    "    }\n",
    "}\n",
    "\n",
    "let r = new Rabbit(\"White Rabbit\", 20);\n",
    "\n",
    "r.run();\n",
    "// Notice, this method now behaves differently.\n",
    "r.stop();\n",
    "r.hide();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1c29394d",
   "metadata": {},
   "source": [
    "### Overloading the Constructor\n",
    "\n",
    "Just like all other methods of the object, the child class can overload the parent class constructor. To do this though there is 1 special rule:\n",
    "\n",
    " - The child class must call the parent class constructor(`super(args...)`) before using `this`.\n",
    " \n",
    "This is because Javascript relies on the parent class to actually initialize the object. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1d13d43a",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "// Generic animal identifies some actions...\n",
    "class Animal {\n",
    "    constructor(name, max_speed) {\n",
    "        this.name = name;\n",
    "        this.max_speed = max_speed;\n",
    "    }\n",
    "    \n",
    "    run(speed = Infinity) {\n",
    "        element.println(this.name + \" runs with speed: \" + ((speed < this.max_speed)? speed: this.max_speed) + \"m/s\");\n",
    "    }\n",
    "    \n",
    "    stop() {\n",
    "        element.println(this.name + \" has stopped.\");\n",
    "    }\n",
    "}\n",
    "\n",
    "// A rabbit is an animal... But can also hide.\n",
    "class Rabbit extends Animal {\n",
    "    // Overloading the constructor to add a jump height attribute.\n",
    "    constructor(name, max_speed = 20, jump_height = 10) {\n",
    "        // Calling the parent class constructor...\n",
    "        super(name, max_speed);\n",
    "        // Now we can use this keyword...\n",
    "        this.jump_height = jump_height;\n",
    "    }\n",
    "    \n",
    "    stop() {\n",
    "        super.stop();\n",
    "        element.println(this.name + \" started moving again...\");\n",
    "    }\n",
    "    \n",
    "    jump() {\n",
    "        element.println(this.name + \" jumped \" + this.jump_height + \"m in the air!\");\n",
    "    }\n",
    "    \n",
    "    hide() {\n",
    "        element.println(this.name + \" is hiding.\");\n",
    "    }\n",
    "}\n",
    "\n",
    "let r = new Rabbit(\"White Rabbit\");\n",
    "\n",
    "r.run();\n",
    "r.jump();\n",
    "r.stop();\n",
    "r.hide();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8443de66",
   "metadata": {},
   "source": [
    "___Challenge Exercise: Rewrite your Dog class to extend the animal class above. It should maintain it's original properties.___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "46c20c4e",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "class Animal {\n",
    "    constructor(name, max_speed) {\n",
    "        this.name = name;\n",
    "        this.max_speed = max_speed;\n",
    "    }\n",
    "    \n",
    "    run(speed = Infinity) {\n",
    "        element.println(this.name + \" runs with speed: \" + ((speed < this.max_speed)? speed: this.max_speed));\n",
    "    }\n",
    "    \n",
    "    stop() {\n",
    "        element.println(this.name + \" has stopped.\");\n",
    "    }\n",
    "}\n",
    "\n",
    "// Write your dog class here....\n",
    "\n",
    "\n",
    "let fido = new Dog(\"Fido\", \"Pit Bull\", 2);\n",
    "let daisy = new Dog(\"Daisy\", \"Golden Retriever/Vizsla\", 5)\n",
    "\n",
    "fido.bark();\n",
    "daisy.bark();\n",
    "\n",
    "daisy.run();\n",
    "daisy.stop();\n",
    "\n",
    "element.println(fido.ageInHumanYears());\n",
    "element.println(daisy.ageInHumanYears());"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "de485505",
   "metadata": {},
   "source": [
    "## A Builtin Object Type: Arrays\n",
    "\n",
    "Javascript provides several builtin object types, including arrays. Arrays are lists stored contiguously in memory, that are indexed by number. To create an array, we can use square brackets(`[]`)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "094d6f4e",
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let empty = []; // An empty array...\n",
    "let animals = [\"Dog\", \"Cat\", \"Goat\", \"Horse\", \"Lizzard\"]; // One with content, just seperate by commas.\n",
    "let mixed = [\"Foo\", 3, \"Bar\", false, 2.4]; // Arrays can have mixed types...\n",
    "\n",
    "element.println(empty);\n",
    "element.println(animals);\n",
    "element.println(mixed)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "86dca776",
   "metadata": {},
   "source": [
    "We can access array values via the bracket operator `[]` just like objects. Remember, arrays start at 0, not 1."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "234f93fd",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let animals = [\"Dog\", \"Cat\", \"Goat\", \"Horse\", \"Lizzard\"];\n",
    "\n",
    "let first = animals[0]; // Grab the 0th element.\n",
    "\n",
    "animals[3] = \"Panda\"; // Goat replaced with Panda\n",
    "\n",
    "animals[5] = \"Wow\"; // This one index past the last index, so it adds a value to the end of the array.\n",
    "\n",
    "element.println(first);\n",
    "element.println(animals);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1aa792f3",
   "metadata": {},
   "source": [
    "To get the length of an array, we can simply access the `length` attribute."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8ea8b209",
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let animals = [\"Dog\", \"Cat\", \"Goat\", \"Horse\", \"Lizzard\"];\n",
    "element.println(animals.length); // Get the length..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5aed1d59",
   "metadata": {},
   "source": [
    "Some of the methods included with Javascript Arrays include:\n",
    " - `push`: Add an element to the end of the list.\n",
    " - `pop`: Remove and return the last element in the list.\n",
    " - `shift`: Remove the first element of the list and return it.\n",
    " - `unshift`: Add an element to the beginning of the list.\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c7022ba6",
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let animals = [\"Dog\", \"Cat\", \"Goat\", \"Horse\", \"Lizzard\"];\n",
    "\n",
    "// Pop...\n",
    "element.println(animals.pop()); // Should print Lizzard.\n",
    "element.println(animals.length);\n",
    "element.println(animals);\n",
    "element.println();\n",
    "\n",
    "// Push...\n",
    "element.println(animals.push(\"Monkey\")); // Returns new length of array...\n",
    "element.println(animals);\n",
    "element.println();\n",
    "\n",
    "// Shift...\n",
    "element.println(animals.shift()); // Should print Dog.\n",
    "element.println(animals.length);\n",
    "element.println(animals);\n",
    "element.println();\n",
    "\n",
    "// Unshift...\n",
    "element.println(animals.unshift(\"Lemur\")); // Returns new length of array...\n",
    "element.println(animals);\n",
    "element.println();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a8a65f53",
   "metadata": {},
   "source": [
    "#### Iterating Arrays\n",
    "\n",
    "The typical way to iterate arrays is to iterate their indexes with a for loop."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c1151ed2",
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let animals = [\"Dog\", \"Cat\", \"Goat\", \"Horse\", \"Lizzard\"];\n",
    "\n",
    "for(let i = 0; i < animals.length; i++) {\n",
    "    element.println(\"Next animal is: \" + animals[i]);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8e78d284",
   "metadata": {},
   "source": [
    "Javascript also provides a special `for of` loop that can iterate the values of an array."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cf555265",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let animals = [\"Dog\", \"Cat\", \"Goat\", \"Horse\", \"Lizzard\"];\n",
    "\n",
    "// Similar to for in, exept iterates an iterables values rather then object properties.\n",
    "for(let animal of animals) {\n",
    "    element.println(\"Next animal is: \" + animal);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "01347cb6",
   "metadata": {},
   "source": [
    "___Challenge Exercise: The all and any functions. Implement an all function, that accepts a list, and returns if all the values in the array are true. Also implement an any function, that checks if at least one value is true.___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d2aec2c6",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Place your code here...\n",
    "\n",
    "\n",
    "// Testing code...\n",
    "let arrays = [\n",
    "    [true, true, true],\n",
    "    [true, false, true],\n",
    "    [true, false, false],\n",
    "    [false, false, false, false]\n",
    "];\n",
    "\n",
    "let allExpected = [true, false, false, false];\n",
    "let anyExpected = [true, true, true, false];\n",
    "\n",
    "for(let i = 0; i < arrays.length; i++) {\n",
    "    element.println(\"All result for array \" + i + \": \" + all(arrays[i]));\n",
    "    element.println(\"All expected result for array \" + i + \": \" + allExpected[i]);\n",
    "    \n",
    "    element.println(\"All result for array \" + i + \": \" + any(arrays[i]));\n",
    "    element.println(\"All expected result for array \" + i + \": \" + anyExpected[i]);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5a83b989",
   "metadata": {},
   "source": [
    "## Final Exercises/Questions\n",
    "\n",
    "1.) What is an object?\n",
    "\n",
    "\n",
    "2.) How do we make object types for reuse?\n",
    "\n",
    "\n",
    "3.) What keyword is used to have an object type inherit the properties of another?\n",
    "\n",
    "4.) Arrays store data `____________` in memory. There first index is `__`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "395b4e06",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}