Week4/overview.ipynb

{
 "cells": [
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Objects, Classes, new, this and prototypes\n",
    "\n",
    "> Created by the one and only Jim, you can find him on our [Slack](https://hackyourfuture.slack.com/team/U383PTTK9) and on [GitHub](https://github.com/remarcmij)!\n",
    "\n",
    "> This is a Jupyter notebook, with the right setup you can run the code but we suggest not trying to set that up. Setting up takes time and we don't use these notebooks often so it is not worth it\n",
    "\n",
    "Calling a function that doesn't `return` anything simply returns `undefined`. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "1 undefined\n"
     ]
    }
   ],
   "source": [
    "// Example 1\n",
    "{\n",
    "  function foo() {\n",
    "    // Just an empty function\n",
    "  }\n",
    "\n",
    "  const result = foo();\n",
    "  console.log(1, typeof result);\n",
    "}\n"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Calling the same function, but now using the `new` keyword returns an object."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "2 object\n"
     ]
    }
   ],
   "source": [
    "// Example 2\n",
    "{\n",
    "  function foo() {\n",
    "    // Just an empty function\n",
    "  }\n",
    "\n",
    "  const result = new foo();\n",
    "  //_____________^^^\n",
    "  console.log(2, typeof result);\n",
    "}\n",
    "\n"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Every function has an associated `this` variable bound to its scope. The value of `this` depends on how the function is called. If it is called directly as in example 3 below its value is `undefined`. (If the function has no use for `this` it might as well be `undefined`.)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "3 undefined\n"
     ]
    }
   ],
   "source": [
    "// Example 3\n",
    "'use strict';\n",
    "{\n",
    "  function foo() {\n",
    "    console.log(3, typeof this);\n",
    "  }\n",
    "\n",
    "  const result = foo();\n",
    "}\n"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Note that the `this` value may reference the \"global\" object (`window` in the browser, `global` in Node) if we leave out `'use strict'`. This is almost always something that we don't want, therefore in ES5 the `'use strict'` directive was added to the language. (We want to protect ourselves against messing around accidentally with the global object.)\n",
    "\n",
    "In example 4 below the `this` variable is a reference to the `global` of Node (a _huge_ object).\n",
    "\n",
    "Note that adding `'use strict'` is not required when you use ES6 modules. It is implied in that case."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "4 object\n"
     ]
    }
   ],
   "source": [
    "// Example 4\n",
    "// Note: no 'use strict' used.\n",
    "{\n",
    "  function foo() {\n",
    "    console.log(4, typeof this);\n",
    "  }\n",
    "\n",
    "  const result = foo();\n",
    "}\n"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "When called with `new`, the `this` variable holds a reference to a new, empty object."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "5 object\n"
     ]
    }
   ],
   "source": [
    "// Example 5\n",
    "{\n",
    "  function foo() {\n",
    "    console.log(5, typeof this);\n",
    "  }\n",
    "\n",
    "  const result = new foo();\n",
    "  //_____________^^^\n",
    "}\n"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The purpose of calling a function with the `new` keyword is to construct a new object and to initialize its properties (values and functions). A function that is intended to be called with `new` is called a _constructor function_ and, by convention its name should start with an uppercase letter."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "6 Person { firstName: 'John', lastName: 'Doe' }\n"
     ]
    }
   ],
   "source": [
    "// Example 6\n",
    "{\n",
    "  function Person(firstName, lastName) {\n",
    "    this.firstName = firstName;\n",
    "    this.lastName = lastName;\n",
    "  }\n",
    "\n",
    "  const result = new Person('John', 'Doe');\n",
    "  console.log(6, result)\n",
    "}"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We could add further properties and functions (now called _methods_) to enhance the functionality of the object."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "7 John Doe\n"
     ]
    }
   ],
   "source": [
    "// Example 7\n",
    "{\n",
    "  function Person(firstName, lastName) {\n",
    "    this.firstName = firstName;\n",
    "    this.lastName = lastName;\n",
    "    this.fullName = function() {\n",
    "      return this.firstName + ' ' + this.lastName;\n",
    "    }\n",
    "  }\n",
    "\n",
    "  const john = new Person('John', 'Doe');\n",
    "  console.log(7, john.fullName())\n",
    "}"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This method of constructing object can become wasteful if we want to create multiple objects through the constructor function. This is because each object gets its own copy of the methods.\n",
    "\n",
    "Note that when you call a function using dot notation on an object, the `this` variable hold a reference to that object. A function called in this way is called a _method_. Through `this` it has access to other properties and methods of the object."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "8.1 John Doe\n",
      "8.2 Jane Seymour\n",
      "8.3 false\n"
     ]
    }
   ],
   "source": [
    "// Example 8\n",
    "{\n",
    "  function Person(firstName, lastName) {\n",
    "    this.firstName = firstName;\n",
    "    this.lastName = lastName;\n",
    "    this.fullName = function() {\n",
    "      return this.firstName + ' ' + this.lastName;\n",
    "    }\n",
    "  }\n",
    "\n",
    "  const john = new Person('John', 'Doe');\n",
    "  const jane = new Person('Jane', 'Seymour');\n",
    "\n",
    "  console.log(8.1, john.fullName());\n",
    "  console.log(8.2, jane.fullName());\n",
    "\n",
    "  // The fullName() methods are identical but separate copies\n",
    "  console.log(8.3, john.fullName === jane.fullName);\n",
    "}"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To make it possible for objects constructed from the same constructor function to share methods the JavaScript designer added a `prototype` object to functions which could be used as follows.\n",
    "\n",
    "(Note the `prototype` feature also makes it possible to use _inheritance_, a subject that is out of scope here and you will not need it in the HYF curriculum)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "9.1 John Doe\n",
      "9.2 Jane Seymour\n",
      "9.3 true\n"
     ]
    }
   ],
   "source": [
    "// Example 9\n",
    "{\n",
    "  function Person(firstName, lastName) {\n",
    "    this.firstName = firstName;\n",
    "    this.lastName = lastName;\n",
    "  }\n",
    "\n",
    "  Person.prototype.fullName = function() {\n",
    "    return this.firstName + ' ' + this.lastName;\n",
    "  }\n",
    "\n",
    "  const john = new Person('John', 'Doe');\n",
    "  const jane = new Person('Jane', 'Seymour');\n",
    "  \n",
    "  console.log(9.1, john.fullName());\n",
    "  console.log(9.2, jane.fullName());\n",
    "\n",
    "  // The fullName() methods are one and the same, i.e. shared\n",
    "  console.log(9.3, john.fullName === jane.fullName);\n",
    "}"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Prior to ES5, object creation through constructor function and its associated `prototype` object was the only way to construct objects with shared method.\n",
    "\n",
    "In ES5 a more modern way of creating such objects was introduced, using _Classes_. This was modelled after the way it is done on other languages, such as Java and C++.\n",
    "\n",
    "The `constructor` method now takes the role of the constructor function."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "10.1 John Doe\n",
      "10.2 Jane Seymour\n",
      "10.3 true\n"
     ]
    }
   ],
   "source": [
    "// Example 10\n",
    "{\n",
    "  class Person {\n",
    "    constructor(firstName, lastName) {\n",
    "      this.firstName = firstName;\n",
    "      this.lastName = lastName;\n",
    "    }\n",
    "\n",
    "    fullName() {\n",
    "      return this.firstName + ' ' + this.lastName;\n",
    "    }\n",
    "  }\n",
    "\n",
    "  const john = new Person('John', 'Doe');\n",
    "  const jane = new Person('Jane', 'Seymour');\n",
    "\n",
    "  console.log(10.1, john.fullName());\n",
    "  console.log(10.2, jane.fullName());\n",
    "\n",
    "  // The fullName() methods are one and the same, i.e. shared\n",
    "  console.log(10.3, john.fullName === jane.fullName);\n",
    "}"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `class` syntax is sometimes called _syntactical sugar_ because it still uses the `prototype` object under the hood. Luckily, in our daily programming we just use classes without worrying about and how this all works at the detail level."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "11.1 function\n",
      "11.2 object\n",
      "11.3 function\n"
     ]
    }
   ],
   "source": [
    "// Example 11\n",
    "{\n",
    "  class Person {\n",
    "    constructor(firstName, lastName) {\n",
    "      this.firstName = firstName;\n",
    "      this.lastName = lastName;\n",
    "    }\n",
    "\n",
    "    fullName() {\n",
    "      return this.firstName + ' ' + this.lastName;\n",
    "    }\n",
    "  }\n",
    "\n",
    "  // Under the hood, the class name is still seen as a constructor function by JavaScript.\n",
    "  // Nice to know, but not relevant for our daily programming job.\n",
    "  console.log(11.1, typeof Person);\n",
    "\n",
    "  // There is still a prototype object under hood. Again, nice to know, but not\n",
    "  // relevant for our daily programming job.\n",
    "  console.log(11.2, typeof Person.prototype);\n",
    "  console.log(11.3, typeof Person.prototype.fullName);\n",
    "}"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "JavaScript",
   "language": "javascript",
   "name": "jslab"
  },
  "language_info": {
   "file_extension": ".js",
   "mimetype": "text/javascript",
   "name": "javascript",
   "version": ""
  },
  "orig_nbformat": 4
 },
 "nbformat": 4,
 "nbformat_minor": 2
}