[
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2018 Saya\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# [How to write X in both Python 3 and JavaScript (ES2015)](https://sayazamurai.github.io/python-vs-javascript/)\n\n[![](static/images/og.jpg)](https://sayazamurai.github.io/python-vs-javascript/)\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n  <title>How to write X in both Python 3 and JavaScript (ES2015)</title>\n  <link rel=\"stylesheet\" href=\"https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css\"/>\n  <link rel=\"stylesheet\" href=\"static/prism-base16-atelierplateau.light.css\"/>\n  <link rel=\"shortcut icon\" href=\"favicon.ico\" type=\"image/x-icon\">\n  <meta property=\"og:title\" content=\"How to write X in both Python 3 and JavaScript (ES2015)\">\n  <meta property=\"og:locale\" content=\"en\">\n  <meta property=\"og:url\" content=\"https://sayazamurai.github.io/python-vs-javascript/\">\n  <meta property=\"og:site_name\" content=\"Saya\">\n  <meta property=\"og:image\" content=\"https://sayazamurai.github.io/python-vs-javascript/static/images/og.jpg\">\n  <meta name=\"twitter:card\" content=\"summary_large_image\">\n  <meta name=\"twitter:site\" content=\"@sayajewels\">\n  <meta name=\"twitter:creator\" content=\"@sayajewels\">\n  <style>\n    a {\n      color: inherit;\n    }\n\n    a:hover {\n      color: #D5008F;\n    }\n\n    pre[class*=\"language-\"] {\n      margin: 0;\n    }\n  </style>\n</head>\n<body class=\"avenir dark-gray bg-washed-red lh-copy\">\n  <div class=\"bottom-right-button\"\n  style=\"position: fixed;\n  bottom: 35px;\n  right: 30px;\n  opacity: 0.5;\n  z-index: 5;\">\n      <a class=\"bottom-right-button-link js-bottom-right-button-link\" href=\"#\">\n        <img class=\"bottom-right-icon\" src=\"static/images/right-bottom-button.png\" style=\"width: 40px; height: 40px;\">\n      </a>\n  </div>\n\n  <div class=\"title-container center mw7 ph3\">\n    <h1 class=\"title f1-ns f3 tc pt3 pt5-ns lh-title\">\n      How to write X in both Python 3 and JavaScript (ES2015)\n    </h1>\n  </div>\n  <div class=\"header-text-container center mw7 pb3 ph3\">\n    <p class=\"header-text f4-ns\">Python and JavaScript are <a href=\"https://stackoverflow.blog/2017/09/06/incredible-growth-python/\">two of the most popular programming languages</a>.\n If you're a Python programmer learning JavaScript, or a JavaScript programmer learning Python, this handy cheat sheet might help you.</p><p class=\"header-text f4-ns\">This page is open sourced on <a href=\"https://github.com/sayazamurai/python-vs-javascript\">GitHub</a>. Pull requests are welcome!</p>\n      <p class=\"tc\"><!-- Place this tag where you want the button to render. -->\n<a class=\"github-button\" href=\"https://github.com/sayazamurai/python-vs-javascript\" data-icon=\"octicon-star\" data-size=\"large\" data-show-count=\"true\" aria-label=\"Star sayazamurai/python-vs-javascript on GitHub\">Star</a></p>\n  </div>\n  <div class=\"about-the-author center mw7 pb3 ph3\">\n    <h2 class=\"tc f3-ns f4 mb2\">About the Author</h2>\n    <div class=\"center tc mb3\">\n      <img class=\"ba b--white bw2 dib br4\" src=\"static/images/saya-profile.jpg\" width=\"130\" height=\"130\" />\n    </div>\n    <p class=\"profile-text mw6 center mt0\">\n      I'm Saya, a jewelry designer and a junior JavaScript/Python developer living in Tokyo. Find me on Twitter: <a href=\"https://twitter.com/sayajewels\">@sayajewels</a>\n    </p>\n    <p class=\"profile-text mw6 center mt0\">\n       <blockquote class=\"twitter-tweet tw-align-center\" data-cards=\"hidden\"  data-lang=\"en\"><p lang=\"en\" dir=\"ltr\">If you&#39;re are Python programmer learning JavaScript, or a JavaScript programmer learning Python, this handy cheat sheet might help you. Pull requests are welcome! 🐥 ✨<br><br>How to write X in both Python 3 and JavaScript (ES2015)<a href=\"https://t.co/F3MScUMheC\">https://t.co/F3MScUMheC</a></p>&mdash; Saya (@sayajewels) <a href=\"https://twitter.com/sayajewels/status/1040602212718632960?ref_src=twsrc%5Etfw\">September 14, 2018</a></blockquote>\n<script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n    </p>\n    <p class=\"profile-text mw6 center mt0\">\n      <strong>See also:</strong> Ilya Schurov has made a <a href=\"https://ischurov.github.io/pythonvjs/\">similar page</a> - check it out!\n    </p>\n  </div>\n  <div class=\"tabele-of-contents center mw7 pb3 ph3 mb4\">\n    <h2 class=\"tc f3-ns f4 mb2\">Table of Contents</h2>\n    <ul class=\"list pl0 tc\">\n      <li class=\"dib mh2\"><a href=\"#math\">Math</a></li>\n      <li class=\"dib mh2\"><a href=\"#control-flow\">Control Flow</a></li>\n      <li class=\"dib mh2\"><a href=\"#string\">String</a></li>\n      <li class=\"dib mh2\"><a href=\"#list\">List/Array</a></li>\n      <li class=\"dib mh2\"><a href=\"#dictionary\">Dictionary/Object</a></li>\n      <li class=\"dib mh2\"><a href=\"#function\">Function</a></li>\n      <li class=\"dib mh2\"><a href=\"#class\">Class</a></li>\n    </ul>\n  </div>\n  <div class=\"mw9 center ph3-ns ph2\">\n    <div class=\"Q01 cf ph2-ns mb4-ns mb3\" id=\"math\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Math: <strong>Absolute Value</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/functions.html#abs\"><code>abs</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\"># 100\nprint(abs(-100))\n# 50\nprint(abs(50))</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/abs\"><code>abs</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">// 100\nconsole.log(Math.abs(-100))\n// 50\nconsole.log(Math.abs(50))</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q02 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Math: <strong>Round Numbers</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/math.html#math.ceil\"><code>ceil</code></a>, <a href=\"https://docs.python.org/3/library/math.html#math.floor\"><code>floor</code></a>, <a href=\"https://docs.python.org/3/library/functions.html#round\"><code>round</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">import math\n\n# 2\nprint(math.ceil(1.5))\n# 1\nprint(math.floor(1.5))\n# 2\nprint(round(1.5))\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil\"><code>ceil</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor\"><code>floor</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round\"><code>round</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">// 2\nconsole.log(Math.ceil(1.5))\n// 1\nconsole.log(Math.floor(1.5))\n// 2\nconsole.log(Math.round(1.5))\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q03 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Math: <strong>Max and Min</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/functions.html#max\"><code>max</code></a>, <a href=\"https://docs.python.org/3/library/functions.html#min\"><code>min</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\"># 100\nprint(max(100, 50))\n# 40\nprint(min(80, 40))\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max\"><code>max</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min\"><code>min</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">// 100\nconsole.log(Math.max(100, 50))\n\n// 40\nconsole.log(Math.min(80, 40))\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q04 cf ph2-ns mb4-ns mb3\" id=\"control-flow\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Control Flow: <strong>If else</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/controlflow.html#if-statements\"><code>if</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_number = 3\n\n# Number is 3\nif some_number == 1:\n    print(\"Number is 1\")\nelif some_number == 2:\n    print(\"Number is 2\")\nelif some_number == 3:\n    print(\"Number is 3\")\nelse:\n    print(\"?\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else#Using_else_if\"><code>if</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someNumber = 3\n\n// Number is 3\nif (someNumber === 1) {\n  console.log('Number is 1')\n} else if (someNumber === 2) {\n  console.log('Number is 2')\n} else if (someNumber === 3) {\n  console.log('Number is 3')\n} else {\n  console.log('?')\n}</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q05 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Control Flow: <strong>Ternary</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">x = 2\ny = 3\n\n# even\nprint(\"even\" if x % 2 == 0 else \"odd\")\n# odd\nprint(\"even\" if y % 2 == 0 else \"odd\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator\"><code>Conditional Operator</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const x = 2\nconst y = 3\n\n// even\nconsole.log(x % 2 === 0 ? 'even' : 'odd')\n// odd\nconsole.log(y % 2 === 0 ? 'even' : 'odd')\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q06 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Control Flow: <strong>Boolean</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\"># yes\nif \"abc\" == \"abc\":\n    print(\"yes\")\nelse:\n    print(\"no\")\n\n# yes\nif \"abc\" != \"def\":\n    print(\"yes\")\nelse:\n    print(\"no\")\n\n# no\nif True and False:\n    print(\"yes\")\nelse:\n    print(\"no\")\n\n# yes\nif True or False:\n    print(\"yes\")\nelse:\n    print(\"no\")\n\n# yes\nif not False:\n    print(\"yes\")\nelse:\n    print(\"no\")\n\n# no\nif 0:\n    print(\"yes\")\nelse:\n    print(\"no\")\n\n# no\nif \"\":\n    print(\"yes\")\nelse:\n    print(\"no\")\n\n# no\nif []:\n    print(\"yes\")\nelse:\n    print(\"no\")\n\n# no\nif None:\n    print(\"yes\")\nelse:\n    print(\"no\")\n\n# yes\nif not not not None:\n    print(\"yes\")\nelse:\n    print(\"no\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Falsy\"><code>Falsy Values</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">// yes\nif ('abc' === 'abc') {\n  console.log('yes')\n} else {\n  console.log('no')\n}\n\n// yes\nif ('abc' !== 'def') {\n  console.log('yes')\n} else {\n  console.log('no')\n}\n\n// no\nif (true && false) {\n  console.log('yes')\n} else {\n  console.log('no')\n}\n\n// yes\nif (true || false) {\n  console.log('yes')\n} else {\n  console.log('no')\n}\n\n// yes\nif (!false) {\n  console.log('yes')\n} else {\n  console.log('no')\n}\n\n// no\nif (0) {\n  console.log('yes')\n} else {\n  console.log('no')\n}\n\n// no\nif ('') {\n  console.log('yes')\n} else {\n  console.log('no')\n}\n\n// no\nif (undefined) {\n  console.log('yes')\n} else {\n  console.log('no')\n}\n\n// no\nif (null) {\n  console.log('yes')\n} else {\n  console.log('no')\n}\n\n// yes\nif (!!!null) {\n  console.log('yes')\n} else {\n  console.log('no')\n}\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q07 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Control Flow: <strong>Exceptions</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/errors.html\"><code>Errors</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\"># foo is not defined\ntry:\n    foo()\nexcept NameError:\n    print(\"foo is not defined\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch\"><code>try...catch</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">// foo is not defined\ntry {\n  foo()\n} catch (error) {\n  console.log('foo is not defined')\n}\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q08 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Control Flow: <strong>Continue / Break</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/controlflow.html#break-and-continue-statements-and-else-clauses-on-loops\"><code>break/continue</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\"># 1\n# 2\n# Fizz\n# 4\n# Buzz\nfor number in range(1, 101):\n    if number == 3:\n        print(\"Fizz\")\n        continue\n    if number == 5:\n        print(\"Buzz\")\n        break\n    print(number)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue\"><code>continue</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break\"><code>break</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">// 1\n// 2\n// Fizz\n// 4\n// Buzz\nfor (let i = 1; i <= 100; i = i + 1) {\n  if (i === 3) {\n    console.log('Fizz')\n    continue\n  }\n\n  if (i === 5) {\n    console.log('Buzz')\n    break\n  }\n\n  console.log(i)\n}\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q09 cf ph2-ns mb4-ns mb3\" id=\"string\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">String: <strong>Length</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/functions.html#len\"><code>len</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_string = \"abcd\"\n\n# 4\nprint(len(some_string))\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length\"><code>length</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someString = 'abcd'\n\n// 4\nconsole.log(someString.length)\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q10 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">String: <strong>Interpolation</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">x = \"Hello\"\n\n# Hello World\nprint(f\"{x} World\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const x = 'Hello'\n\n// Hello World\nconsole.log(`${x} World`)\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q11 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">String: <strong>Multiline</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">x = \"\"\"------\nLine 1\nLine 2\nLine 3\n------\"\"\"\n\n# ------\n# Line 1\n# Line 2\n# Line 3\n# ------\nprint(x)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Multi-line_strings\"><code>Multiline Strings</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const x = `------\nLine 1\nLine 2\nLine 3\n------`\n\n// ------\n// Line 1\n// Line 2\n// Line 3\n// ------\nconsole.log(x)\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q12 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">String: <strong>String to Integer</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/functions.html#int\"><code>int</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">string_1 = \"1\"\nnumber_1 = int(string_1)\n\n# 3\nprint(number_1 + 2)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt\"><code>parseInt</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const string1 = '1'\nconst number1 = parseInt(string1)\n\n// 3\nconsole.log(number1 + 2)\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q13 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">String: <strong>Contains</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#common-sequence-operations\"><code>in</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\"># 2 is in the string\nif \"2\" in \"123\":\n    print(\"2 is in the string\")\n\n# 2 is not in the string\nif \"2\" not in \"456\":\n    print(\"2 is not in the string\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes\"><code>includes</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">// 2 is in the string\nif ('123'.includes('2')) {\n  console.log('2 is in the string')\n}\n\n// 2 is not in the string\nif (!'456'.includes('2')) {\n  console.log('2 is not in the string')\n}\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q14 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">String: <strong>Substring</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#common-sequence-operations\"><code>[i:j]</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_string = \"0123456\"\n\n# 234\nprint(some_string[2:5])\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring\"><code>substring</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someString = '0123456'\n\n// 234\nconsole.log(someString.substring(2, 5))\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q15 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">String: <strong>Join</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#str.join\"><code>join</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [\"a\", \"b\", \"c\"]\n\n# a,b,c\nprint(\",\".join(some_list))\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join\"><code>join</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = ['a', 'b', 'c']\n\n// a,b,c\nconsole.log(someList.join(','))\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q16 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">String: <strong>Strip</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#str.strip\"><code>strip</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_string = \"   abc   \"\n\n# abc\nprint(some_string.strip())\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim\"><code>trim</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someString = '   abc   '\n\n// abc\nconsole.log(someString.trim())\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q17 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">String: <strong>Split</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#str.split\"><code>split</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_string = \"a,b,c\"\nsome_string_split = some_string.split(\",\")\n\n# a\nprint(some_string_split[0])\n# b\nprint(some_string_split[1])\n# c\nprint(some_string_split[2])\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split\"><code>split</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someString = 'a,b,c'\nconst someStringSplit = someString.split(',')\n\n// a\nconsole.log(someStringSplit[0])\n// b\nconsole.log(someStringSplit[1])\n// c\nconsole.log(someStringSplit[2])\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q18 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">String: <strong>Replace</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#str.replace\"><code>replace</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_string = \"a b c d e\"\n\n# a,b,c,d,e\nprint(some_string.replace(\" \", \",\"))\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions\"><code>Regular Expressions</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace\"><code>replace</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someString = 'a b c d e'\n\n// Only changes the first space\n// a,b c d e\n// console.log(someString.replace(' ', ','))\n\n// Use / /g instead of ' ' to change every space\nconsole.log(someString.replace(/ /g, ','))\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q19 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">String: <strong>Search</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/re.html#re.search\"><code>search</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">import re\n\n# Has a number\nif re.search(r\"\\d\", \"iphone 8\"):\n    print(\"Has a number\")\n\n# Doesn't have a number\nif not re.search(r\"\\d\", \"iphone x\"):\n    print(\"Doesn't have a number\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions\"><code>Regular Expressions</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match\"><code>match</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">// Has a number\nif ('iphone 8'.match(/\\d/g)) {\n  console.log('Has a number')\n}\n\n// Doesn't have a number\nif (!'iphone x'.match(/\\d/g)) {\n  console.log(\"Doesn't have a number\")\n}\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q20 cf ph2-ns mb4-ns mb3\" id=\"list\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Iteration</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [6, 3, 5]\n\n# 6\n# 3\n# 5\nfor item in some_list:\n    print(item)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach\"><code>forEach</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = [6, 3, 5]\n\n// 6\n// 3\n// 5\nsomeList.forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q21 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Length</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/functions.html#len\"><code>len</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [1, 4, 9]\n\n# 3\nprint(len(some_list))\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length\"><code>length</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = [1, 4, 9]\n\n// 3\nconsole.log(someList.length)\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q22 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Enumerate</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/functions.html#enumerate\"><code>enumerate</code></a>, <a href=\"https://docs.python.org/3/library/stdtypes.html#typesseq-list\"><code>list</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [6, 3, 5]\n\n# 0 6\n# 1 3\n# 2 5\nfor i, item in enumerate(some_list):\n    print(f\"{i} {item}\")\n\n# If you're not using this in a for loop, use list()\n# list(enumerate(some_list)) # [(0, 6), (1, 3), (2, 5)]\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/foreach\"><code>forEach</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\"><code>map</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = [6, 3, 5]\n\n// 0 6\n// 1 3\n// 2 5\n\nsomeList.forEach((element, index) => {\n  console.log(`${index} ${element}`)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q23 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Contains</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#common-sequence-operations\"><code>in</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\"># 2 is in the list\nif 2 in [1, 2, 3]:\n    print(\"2 is in the list\")\n\n# 2 is not in the list\nif 2 not in [4, 5, 6]:\n    print(\"2 is not in the list\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes\"><code>includes</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">// 2 is in the list\nif ([1, 2, 3].includes(2)) {\n  console.log('2 is in the list')\n}\n\n// 2 is not in the list\nif (![4, 5, 6].includes(2)) {\n  console.log('2 is not in the list')\n}\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q24 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Reverse</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/functions.html#reversed\"><code>reversed</code></a>, <a href=\"https://docs.python.org/3/library/stdtypes.html#typesseq-list\"><code>list</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [1, 2, 3, 4]\n\n# reversed(some_list) is just an iterable.\n# To convert an iterable into a list, use list()\nreversed_list = list(reversed(some_list))\n\n# 4\n# 3\n# 2\n# 1\nfor item in reversed_list:\n    print(item)\n\n# You can use an iterable instead of a list in a for loop\n# for item in reversed(some_list):\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse\"><code>reverse</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = [1, 2, 3, 4]\n\nsomeList.reverse()\n\n// 4\n// 3\n// 2\n// 1\nsomeList.forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q25 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Range Iteration</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#typesseq-range\"><code>range</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\"># 0\n# 1\n# 2\n# 3\nfor i in range(4):\n    print(i)\n\n# 4\n# 5\n# 6\n# 7\nfor i in range(4, 8):\n    print(i)\n\n# 6\n# 5\n# 4\nfor i in range(6, 3, -1):\n    print(i)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">// 0\n// 1\n// 2\n// 3\nfor (let i = 0; i < 4; i++) {\n  console.log(i)\n}\n\n// 4\n// 5\n// 6\n// 7\nfor (let i = 4; i < 8; i++) {\n  console.log(i)\n}\n\n// 6\n// 5\n// 4\nfor (let i = 6; i > 3; i--) {\n  console.log(i)\n}\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q26 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Append with Modification</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#mutable-sequence-types\"><code>append</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [1, 2]\n\nsome_list.append(3)\n\n# 1\n# 2\n# 3\nfor x in some_list:\n    print(x)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\"><code>push</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = [1, 2]\n\nsomeList.push(3)\n\n// 1\n// 2\n// 3\nsomeList.forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q27 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Append without Modification</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/whatsnew/3.5.html#pep-448-additional-unpacking-generalizations\"><code>Unpacking</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">original_list = [1, 2]\n\n# [original_list, 3] -> [[1, 2], 3]\n# [*original_list, 3] -> [1, 2, 3]\nnew_list = [*original_list, 3]\noriginal_list[0] = 5\n\n# 1\n# 2\n# 3\nfor x in new_list:\n    print(x)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Copy_an_array\"><code>Spread</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const originalList = [1, 2]\n\n// [originalList, 3] -> [[1, 2], 3]\n// [...originalList, 3] -> [1, 2, 3]\nconst newList = [...originalList, 3]\noriginalList[0] = 5\n\n// 1\n// 2\n// 3\nnewList.forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q28 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Extend with Modification</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/datastructures.html#more-on-lists\"><code>extend</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [1]\n\nsome_list.extend([2, 3])\n\n# 1\n# 2\n# 3\nfor x in some_list:\n    print(x)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#A_better_way_to_concatenate_arrays\"><code>Spread</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = [1]\n\nsomeList.push(...[2, 3])\n\n// 1\n// 2\n// 3\nsomeList.forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q29 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Extend without Modification</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/datastructures.html#more-on-lists\"><code>List addition</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">original_list = [1]\nnew_list = original_list + [2, 3]\noriginal_list[0] = 5\n\n# 1\n# 2\n# 3\nfor x in new_list:\n    print(x)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat\"><code>concat</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const originalList = [1]\nconst newList = originalList.concat([2, 3])\noriginalList[0] = 5\n\n// 1\n// 2\n// 3\nnewList.forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q30 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Prepend</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/datastructures.html#more-on-lists\"><code>insert</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [4, 5]\n\nsome_list.insert(0, 3)\n\n# 3\n# 4\n# 5\nfor x in some_list:\n    print(x)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift\"><code>unshift</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = [4, 5]\nsomeList.unshift(3)\n\n// 3\n// 4\n// 5\nsomeList.forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q31 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Remove</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#mutable-sequence-types\"><code>del</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [\"a\", \"b\", \"c\"]\ndel some_list[1]\n\n# a\n# c\nfor x in some_list:\n    print(x)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\"><code>splice</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = ['a', 'b', 'c']\nsomeList.splice(1, 1)\n\n// a\n// c\nsomeList.forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q32 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Pop</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/datastructures.html#more-on-lists\"><code>pop</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [1, 2, 3, 4]\n\n# 4\nprint(some_list.pop())\n# 1\nprint(some_list.pop(0))\n\n# 2\n# 3\nfor x in some_list:\n    print(x)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop\"><code>pop</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift\"><code>shift</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = [1, 2, 3, 4]\n\n// 4\nconsole.log(someList.pop())\n\n// 1\nconsole.log(someList.shift())\n\n// 2\n// 3\nsomeList.forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q33 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Index</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/datastructures.html#more-on-lists\"><code>index</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [\"a\", \"b\", \"c\", \"d\", \"e\"]\n\n# 2\nprint(some_list.index(\"c\"))\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf\"><code>indexOf</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = ['a', 'b', 'c', 'd', 'e']\n\n// 2\nconsole.log(someList.indexOf('c'))\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q34 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Copy</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#mutable-sequence-types\"><code>[i:j]</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">original_list = [1, 2, 3]\nnew_list = original_list[:]  # or original_list.copy()\n\noriginal_list[2] = 4\n\n# 1\n# 2\n# 3\nfor x in new_list:\n    print(x)\n\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Copy_an_array\"><code>Spread</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const originalList = [1, 2, 3]\nconst newList = [...originalList]\n\noriginalList[2] = 4\n\n// 1\n// 2\n// 3\nnewList.forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q35 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Map</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions\"><code>List Comprehensions</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">original_list = [1, 2, 3]\nnew_list = [x * 2 for x in original_list]\n\n# 2\n# 4\n# 6\nfor x in new_list:\n    print(x)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\"><code>map</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const originalList = [1, 2, 3]\n\n// You can also do this:\n// const newList = originalList.map(x => { return x * 2 })\nconst newList = originalList.map(x => x * 2)\n\n// 2\n// 4\n// 6\nnewList.forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q36 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Map (Nested)</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions\"><code>List Comprehensions</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">first_list = [1, 3]\nsecond_list = [3, 4]\ncombined_list = [[x + y for y in second_list] for x in first_list]\n\n# 4\nprint(combined_list[0][0])\n# 5\nprint(combined_list[0][1])\n# 6\nprint(combined_list[1][0])\n# 7\nprint(combined_list[1][1])\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\"><code>map</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const firstList = [1, 3]\nconst secondList = [3, 4]\n\nconst conbinedList = firstList.map(x => {\n  return secondList.map(y => {\n    return x + y\n  })\n})\n\n// 4\nconsole.log(conbinedList[0][0])\n// 5\nconsole.log(conbinedList[0][1])\n// 6\nconsole.log(conbinedList[1][0])\n// 7\nconsole.log(conbinedList[1][1])\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q37 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Filter</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions\"><code>List Comprehensions</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">original_list = [1, 2, 3, 4, 5, 6]\nnew_list = [x for x in original_list if x % 2 == 0]\n\n# 2\n# 4\n# 6\nfor x in new_list:\n    print(x)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\"><code>filter</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const originalList = [1, 2, 3, 4, 5, 6]\nconst newList = originalList.filter(x => x % 2 == 0)\n\n// 2\n// 4\n// 6\nnewList.forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q38 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Sum</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/functions.html#sum\"><code>sum</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [1, 2, 3]\n\n# 6\nprint(sum(some_list))\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce\"><code>reduce</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = [1, 2, 3]\nconst reducer = (accumulator, currentValue) => accumulator + currentValue\n\n// 6\nconsole.log(someList.reduce(reducer))\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q39 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Zip</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/functions.html#zip\"><code>zip</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">list_1 = [1, 3, 5]\nlist_2 = [2, 4, 6]\n\n# 1 2\n# 3 4\n# 5 6\nfor x, y in zip(list_1, list_2):\n    print(f\"{x} {y}\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\"><code>map</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const list1 = [1, 3, 5]\nconst list2 = [2, 4, 6]\n\n// [[1, 2], [3, 4], [5, 6]]\nconst zippedList = list1.map((x, y) => {\n  return [x, list2[y]]\n})\n\nzippedList.forEach(element => {\n  console.log(`${element[0]} ${element[1]}`)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q40 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Slice</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#common-sequence-operations\"><code>[i:j]</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">original_list = [\"a\", \"b\", \"c\", \"d\", \"e\"]\nnew_list = original_list[1:3]\noriginal_list[1] = \"x\"\n\n# b\n# c\nfor x in new_list:\n    print(x)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\" https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\"><code>slice</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const originalList = ['a', 'b', 'c', 'd', 'e']\nconst newList = originalList.slice(1, 3)\noriginalList[1] = 'x'\n\n// b\n// c\nnewList.forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q41 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Sort</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/functions.html#sorted\"><code>sorted</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [4, 2, 1, 3]\n\n# 1\n# 2\n# 3\n# 4\nfor item in sorted(some_list):\n    print(item)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\"><code>sort</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = [4, 2, 1, 3]\n\n// 1\n// 2\n// 3\n// 4\nsomeList.sort().forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q42 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">List/Array: <strong>Sort Custom</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/functions.html#sorted\"><code>sorted</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_list = [[\"c\", 2], [\"b\", 3], [\"a\", 1]]\n\n# a 1\n# c 2\n# b 3\nfor item in sorted(some_list, key=lambda x: x[1]):\n    print(f\"{item[0]} {item[1]}\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\"><code>sort</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someList = [['c', 2], ['b', 3], ['a', 1]]\n\n// a 1\n// c 2\n// b 3\nsomeList\n  .sort((a, b) => {\n    return a[1] - b[1]\n  })\n  .forEach(element => {\n    console.log(`${element[0]} ${element[1]}`)\n  })\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q43 cf ph2-ns mb4-ns mb3\" id=\"dictionary\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Dictionary/Object: <strong>Iteration</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#dict.items\"><code>items</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_dict = {\"one\": 1, \"two\": 2, \"three\": 3}\n\n# one 1\n# two 2\n# three 3\n# NOTE: If you're not using this in a for loop,\n# convert it into a list: list(some_dict.items())\nfor key, value in some_dict.items():\n    print(f\"{key} {value}\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries\"><code>entries</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someDict = { one: 1, two: 2, three: 3 }\n\n// one 1\n// two 2\n// three 3\n\nObject.entries(someDict).forEach(element => {\n  console.log(`${element[0]} ${element[1]}`)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q44 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Dictionary/Object: <strong>Contains</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#common-sequence-operations\"><code>in</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_dict = {\"one\": 1, \"two\": 2, \"three\": 3}\n\n# one is in the dict\nif \"one\" in some_dict:\n    print(\"one is in the dict\")\n\n# four is not in the dict\nif \"four\" not in some_dict:\n    print(\"four is not in the dict\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty\"><code>hasOwnProperty</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someDict = { one: 1, two: 2, three: 3 }\n\n// one is in the dict\nif (someDict.hasOwnProperty('one')) {\n  console.log('one is in the dict')\n}\n\n// four is not in the dict\nif (!someDict.hasOwnProperty('four')) {\n  console.log('four is not in the dict')\n}\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q45 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Dictionary/Object: <strong>Add with Modification</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">original_dict = {\"one\": 1, \"two\": 2}\noriginal_dict[\"three\"] = 3\n\n# one 1\n# two 2\n# three 3\nfor key, value in original_dict.items():\n    print(f\"{key} {value}\")\n\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const originalDict = { one: 1, two: 2 }\noriginalDict.three = 3\n\n// one 1\n// two 2\n// three 3\nObject.entries(originalDict).forEach(element => {\n  console.log(`${element[0]} ${element[1]}`)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q46 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Dictionary/Object: <strong>Add without Modification</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/whatsnew/3.5.html#pep-448-additional-unpacking-generalizations\"><code>Unpacking</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">original_dict = {\"one\": 1, \"two\": 2}\nnew_dict = {**original_dict, \"three\": 3}\noriginal_dict[\"one\"] = 100\n\n# one 1\n# two 2\n# three 3\nfor key, value in new_dict.items():\n    print(f\"{key} {value}\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals\"><code>Spread</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const originalDict = { one: 1, two: 2 }\nconst newDict = { ...originalDict, three: 3 }\noriginalDict.one = 100\n\n// one 1\n// two 2\n// three 3\nObject.entries(newDict).forEach(element => {\n  console.log(`${element[0]} ${element[1]}`)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q47 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Dictionary/Object: <strong>Keys</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#dict.keys\"><code>keys</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_dict = {\"one\": 1, \"two\": 2, \"three\": 3}\n\n# one\n# two\n# three\n# NOTE: If you're not using this in a for loop,\n# convert it into a list: list(some_dict.keys())\nfor x in some_dict.keys():\n    print(x)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\"><code>keys</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someDict = { one: 1, two: 2, three: 3 }\n\n// one\n// two\n// three\nObject.keys(someDict).forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q48 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Dictionary/Object: <strong>Values</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#dict.values\"><code>values</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_dict = {\"one\": 1, \"two\": 2, \"three\": 3}\n\n\n# 1\n# 2\n# 3\n# NOTE: If you're not using this in a for loop,\n# convert it into a list: list(some_dict.values())\nfor x in some_dict.values():\n    print(x)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values\"><code>values</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someDict = { one: 1, two: 2, three: 3 }\n\n// 1\n// 2\n// 3\nObject.values(someDict).forEach(element => {\n  console.log(element)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q49 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Dictionary/Object: <strong>Remove</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#dict\"><code>del</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_dict = {\"one\": 1, \"two\": 2, \"three\": 3}\n\ndel some_dict[\"two\"]\n\n# one 1\n# three 3\nfor key, value in some_dict.items():\n    print(f\"{key} {value}\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete\"><code>delete</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someDict = { one: 1, two: 2, three: 3 }\n\ndelete someDict.two\n\nObject.entries(someDict).forEach(element => {\n  console.log(`${element[0]} ${element[1]}`)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q50 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Dictionary/Object: <strong>Get</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#dict\"><code>get</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_dict = {\"one\": 1, \"two\": 2, \"three\": 3}\n\n# some_dict[\"four\"] will be KeyError\n\n# Doesn't exist\nprint(some_dict.get(\"five\", \"Doesn't exist\"))\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR\"><code>||</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someDict = { one: 1, two: 2, three: 3 }\n\n// Doesn't exist\nconsole.log(someDict.five || \"Doesn't exist\")\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q51 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Dictionary/Object: <strong>Map</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/datastructures.html#dictionaries\"><code>Dictionary Comprehensions</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">original_list = {\"one\": 1, \"two\": 2}\n\n# {\"one\": 1, \"two\": 4}\nnew_list = {key: value * value for key, value in original_list.items()}\n\n# one 1\n# two 4\nfor key, value in new_list.items():\n    print(f\"{key} {value}\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries\"><code>entries</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const originalDict = { one: 1, two: 2 }\nconst newDict = {}\n\nObject.entries(originalDict).forEach(element => {\n  // newDict.element[0] doesn't work - for variable key use []\n  newDict[element[0]] = element[1] * element[1]\n})\n\n// one 1\n// two 4\nObject.entries(newDict).forEach(element => {\n  console.log(`${element[0]} ${element[1]}`)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q52 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Dictionary/Object: <strong>Copy</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/stdtypes.html#mutable-sequence-types\"><code>copy</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">original_dict = {\"one\": 1, \"two\": 2, \"three\": 3}\nnew_dict = original_dict.copy()\noriginal_dict[\"one\"] = 100\n\n# one 1\n# two 2\n# three 3\nfor key, value in new_dict.items():\n    print(f\"{key} {value}\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals\"><code>Spread</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const originalDict = { one: 1, two: 2, three: 3 }\nconst newDict = { ...originalDict }\noriginalDict.one = 100\n\n// one 1\n// two 2\n// three 3\nObject.entries(newDict).forEach(element => {\n  console.log(`${element[0]} ${element[1]}`)\n})\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q53 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Dictionary/Object: <strong>Dictionary/Object to JSON string</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/json.html#json.dumps\"><code>json.dumps</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">import json\n\nsome_dict = {\"one\": 1, \"two\": 2, \"three\": 3}\n\n# {\n#   \"one\": 1,\n#   \"two\": 2,\n#   \"three\": 3\n# }\nprint(json.dumps(some_dict, indent=2))\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify\"><code>JSON.stringify</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someDict = { one: 1, two: 2, three: 3 }\n\n// {\n//   \"one\": 1,\n//   \"two\": 2,\n//   \"three\": 3\n// }\nconsole.log(JSON.stringify(someDict, null, 2))\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q54 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Dictionary/Object: <strong>JSON string to Dictionary/Object</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/library/json.html#json.loads\"><code>json.loads</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">import json\n\nsome_json = \"\"\"{\n  \"one\": 1,\n  \"two\": 2,\n  \"three\": 3\n}\"\"\"\n\ndict_from_json = json.loads(some_json)\n\n# 2\nprint(dict_from_json[\"two\"])\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse\"><code>JSON.parse</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someJson = `{\n  \"one\": 1,\n  \"two\": 2,\n  \"three\": 3\n}`\n\nconst dictFromJson = JSON.parse(someJson)\n\n// 2\nconsole.log(dictFromJson.two)\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q55 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Dictionary/Object: <strong>Variable Key</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">some_variable = 2\nsome_dict = {(some_variable + 1): \"three\"}\n\n# three\nprint(some_dict[3])\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names\"><code>Computed Property Names</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const someVariable = 2\nconst someDict = { [someVariable + 1]: 'three' }\n\n// three\nconsole.log(someDict[3])\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q56 cf ph2-ns mb4-ns mb3\" id=\"function\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Function: <strong>Definitions</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">def add(x, y):\n    print(f\"Adding {x} and {y}\")\n    return x + y\n\n\n# Adding 1 and 2\n# 3\nprint(add(1, 2))\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const add = (x, y) => {\n  console.log(`Adding ${x} and ${y}`)\n  return x + y\n}\n// Adding 1 and 2\n// 3\nconsole.log(add(1, 2))\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q57 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Function: <strong>Keyword Arguments</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">def add(a, b, c):\n    return a + b + c\n\n\n# 6\nprint(add(b=1, a=2, c=3))\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const add = ({ a, b, c }) => {\n  return a + b + c\n}\n\n// 6\nconsole.log(\n  add({\n    b: 1,\n    a: 2,\n    c: 3\n  })\n)\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q58 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Function: <strong>Default Arguments</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">def greet(name, word=\"Hello\"):\n    print(f\"{word} {name}\")\n\n\n# Hello World\ngreet(\"World\")\n\n# Goodbye World\ngreet(\"World\", \"Goodbye\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters\"><code>Default Parameters</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const greet = (name, word = 'Hello') => {\n  console.log(`${word} ${name}`)\n}\n\n// Hello World\ngreet('World')\n\n// Goodbye World\ngreet('World', 'Goodbye')\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q59 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Function: <strong>Default Keyword Arguments</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">def greet(name=\"World\", word=\"Hello\"):\n    print(f\"{word} {name}\")\n\n\n# Goodbye World\ngreet(word=\"Goodbye\")\n\n# Hello Programming\ngreet(name=\"Programming\")\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Setting_a_function_parameter's_default_value\"><code>Default Value</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const greet = ({ name = 'World', word = 'Hello' }) => {\n  console.log(`${word} ${name}`)\n}\n\n// Goodbye World\ngreet({ word: 'Goodbye' })\n\n// Hello Programming\ngreet({ name: 'Programming' })\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q60 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Function: <strong>Positional Arguments</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/controlflow.html#arbitrary-argument-lists\"><code>Arbitrary Argument Lists</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">def positional_args(a, b, *args):\n    print(a)\n    print(b)\n    for x in args:\n        print(x)\n\n\n# 1\n# 2\n# 3\n# 4\npositional_args(1, 2, 3, 4)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters\"><code>Rest Parameters</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const positionalArgs = (a, b, ...args) => {\n  console.log(a)\n  console.log(b)\n  args.forEach(element => {\n    console.log(element)\n  })\n}\n\n// 1\n// 2\n// 3\n// 4\npositionalArgs(1, 2, 3, 4)\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q61 cf ph2-ns mb4-ns mb3\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Function: <strong>Variable Keyword Arguments</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/controlflow.html#keyword-arguments\"><code>Keyword Arguments</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">def func_1(**kwargs):\n    for key, value in kwargs.items():\n        print(f\"{key} {value}\")\n\n\ndef func_2(x, *args, **kwargs):\n    print(x)\n    for arg in args:\n        print(arg)\n    for key, value in kwargs.items():\n        print(f\"{key} {value}\")\n\n\n# one 1\n# two 2\nfunc_1(one=1, two=2)\n\n# 1\n# 2\n# 3\n# a 4\n# b 5\nfunc_2(1, 2, 3, a=4, b=5)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters\"><code>Rest Parameters</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">const func1 = kwargs => {\n  Object.entries(kwargs).forEach(element => {\n    console.log(`${element[0]} ${element[1]}`)\n  })\n}\n\n//  ...args must be the last argument\nconst func2 = (x, kwargs, ...args) => {\n  console.log(x)\n  args.forEach(element => {\n    console.log(element)\n  })\n  Object.entries(kwargs).forEach(element => {\n    console.log(`${element[0]} ${element[1]}`)\n  })\n}\n\n// one 1\n// two 2\nfunc1({ one: 1, two: 2 })\n\n// 1\n// 2\n// 3\n// a 4\n// b 5\nfunc2(1, { a: 4, b: 5 }, 2, 3)\n</code></pre>\n        </div>\n      </div>\n    </div>\n    <div class=\"Q62 cf ph2-ns mb4-ns mb3\" id=\"class\">\n      <h3 class=\"tc normal f3-ns f4 mb2\">Class: <strong>Basics</strong></h3>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>Python 3</strong> / <a href=\"https://docs.python.org/3/tutorial/classes.html\"><code>Classes</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-python\">class Duck:\n    def __init__(self, name):\n        self.name = name\n\n    def fly(self):\n        print(f\"{self.name} can fly\")\n\n    # not @classmethod: call a method on an instance\n    # duck = Duck(...)\n    # duck.create(...)\n    #\n    # @classmethod: call a method on a class\n    # Duck.create(...)\n    @classmethod\n    def create(cls, name, kind):\n        if kind == \"mallard\":\n            return MallardDuck(name)\n        elif kind == \"rubber\":\n            return RubberDuck(name)\n        else:\n            # cls = Duck\n            return cls(name)\n\n\nclass MallardDuck(Duck):\n    # @property:\n    # use duck.color instead of duck.color()\n    @property\n    def color(self):\n        return \"green\"\n\n\nclass RubberDuck(Duck):\n    def __init__(self, name, eye_color=\"black\"):\n        super().__init__(name)\n        self.eye_color = eye_color\n\n    def fly(self):\n        super().fly()\n        print(f\"Just kidding, {self.name} cannot fly\")\n\n    @property\n    def color(self):\n        return \"yellow\"\n\n\nregularDuck = Duck(\"reggie\")\n# reggie can fly\nregularDuck.fly()\n\nmallardDuck = Duck.create(\"mal\", \"mallard\")\n# mal\nprint(mallardDuck.name)\n# green\nprint(mallardDuck.color)\n\nrubberDuck = RubberDuck(\"vic\", \"blue\")\n# vic can fly\n# Just kidding, vic cannot fly\nrubberDuck.fly()\n# yellow\nprint(rubberDuck.color)\n# blue\nprint(rubberDuck.eye_color)\n</code></pre>\n        </div>\n      </div>\n      <div class=\"fl w-100 w-50-l pa2 mb3\">\n        <h4 class=\"f5 mt0 mb2 normal\"><strong>JavaScript (ES2015)</strong> / <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\"><code>Classes</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions\"><code>Method Definitions</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static\"><code>static</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get\"><code>get</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super\"><code>super</code></a></h4>\n        <div class=\"overflow-auto ba bw2 b--white br4\">\n          <pre><code class=\"language-javascript\">class Duck {\n  constructor(name) {\n    this.name = name\n  }\n\n  fly() {\n    console.log(`${this.name} can fly`)\n  }\n\n  // not static: call a method on an instance\n  // const duck = new Duck(...)\n  // duck.create(...)\n  //\n  // static: call a method on a class\n  // Duck.create(...)\n  static create(name, kind) {\n    if (kind === 'mallard') {\n      return new MallardDuck(name)\n    } else if (kind === 'rubber') {\n      return new RubberDuck(name)\n    } else {\n      // this = Duck\n      return new this(name)\n    }\n  }\n}\n\nclass MallardDuck extends Duck {\n  // get:\n  // use duck.color instead of duck.color()\n  get color() {\n    return 'green'\n  }\n}\n\nclass RubberDuck extends Duck {\n  constructor(name, eyeColor = 'black') {\n    super(name)\n    this.eyeColor = eyeColor\n  }\n\n  fly() {\n    super.fly()\n    console.log(`Just kidding, ${this.name} cannot fly`)\n  }\n\n  get color() {\n    return 'yellow'\n  }\n}\n\nconst regularDuck = new Duck('reggie')\n// reggie can fly\nregularDuck.fly()\n\nconst mallardDuck = Duck.create('mal', 'mallard')\n// mal\nconsole.log(mallardDuck.name)\n// green\nconsole.log(mallardDuck.color)\n\nrubberDuck = new RubberDuck('vic', 'blue')\n// vic can fly\n// Just kidding, vic cannot fly\nrubberDuck.fly()\n\n// yellow\nconsole.log(rubberDuck.color)\n\n// blue\nconsole.log(rubberDuck.eyeColor)\n</code></pre>\n        </div>\n      </div>\n    </div>\n  </div>\n\n<script src=\"https://unpkg.com/prismjs@1.15.0/prism.js\"></script>\n<script src=\"https://unpkg.com/prismjs@1.15.0/components/prism-python.min.js\"></script>\n\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></script>\n<script src=\"static/app.js\"></script>\n<!-- Global site tag (gtag.js) - Google Analytics -->\n<script async src=\"https://www.googletagmanager.com/gtag/js?id=UA-108029397-2\"></script>\n<script>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n\n  gtag('config', 'UA-108029397-2');\n</script>\n<!-- Place this tag in your head or just before your close body tag. -->\n<script async defer src=\"https://buttons.github.io/buttons.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "static/app.js",
    "content": "$(function() {\n  $('.js-bottom-right-button-link').click(function(e) {\n    $('html, body').animate({ scrollTop: 0 }, 'slow')\n\n    // デフォルトのhref=\"#\"の挙動をなくす\n    // function()をfunction(e)にする必要がある\n    e.preventDefault()\n  })\n\n  // https:// か http:// ではじまるリンクは新しいタブで開く\n  $(\"a[href^='https://'], a[href^='http://']\").attr('target', '_blank')\n})\n"
  },
  {
    "path": "static/prism-base16-atelierplateau.light.css",
    "content": "/*\n\nName:       Base16 Atelier Plateau Light\nAuthor:     Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/plateau)\n\nPrism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)\nOriginal Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)\n\n*/\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n  font-family: Consolas, Menlo, Monaco, \"Andale Mono WT\", \"Andale Mono\", \"Lucida Console\", \"Lucida Sans Typewriter\", \"DejaVu Sans Mono\", \"Bitstream Vera Sans Mono\", \"Liberation Mono\", \"Nimbus Mono L\", \"Courier New\", Courier, monospace;\n  font-size: 14px;\n  line-height: 1.375;\n  direction: ltr;\n  text-align: left;\n  white-space: pre;\n  word-spacing: normal;\n  word-break: normal;\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n  tab-size: 4;\n  -webkit-hyphens: none;\n  -ms-hyphens: none;\n  hyphens: none;\n  background: #f4ecec;\n  color: #585050;\n}\n\npre[class*=\"language-\"]::-moz-selection, pre[class*=\"language-\"] ::-moz-selection,\ncode[class*=\"language-\"]::-moz-selection, code[class*=\"language-\"] ::-moz-selection {\n  text-shadow: none;\n  background: #e7dfdf;\n}\n\npre[class*=\"language-\"]::selection, pre[class*=\"language-\"] ::selection,\ncode[class*=\"language-\"]::selection, code[class*=\"language-\"] ::selection {\n  text-shadow: none;\n  background: #e7dfdf;\n}\n\n/* Code blocks */\npre[class*=\"language-\"] {\n  padding: 1em;\n  margin: .5em 0;\n  overflow: auto;\n}\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n  padding: .1em;\n  border-radius: .3em;\n}\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n  color: #7e7777;\n}\n\n.token.punctuation {\n  color: #585050;\n}\n\n.token.namespace {\n  opacity: .7;\n}\n\n.token.operator,\n.token.boolean,\n.token.number {\n  color: #b45a3c;\n}\n\n.token.property {\n  color: #a06e3b;\n}\n\n.token.tag {\n  color: #7272ca;\n}\n\n.token.string {\n  color: #5485b6;\n}\n\n.token.selector {\n  color: #8464c4;\n}\n\n.token.attr-name {\n  color: #b45a3c;\n}\n\n.token.entity,\n.token.url,\n.language-css .token.string,\n.style .token.string {\n  color: #5485b6;\n}\n\n.token.attr-value,\n.token.keyword,\n.token.control,\n.token.directive,\n.token.unit {\n  color: #4b8b8b;\n}\n\n.token.statement,\n.token.regex,\n.token.atrule {\n  color: #5485b6;\n}\n\n.token.placeholder,\n.token.variable {\n  color: #7272ca;\n}\n\n.token.deleted {\n  text-decoration: line-through;\n}\n\n.token.inserted {\n  border-bottom: 1px dotted #1b1818;\n  text-decoration: none;\n}\n\n.token.italic {\n  font-style: italic;\n}\n\n.token.important,\n.token.bold {\n  font-weight: bold;\n}\n\n.token.important {\n  color: #ca4949;\n}\n\n.token.entity {\n  cursor: help;\n}\n\npre > code.highlight {\n  outline: 0.4em solid #ca4949;\n  outline-offset: .4em;\n}\n\n.line-numbers .line-numbers-rows {\n  border-right-color: #e7dfdf !important;\n}\n\n.line-numbers-rows > span:before {\n  color: #8a8585 !important;\n}\n\n.line-highlight {\n  background: rgba(27, 24, 24, 0.2) !important;\n  background: -webkit-linear-gradient(left, rgba(27, 24, 24, 0.2) 70%, rgba(27, 24, 24, 0)) !important;\n  background: linear-gradient(to right, rgba(27, 24, 24, 0.2) 70%, rgba(27, 24, 24, 0)) !important;\n}\n"
  }
]