github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-25 22:44:08 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
80e255e4e2
discourse/spec/fixtures/onebox/slides.response
Arpit Jalan 283b08d45f
DEV: Absorb onebox gem into core (#12979) 
* Move onebox gem in core library

* Update template file path

* Remove warning for onebox gem caching

* Remove onebox version file

* Remove onebox gem

* Add sanitize gem

* Require onebox library in lazy-yt plugin

* Remove onebox web specific code

This code was used in standalone onebox Sinatra application

* Merge Discourse specific AllowlistedGenericOnebox engine in core

* Fix onebox engine filenames to match class name casing

* Move onebox specs from gem into core

* DEV: Rename `response` helper to `onebox_response`

Fixes a naming collision.

* Require rails_helper

* Don't use `before/after(:all)`

* Whitespace

* Remove fakeweb

* Remove poor unit tests

* DEV: Re-add fakeweb, plugins are using it

* Move onebox helpers

* Stub Instagram API

* FIX: Follow additional redirect status codes (#476)

Don’t throw errors if we encounter 303, 307 or 308 HTTP status codes in responses

* Remove an empty file

* DEV: Update the license file

Using the copy from https://choosealicense.com/licenses/gpl-2.0/#

Hopefully this will enable GitHub to show the license UI?

* DEV: Update embedded copyrights

* DEV: Add Onebox copyright notice

* DEV: Add MIT license, convert COPYRIGHT.txt to md

* DEV: Remove an incorrect copyright claim

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
Co-authored-by: jbrw <jamie@goatforce5.org>
2021-05-26 15:11:35 +05:30

2853 lines
443 KiB
Plaintext
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html class="sl-root decks show " data-account="free">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","errorBeacon":"bam.nr-data.net","licenseKey":"4fd2e9786b","applicationID":"1563900","transactionName":"cApZREQKWl9XFxZQVlAORB9FDVlE","queueTime":0,"applicationTime":37,"agent":""}</script>
<script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(t,e,n){function r(n){if(!e[n]){var o=e[n]={exports:{}};t[n][0].call(o.exports,function(e){var o=t[n][1][e];return r(o||e)},o,o.exports)}return e[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<n.length;o++)r(n[o]);return r}({QJf3ax:[function(t,e){function n(){}function r(t){function e(t){return t&&t instanceof n?t:t?a(t,i,o):o()}function c(n,r,o){t&&t(n,r,o);for(var i=e(o),a=f(n),c=a.length,u=0;c>u;u++)a[u].apply(i,r);return i}function u(t,e){p[t]=f(t).concat(e)}function f(t){return p[t]||[]}function s(){return r(c)}var p={};return{on:u,emit:c,create:s,listeners:f,context:e,_events:p}}function o(){return new n}var i="nr@context",a=t("gos");e.exports=r()},{gos:"7eSDFh"}],ee:[function(t,e){e.exports=t("QJf3ax")},{}],3:[function(t,e){function n(t){return function(){r(t,[(new Date).getTime()].concat(i(arguments)))}}var r=t("handle"),o=t(1),i=t(2);"undefined"==typeof window.newrelic&&(newrelic=window.NREUM);var a=["setPageViewName","addPageAction","setCustomAttribute","finished","addToTrace","inlineHit","noticeError"];o(a,function(t,e){window.NREUM[e]=n("api-"+e)}),e.exports=window.NREUM},{1:12,2:13,handle:"D5DuLP"}],gos:[function(t,e){e.exports=t("7eSDFh")},{}],"7eSDFh":[function(t,e){function n(t,e,n){if(r.call(t,e))return t[e];var o=n();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(t,e,{value:o,writable:!0,enumerable:!1}),o}catch(i){}return t[e]=o,o}var r=Object.prototype.hasOwnProperty;e.exports=n},{}],D5DuLP:[function(t,e){function n(t,e,n){return r.listeners(t).length?r.emit(t,e,n):void(r.q&&(r.q[t]||(r.q[t]=[]),r.q[t].push(e)))}var r=t("ee").create();e.exports=n,n.ee=r,r.q={}},{ee:"QJf3ax"}],handle:[function(t,e){e.exports=t("D5DuLP")},{}],XL7HBI:[function(t,e){function n(t){var e=typeof t;return!t||"object"!==e&&"function"!==e?-1:t===window?0:i(t,o,function(){return r++})}var r=1,o="nr@id",i=t("gos");e.exports=n},{gos:"7eSDFh"}],id:[function(t,e){e.exports=t("XL7HBI")},{}],G9z0Bl:[function(t,e){function n(){if(!v++){var t=l.info=NREUM.info,e=f.getElementsByTagName("script")[0];if(t&&t.licenseKey&&t.applicationID&&e){c(p,function(e,n){t[e]||(t[e]=n)});var n="https"===s.split(":")[0]||t.sslForHttp;l.proto=n?"https://":"http://",a("mark",["onload",i()]);var r=f.createElement("script");r.src=l.proto+t.agent,e.parentNode.insertBefore(r,e)}}}function r(){"complete"===f.readyState&&o()}function o(){a("mark",["domContent",i()])}function i(){return(new Date).getTime()}var a=t("handle"),c=t(1),u=window,f=u.document;t(2);var s=(""+location).split("?")[0],p={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-852.min.js"},d=window.XMLHttpRequest&&XMLHttpRequest.prototype&&XMLHttpRequest.prototype.addEventListener&&!/CriOS/.test(navigator.userAgent),l=e.exports={offset:i(),origin:s,features:{},xhrWrappable:d};f.addEventListener?(f.addEventListener("DOMContentLoaded",o,!1),u.addEventListener("load",n,!1)):(f.attachEvent("onreadystatechange",r),u.attachEvent("onload",n)),a("mark",["firstbyte",i()]);var v=0},{1:12,2:3,handle:"D5DuLP"}],loader:[function(t,e){e.exports=t("G9z0Bl")},{}],12:[function(t,e){function n(t,e){var n=[],o="",i=0;for(o in t)r.call(t,o)&&(n[i]=e(o,t[o]),i+=1);return n}var r=Object.prototype.hasOwnProperty;e.exports=n},{}],13:[function(t,e){function n(t,e,n){e||(e=0),"undefined"==typeof n&&(n=t?t.length:0);for(var r=-1,o=n-e||0,i=Array(0>o?0:o);++r<o;)i[r]=t[e+r];return i}e.exports=n},{}]},{},["G9z0Bl"]);</script>
<title>ECMAScript 2015 by David Leonard</title>
<meta name="description" content="An overview of ES6 features. " />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta property="og:title" content="ECMAScript 2015 by David Leonard" />
<meta property="og:description" content="An overview of ES6 features. " />
<meta property="og:site_name" content="Slides" />
<meta property="og:image" content="https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/cff7c3/decks.jpg" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://slides.com/drksephy/ecmascript-2015" />
<meta property="fb:app_id" content="146002942236376" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="manifest" href="/manifest.json">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,600,700&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic" rel="stylesheet" type="text/css" data-application-font="opensans">
<link href="//assets.slid.es/assets/slides/slides-1df814f963530a8557bab503c81c1049.css" media="all" rel="stylesheet" />
<link href="//assets.slid.es/assets/application-c398590fe521aefe107f633ca035bc1f.css" media="all" rel="stylesheet" />
<link href="//assets.slid.es/assets/deck-v2-df3848b455a4a84f0b5dd323b4939351.css" media="all" rel="stylesheet" />
<style id="user-css-output" type="text/css"></style>
<meta content="authenticity_token" name="csrf-param" />
<meta content="kHnorC3XjvYlj2MgIqJyTaEyS+ThXLyj9/ziPIOT+gY=" name="csrf-token" />
<script type="text/javascript">
if( !/dnt=1/.test( window.location.search ) ) {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-39670045-1', 'auto');
ga('send', 'pageview');
}
</script>
<!--[if lt IE 9]>
<script src="//assets.slid.es/assets/html5shiv-b51d49ab0e89834a02ffce4a59905afb.js"></script>
<![endif]-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Slides">
<meta name="twitter:title" content="ECMAScript 2015">
<meta name="twitter:description" content="An overview of ES6 features. ">
<meta name="twitter:image" content="https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/cff7c3/decks.jpg">
</head>
<body>
<div id="container" class="container">
<header class="global-header show-on-scroll">
<div class="wrapper">
<h1 class="logo-animation">
<a class="symbol" href="/">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</a>
<a class="word" href="/"></a>
</h1>
<ul class="nav nav-long">
<li class="nav-item" data-page-id="home/explore">
<a class="nav-item-anchor" href="/explore"><span class="nav-item-label">Explore</span></a>
</li>
<li class="nav-item" data-page-id="static/features">
<a class="nav-item-anchor" href="/features"><span class="nav-item-label">Features</span></a>
</li>
<li class="nav-item" data-page-id="static/pricing">
<a class="nav-item-anchor" href="/pricing?h=1"><span class="nav-item-label">Pricing</span></a>
</li>
<li class="nav-item-divider"></li>
<li class="nav-item" data-page-id="sessions/new">
<a class="nav-item-anchor" href="/users/sign_in"><span class="nav-item-label">Log in</span></a>
</li>
<li class="nav-item nav-item-highlighted nav-item-secondary" data-page-id="static/pricing">
<a class="nav-item-anchor" href="/pricing"><span class="nav-item-label">Sign up</span></a>
</li>
</ul>
</div>
</header>
<div id="main" class="main" role="main">
<div class="marquee">
<div class="reveal-frame">
<div class="reveal-viewport theme-font-josefine theme-color-white-blue">
<div class="reveal">
<div class="slides">
<section class="has-light-background" data-background-color="#ffffff" data-id="b6f5e4a6616d9dbe85f40d8fc34b919e"><div class="sl-block" data-block-type="text" style="width: 680px; left: 280px; top: 339px; height: auto;" data-block-id="6bac341cc91bd579f7e9c40bc3a741a0">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:0.7em">ECMAScript 2015 : Deep Dive</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 0px; top: 428px; background: linear-gradient(180deg,#C0C0C0, #FFFE59);" data-block-id="d5f8d6b84d00758ae35cddd5ec6b2852">
<div class="sl-block-content" data-line-x1="-381" data-line-y1="233" data-line-x2="579" data-line-y2="233" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="-381 233 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-381" y1="233" x2="579" y2="233"></line><line stroke="#fbde34" stroke-width="4" x1="-381" y1="233" x2="579" y2="233"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 304px; height: 152px; left: 328px; top: 0px;" data-block-id="c6ff967b28ea37960be86a16e583835f">
<div class="sl-block-content" style="z-index: 12;">
<img data-natural-width="640" data-natural-height="320" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2134382/nodejs.png">
</div>
</div></section><section data-id="3dc27fe74e29cfbc9684bc7f7540f6c3"><div class="sl-block" data-block-type="text" style="width: 320px; left: 116px; top: 28px; height: auto;" data-block-id="9cc3407d4388ca2eedfd15a6c30edba2">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
<h1 style="text-align: left;">
<span style="font-size:0.7em">David Leonard</span>
</h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="6121878ca7c80c59806355b65629bc44">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 389px; left: 116px; top: 125px;" data-block-id="390551b2a2ae046ccd9e695c3805d2b4">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<p style="text-align:left">
<a href="https://github.com/DrkSephy" target="_blank">https://github.com/DrkSephy</a>
</p>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 116px; top: 162px;" data-block-id="49d9588ced1a803e6acf000fe609c372">
<div class="sl-block-content" data-line-x1="-257" data-line-y1="-65" data-line-x2="119" data-line-y2="-65" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="376" height="1" viewbox="-257 -65 376 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-257" y1="-65" x2="119" y2="-65"></line><line stroke="#fbde34" stroke-width="2" x1="-257" y1="-65" x2="119" y2="-65"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 397px; left: 116px; top: 180px;" data-block-id="11df1e4eb1c577c28af02bd483de3bf3">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;">
<p style="text-align: left;">
<a href="https://twitter.com/DrkSephy" target="_blank">https://twitter.com/DrkSephy</a>
</p>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 116px; top: 218px;" data-block-id="84d353eb96e1d1ae9287923cf16b0807">
<div class="sl-block-content" data-line-x1="-257" data-line-y1="-65" data-line-x2="131" data-line-y2="-65" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="388" height="1" viewbox="-257 -65 388 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-257" y1="-65" x2="131" y2="-65"></line><line stroke="#fbde34" stroke-width="2" x1="-257" y1="-65" x2="131" y2="-65"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="width: 192px; left: 112px; top: 287px; height: auto;" data-block-id="7e8796317581c72c437c81763d85c923">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 17;">
<h2 style="text-align: left;">
<span style="font-size:0.7em">What I do:</span>
</h2>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 729px; left: 116px; top: 287px;" data-block-id="1ea78669ece760c504db7022cb9ae62d">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18; text-align: left; background-color: rgba(0, 0, 0, 0);" data-has-custom-html="" dir="ui">
<h3 class="fragment" data-fragment-index="1" style="color: rgb(251, 222, 52); text-align: left;"> </h3>
<ul>
<li class="fragment" style="color: rgb(251, 222, 52);" data-fragment-index="0">
<h3>
<span style="font-size:0.7em;">
<span style="color:black">Grad Student at CCNY</span>
</span>
</h3>
</li>
<li class="fragment" style="color: rgb(251, 222, 52);" data-fragment-index="1">
<h3>
<span style="font-size:0.7em;">
<span style="color:black">Game Developer</span>
</span>
</h3>
</li>
<li class="fragment" data-fragment-index="2" style="color: rgb(251, 222, 52);">
<h3>
<span style="font-size:0.7em;">
<span style="color:black">Yahoo! Developer Network</span>
</span>
</h3>
</li>
</ul>
</div>
</div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 468px; height: 312px; left: 480px; top: 287px;" data-block-id="9e2dd8d98ed9dbfa0896fe39ee3f6ddf">
<div class="sl-block-content fragment" style="z-index: 19;" data-fragment-index="1">
<img data-natural-width="600" data-natural-height="400" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2033478/out.gif">
</div>
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="debbb071bfa250994f43eaa769105442"><div class="sl-block" data-block-type="text" style="width: 247px; left: 102px; top: 22px; height: auto;" data-block-id="d9ade49710598807d5f18fbdc8af7e5d">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px; line-height:62.0455px">Why ES6?</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5f019ae767fb36ad389282299854d187">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 372.689px; height: 541px; left: 121px; top: 128px;" data-block-id="9a8246451d25c3a186eda651c12c570e"><div class="sl-block-content" style="z-index: 12;"><img data-natural-width="620" data-natural-height="900" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137383/part1.png"></div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 374px; height: 542.903px; left: 533px; top: 128px;" data-block-id="5ecf464d0c352b0f980af453e46d4362"><div class="sl-block-content" style="z-index: 14;"><img data-natural-width="620" data-natural-height="900" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137388/part2.png"></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="adbd6d37902ab622c11e8acae6d9b696"><div class="sl-block" data-block-type="text" style="width: 247px; left: 102px; top: 22px; height: auto;" data-block-id="881b6764d82652dbc8063420baf916ed">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1>
<span style="font-size:52.5px; line-height:62.0455px">Deep Dive</span>
</h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="2a4decaa8a9376feb002d291e355551f">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 347px; left: 67px; top: 148px;" data-block-id="2d0688a70c089439514c44caeb102503">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13; line-height: 0.91; background-color: rgba(0, 0, 0, 0);" data-has-custom-html="" data-has-line-height="" dir="ui">
<ul style="color:#fbde34;">
<li class="fragment" data-fragment-index="0">
<h3><span style="font-size:0.7em;"><span style="color:black">Tooling</span> </span></h3>
</li>
<li class="fragment" data-fragment-index="1">
<h3><span style="font-size:0.7em;"><span style="color:black">Variables and Scoping</span> </span></h3>
</li>
<li class="fragment" data-fragment-index="2">
<h3><span style="font-size:0.7em;"><span style="color:black">Strings</span></span></h3>
</li>
<li class="fragment" data-fragment-index="3">
<h3><span style="font-size:0.7em;"><span style="color:black">Destructuring</span> </span></h3>
</li>
<li class="fragment" data-fragment-index="4">
<h3><span style="font-size:0.7em;"><span style="color:black">Parameter Handling</span> </span></h3>
</li>
<li class="fragment" data-fragment-index="5">
<h3><span style="font-size:0.7em;"><span style="color: black; background-color: rgba(0, 0, 0, 0);">Arrow Functions</span></span></h3>
</li>
<li class="fragment" data-fragment-index="6">
<h3><span style="font-size:0.7em;"><span style="color:black">Classes</span> </span></h3>
</li>
<li class="fragment" data-fragment-index="7">
<h3><span style="font-size:0.7em;"><span style="color:black">Modules</span> </span></h3>
</li>
<li class="fragment" data-fragment-index="8">
<h3><span style="font-size:0.7em;"><span style="color:black">Generators</span> </span></h3>
</li>
<li class="fragment" data-fragment-index="9">
<h3><span style="font-size:0.7em;"><span style="color:black">Promises</span> </span></h3>
</li>
</ul>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="27ebb56bc8c0fd1e06159e16c2bb6ac5">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="a8d1781c3df32ed71d229edf34b7a055"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 0px; top: 426px;" data-block-id="49b5d320b26271b2114a4b713aee1ca8"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 330px; left: 630px; top: 329px;" data-block-id="483b26bc1f85498f3f281babe0b2005b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
<h2><span style="font-size:0.7em">Running ES6</span></h2>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="c861a00000045ec203ed4a263fb62c34"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 80px; top: 0px;" data-block-id="b116ca2364853e5ab2b77e58b381dc31"><div class="sl-block-content" data-line-x1="20" data-line-y1="590" data-line-x2="20" data-line-y2="-110" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="20 -110 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="20" y1="590" x2="20" y2="-110"></line><line stroke="#fbde34" stroke-width="4" x1="20" y1="590" x2="20" y2="-110"></line></svg></div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 234px; height: 234px; left: 108px; top: 51px;" data-block-id="89f52cfff0eaaffa9fa8c52c1f6819df"><div class="sl-block-content" style="z-index: 12;"><img data-natural-width="200" data-natural-height="200" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137410/babel.png"></div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 202px; height: 192.677px; left: 108px; top: 339px;" data-block-id="810a7d6b1139cdf9fe504bb1a5047fa1"><div class="sl-block-content" style="z-index: 13;"><img data-natural-width="585" data-natural-height="558" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137412/traceur.svg"></div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 88.5px; height: 197.961px; left: 493px; top: 69px;" data-block-id="7ba8bfc836f4afb930738100df89b99a"><div class="sl-block-content" style="z-index: 14;"><img data-natural-width="228" data-natural-height="510" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137415/gulp-2x.png"></div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 202.632px; height: 234px; left: 493px; top: 319px;" data-block-id="b0f8ad26cb737296568bc701dcb31b51"><div class="sl-block-content" style="z-index: 15;"><img data-natural-width="562" data-natural-height="649" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137417/webpack.svg"></div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 205.556px; height: 230px; left: 742px; top: 53px;" data-block-id="94b25df1dc8f8753fc40237add5c43cf"><div class="sl-block-content" style="z-index: 16;"><img data-natural-width="185" data-natural-height="207" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137419/browserify.png"></div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 83.2441px; height: 83px; left: 365px; top: 126px;" data-block-id="cc2a9514f2d709507568c76a7ffb5c92"><div class="sl-block-content" style="z-index: 17;"><img data-natural-width="341" data-natural-height="340" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137506/plusalpha.png"></div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 83.2441px; height: 83px; left: 625px; top: 126px;" data-block-id="a47e47ea022d3ae15a0a59b4f16440ca"><div class="sl-block-content" style="z-index: 18;"><img data-natural-width="341" data-natural-height="340" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137506/plusalpha.png"></div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 83.2441px; height: 83px; left: 365px; top: 394px;" data-block-id="b7858b60dc26968cfd5a8c4a8b881e15"><div class="sl-block-content" style="z-index: 19;"><img data-natural-width="341" data-natural-height="340" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137506/plusalpha.png"></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="804f37fccaab0d593f2939846572b05b">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 21;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div></section><section data-id="0184bfa587c486920d5205297dead000"><div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 948px; height: 509.442px; left: 6px; top: 120px;" data-block-id="148f0e067d34c244ce0744d2777366ca"><a class="sl-block-content" style="z-index: 11;" href="http://babeljs.io/repl/" target="_blank"><img data-natural-width="1431" data-natural-height="769" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2149696/babel_repl.png"></a></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="a944f162b0031b9ccf42b0ce44a1a8de"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="b3ff8b7c4df781b3f21c5fc1898995d5"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 560px; left: 400px; top: 331px;" data-block-id="1d346f422690b3799fd4365f9a93dec2"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
<h2><span style="font-size:59.85px">Variables and Scoping</span></h2>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="17182eadcfa3b04edce4b0519156ee24"><div class="sl-block" data-block-type="text" style="width: 387px; left: 102px; top: 22px; height: auto;" data-block-id="400b36a4cf81029d746b54d522225a19">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1>
<span style="font-size:52.5px; line-height:62.0455px">var vs. let / const</span>
</h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="ac4f215643cd203f1639a764bf669fc5">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 402px; left: 112px; top: 165px;" data-block-id="9b9c18a16a75589d6eb225307cbe593e">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13; color: rgb(17, 17, 17);" dir="ui">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getFood(food)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">if</span> <span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">var</span> snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Friskies<span style="color:rgb(198, 0, 0)">'</span></span>;
<span style="color:rgb(133, 153, 0)">return</span> snack;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">return</span> snack;
<span style="color:rgb(38, 139, 210)">}</span>
getFood<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">false</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c0c583666a90ca00b8473315026dcd26">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 220px; top: 264px;" data-block-id="2f80c2f8a8b2620f93f3cf67b2e136cd"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="100.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="100.5" y1="0.5" x2="245.5" y2="0.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 433px;" data-block-id="fe7b578fbfcdbc7faaffe3682e21565e"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="100.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="100.5" y1="0.5" x2="245.5" y2="0.5"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 151px; left: 305px; top: 501px;" data-block-id="0b6037e3d5af7a06cb0abe378c1c4553"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="2">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// undefined</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 360px; height: 284.469px; left: 514px; top: 338px;" data-block-id="d02d32fd6eae938c79dd69e382efa738"><div class="sl-block-content fragment" style="z-index: 18;" data-fragment-index="2"><img data-natural-width="367" data-natural-height="290" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157338/cat2.png"></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 302px; left: 640px; top: 653px;" data-block-id="e8bafd5180e6c0462c0f93eeff93b724"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="2">
<pre style="text-align: left;"><span style="font-size:0.5em">Credit: https://github.com/venegu</span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="f3826d03597a3af34cf254f04bf70de8"><div class="sl-block" data-block-type="text" style="width: 387px; left: 102px; top: 22px; height: auto;" data-block-id="8fe70f18ecb71d04b149f0aa0583eb1a">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1>
<span style="font-size:52.5px; line-height:62.0455px">var vs. let / const</span>
</h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7e728e4bb14146866d739e04cad05393">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 119px; top: 161px;" data-block-id="0bd2c0d29715a0350c108bfedd86ffa4">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getFood(food)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">var</span> snack;
<span style="color:rgb(133, 153, 0)">if</span> <span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Friskies<span style="color:rgb(198, 0, 0)">'</span></span>;
<span style="color:rgb(133, 153, 0)">return</span> snack;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">return</span> snack;
<span style="color:rgb(38, 139, 210)">}</span>
getFood<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">false</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="2cb46b00e91d2a3eb19353a772322eec">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 166px; top: 298px;" data-block-id="36548dcddff9a1d63fbfd87b6be47cfd"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="213" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="113" height="1" viewbox="100 0 113 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="100.5" y1="0.5" x2="213.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="100.5" y1="0.5" x2="213.5" y2="0.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 166px; top: 497px;" data-block-id="8266fd8d3a4c1faf1930baa527b3d618"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="268" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="168" height="1" viewbox="100 0 168 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="100.5" y1="0.5" x2="266.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="100.5" y1="0.5" x2="266.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(266,0) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 308px; top: 522px;" data-block-id="04a49881d08135746d38cb3224d3287e"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="200" data-line-x2="42" data-line-y2="131" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="42" height="69" viewbox="0 131 42 69"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="200.5" x2="41.5" y2="133.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="200.5" x2="41.5" y2="133.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(41,133) rotate(31.329)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 151px; left: 344px; top: 480px;" data-block-id="78c5e1cd83002e7d29a7dbcf1caaf9f6"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18;" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// undefined</span></span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0eda9e19fb9874da4153b97581e3e711"><div class="sl-block" data-block-type="text" style="width: 387px; left: 102px; top: 22px; height: auto;" data-block-id="edbae8922948c49ebcb9d82850f20c35">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
<h1>
<span style="font-size:52.5px; line-height:62.0455px">var vs. let / const</span>
</h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="132e588ca3995813ed9187854daf33e4">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 119px; top: 161px;" data-block-id="613fca135a81c58fd1d062416a0f04f2">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getFood(food)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">if</span> <span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
let snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Friskies<span style="color:rgb(198, 0, 0)">'</span></span>;
<span style="color:rgb(133, 153, 0)">return</span> snack;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">return</span> snack;
<span style="color:rgb(38, 139, 210)">}</span>
getFood<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">false</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="4da95a72cdfe6461df5b7314e130e53a">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 408px; top: 181px;" data-block-id="6020c7eb642397a71f472ab077efe9ce"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 60px; left: 560px; top: 164px;" data-block-id="e39cb5866657b3acc3dd4a604185b6ba"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// A</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 501px; top: 350px;" data-block-id="ab32ec10e8d508ab69a9b3513153a744"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 60px; left: 654px; top: 333px;" data-block-id="407c59e5274755c1bd5a48eb045ecc8c"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18;" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// B</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 465px;" data-block-id="d156fb8fb318f2beb1e8380ff09641d1"><div class="sl-block-content fragment" data-line-x1="101" data-line-y1="0" data-line-x2="251" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="150" height="1" viewbox="101 0 150 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="101.5" y1="0.5" x2="251.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="101.5" y1="0.5" x2="251.5" y2="0.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 310px; top: 553px;" data-block-id="67f2b6e3a2c73e2333683fca3da3d522"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 159px; left: 462px; top: 536px;" data-block-id="bf12bcba3027ab7802b6ffcda951adf3"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 21;" data-fragment-index="3">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// 'Meow Mix'</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 270.75px; height: 300px; left: 646px; top: 315px;" data-block-id="6ae4eb14257d2eb877e17fe60e9ec45d"><div class="sl-block-content fragment" style="z-index: 22;" data-fragment-index="3"><img data-natural-width="361" data-natural-height="400" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157336/cat1.png"></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 302px; left: 640px; top: 653px;" data-block-id="d2345ffd5861917c8bf94718fcc7d203"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 23;" data-fragment-index="3">
<pre style="text-align: left;"><span style="font-size:0.5em">Credit: https://github.com/venegu</span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff"><div class="sl-block" data-block-type="text" style="width: 387px; left: 102px; top: 22px; height: auto;" data-block-id="727bfed16d22fbb03cb57522d1aec95d">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
<h1>
<span style="font-size:52.5px; line-height:62.0455px">var vs. let / const</span>
</h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="76213ba32af8a5cb2ac8ffac4e04ca21">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 119px; top: 161px;" data-block-id="339d6025f4e2783effb983e4c02f3d5b">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getFood(food)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">if</span> <span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
let snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Friskies<span style="color:rgb(198, 0, 0)">'</span></span>;
<span style="color:rgb(133, 153, 0)">return</span> snack;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">return</span> snack;
<span style="color:rgb(38, 139, 210)">}</span>
getFood<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">false</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5780017c00461041aa8c363a290d1b17">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 408px; top: 181px;" data-block-id="f96785ee10127c738db484670c4433a4"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 60px; left: 560px; top: 164px;" data-block-id="24657f676ef9f24f447d22aecea2780d"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// A</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 501px; top: 350px;" data-block-id="1030a74d32c8717911e3f1d003928153"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 60px; left: 654px; top: 333px;" data-block-id="c3470c366f26a37aeba5b5e837b5346b"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18;" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// B</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 160px; top: 465px;" data-block-id="23a3c5cd4c084440b6f720d822b7c967"><div class="sl-block-content fragment" data-line-x1="101" data-line-y1="0" data-line-x2="251" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="150" height="1" viewbox="101 0 150 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="101.5" y1="0.5" x2="251.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="101.5" y1="0.5" x2="251.5" y2="0.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 310px; top: 553px;" data-block-id="5f2cf759e94ac1b7961dd0ac6c3caa6d"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 159px; left: 462px; top: 536px;" data-block-id="40767c3cd6dda5844b3b78d60e56d812"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 21;" data-fragment-index="3">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// 'Meow Mix'</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="image" style="width: 382px; height: 191px; left: 590px; top: 462px;" data-block-id="d2f149e6d2c0e425d6d2c1280a547cb6"><div class="sl-block-content fragment" style="z-index: 22;" data-fragment-index="3"><img data-natural-width="390" data-natural-height="195" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157343/cat3.png"></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 302px; left: 640px; top: 653px;" data-block-id="2f67a4c2af5fc52e4031297dbcbade49"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 23;" data-fragment-index="3">
<pre style="text-align: left;"><span style="font-size:0.5em">Credit: https://github.com/venegu</span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0794bc29e320c1b77a02fcb2231c0d6e"><div class="sl-block" data-block-type="text" style="width: 387px; left: 81px; top: 22px; height: auto;" data-block-id="1c9d7cb766ae1a490d5a3fc53eba1b6b">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px">IIFE   &gt; Blocks</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7a8b5290ebd708d1fa1b59f69898ab66">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 109px; top: 238px;" data-block-id="a1ab2a1fbdb4239d22111695697f3438">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; line-height: 1.56;" dir="ui" data-has-line-height="">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">var</span> food <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 228px; top: 78px;" data-block-id="6f623c2f91f42a722bae4e49423f0b60"><div class="sl-block-content" data-line-x1="148" data-line-y1="0" data-line-x2="200" data-line-y2="0" data-line-color="#000000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="52" height="1" viewbox="148 0 52 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="148" y1="0" x2="200" y2="0"></line><line stroke="#000000" stroke-width="2" x1="148" y1="0" x2="200" y2="0"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="837c51aeec3617bce9159d8239a8e870">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 344px; top: 395px;" data-block-id="0d5de7d70bf3b2db66c471f2f0a539db"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="172" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="72" height="1" viewbox="100 0 72 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="172.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="172.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 219px; left: 416px; top: 378px;" data-block-id="b3b6e7d4c3df6f6bb86f76b68a5db3fc"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Reference Error</span></span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="9ed96e6abf71cffb46f9101991915765"><div class="sl-block" data-block-type="text" style="width: 387px; left: 80px; top: 22px; height: auto;" data-block-id="6ecb5d47caa60c95822eaa370104ad01">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px">IIFE  &gt; Blocks</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5558e04fef6d49ba4cbc8b0675067eb2">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 119px; top: 195px;" data-block-id="18b0e02eeaf8898200717be79963e638">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; line-height: 1.56;" dir="ui" data-has-line-height="">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">{</span>
let food <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
<span style="color:rgb(38, 139, 210)">}</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 229px; top: 78px;" data-block-id="8f91b5832a509fe8d90d3a6f49341b31"><div class="sl-block-content" data-line-x1="155" data-line-y1="0" data-line-x2="200" data-line-y2="0" data-line-color="#000000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="45" height="1" viewbox="155 0 45 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="155" y1="0" x2="200" y2="0"></line><line stroke="#000000" stroke-width="2" x1="155" y1="0" x2="200" y2="0"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="225178376b2d5515b0b20f5f9ca5383b">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 343px; top: 350px;" data-block-id="4b7b15f108dca537b07e02c061e60ec5"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="172" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="72" height="1" viewbox="100 0 72 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="172.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="172.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 219px; left: 421px; top: 333px;" data-block-id="79cef032cd6b0ecad6eccfbdb078983d"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Reference Error</span></span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="f1331acbbafa20b7b187f8a0fae57989"><div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="51e27ec7bed98e7f619820d107bd3e9d">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
<h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Scoping</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="040fec867c223da9cf27a41f9145b028">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 104px; top: 191px;" data-block-id="6ae77d277ade352c47d37513095bd2ba"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>character)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">+</span> character;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="cefb5c8502feed7d0197d7d36c7b318e">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 282px; top: 428px;" data-block-id="d0a6a88793ff00ba195b8e6e63ddf0e7"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="5" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="103" height="1" viewbox="-98 178 103 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="5.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="5.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 320px; top: 428px;" data-block-id="71591801265092bd29b01a8822940cce"><div class="sl-block-content fragment" data-line-x1="-26.25" data-line-y1="78" data-line-x2="46" data-line-y2="140" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="arrow" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="72" height="62" viewbox="-26 78 72 62"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-25.5" y1="78.5" x2="43.5" y2="137.5"></line><line stroke="#ff0000" stroke-width="3" x1="-25.5" y1="78.5" x2="43.5" y2="137.5"></line><polygon fill="#ff0000" transform="translate(43,137) rotate(130.634)" points="0,-4.5 4.5,4.5 -4.5,4.5"></polygon></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 524px; left: 392px; top: 467px;" data-block-id="8162a441fb30163bd43df4ceec5933d7"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="2">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Cannot read property 'name' of undefined</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 459px; top: 359px;" data-block-id="1d0b96f8d49f30194ba4932e5f00bd8d"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="103" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 18;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="201" height="1" viewbox="-98 178 201 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="101.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="101.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(101,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 59.75px; left: 660px; top: 342px;" data-block-id="888b3dc8a35bbb12b54b690d78373ff3"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="0">
<pre><font color="#93a1a1"><span style="font-size:19.5993px; line-height:21.3811px">// A</span></font></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 334px; top: 396px;" data-block-id="e2f736af1c0fe76d0025a9b68e43ab93"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="180" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 20;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="278" height="1" viewbox="-98 178 278 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="178.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="178.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(178,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 60px; left: 625px; top: 379px;" data-block-id="cf07954eafced2a1779d00d67119f683"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 21;" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// B</span></span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="24723272d9a750c7a038a91c162ee202">
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c37647f9fecc5c7af79aa5afd37912a1">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 104px; top: 191px;" data-block-id="9d232bb8193cf0a64c6cc91faca8f503"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">var</span> that <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">this</span>;
<span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>character)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> that.name <span style="color:rgb(133, 153, 0)">+</span> character;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="bcd464a00c8d31a0d1720619e5e8bd02">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 351px; top: 380px;" data-block-id="988eb7ad32d1aebc2277d588ffc5b0c6"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="191" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="289" height="1" viewbox="-98 178 289 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="189.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="189.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(189,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 164px; left: 647px; top: 363px;" data-block-id="64dee2bbcdb4a571ce2a90ba8da376ca"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Store this</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 282px; top: 461px;" data-block-id="e16be546ab8d18f166345207272dd8a1"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="-48" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="50" height="1" viewbox="-98 178 50 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="-47.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="-47.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="dc914369e3f94a75340beec537f3cd75">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 17;">
<h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Scoping</span></h1>
</div>
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="a812b83ce381f2e3350730844a1c7f0c">
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="af46097bf2d54c67e3ee1cfbf83ac8c8">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 104px; top: 191px;" data-block-id="ea686ff443cc8499b6c73dffd7f34a7f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>character)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">+</span> character;
<span style="color:rgb(38, 139, 210)">}</span>, <span style="color:rgb(38, 139, 210)">this</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8d523e8998a8e59acd96539435661aee">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 187px; top: 460px;" data-block-id="3b9b7a110f062ed5bfc80c7e799ca982"><div class="sl-block-content fragment" data-line-x1="-102.5" data-line-y1="178" data-line-x2="-49" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="53" height="1" viewbox="-102 178 53 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-101.5" y1="178.5" x2="-48.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-101.5" y1="178.5" x2="-48.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="d528c6df249833da2723abb2e20a2f9f">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 15;">
<h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Scoping</span></h1>
</div>
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="857332de28c87e8828c39595a1b3bc44">
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e7f33024df9ce8913ac6769346d81822">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 104px; top: 191px;" data-block-id="d47208be2cc82f6236ac4a249e47e3cb"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui"><pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>character)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">+</span> character;
<span style="color:rgb(38, 139, 210)">}</span>.bind<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span></span></pre></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="34d1799f2e5a7e3e0e5d2e0d881a84d9">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 170px; top: 461px;" data-block-id="6f287c7e1c6e102cb43d3b12205a7257"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="21.5" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="120" height="1" viewbox="-98 178 120 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="22.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="22.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="1566c54963304c383225bbc18b712ef8">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 15;">
<h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Scoping</span></h1>
</div>
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="9bddc9ad3076515f61e62d655accf8bf"><div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="d9789299460946045ee4ba9a41c1ab3c">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px; line-height:62.0455px">Arrow Functions</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="b204b42ff02e2fb3e85144394c0b8d69">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="1fa7452b0bc63060e723dd22f14b9a14">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 700px; left: 104px; top: 181px;" data-block-id="e69c1e8fdf43494b3ac53bde54d6ddfb"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>character<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">+</span> character <span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 459px; top: 382px;" data-block-id="59bca867eec019a55c1ae4cc5a79d67e"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="-63.5" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="35" height="1" viewbox="-98 178 35 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="-62.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="-62.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="16533f573d91c9e1d2bc6dba3f405237"><div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="48d61723a672437493c141547536d384">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px; line-height:62.0455px">Arrow Functions</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="266d9ee2293a0cc25cd0bb37c05452cd">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 104px; top: 398px;" data-block-id="9816e219e0f06fb675988563e62e586f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> arr <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">1</span>, <span style="color:rgb(38, 145, 134)">2</span>, <span style="color:rgb(38, 145, 134)">3</span>, <span style="color:rgb(38, 145, 134)">4</span>, <span style="color:rgb(38, 145, 134)">5</span><span style="color:rgb(38, 139, 210)">]</span>;
<strong>const</strong> squares <span style="color:rgb(133, 153, 0)">=</span> arr.map<span style="color:rgb(147, 161, 161)">(</span>x <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> x <span style="color:rgb(133, 153, 0)">*</span> x<span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 650px; left: 104px; top: 193px;" data-block-id="cc15f4070e6a1e0fa0578246aa0a47a1"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> squares <span style="color:rgb(133, 153, 0)">=</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>x)</span> <span style="color:rgb(38, 139, 210)">{</span> <span style="color:rgb(133, 153, 0)">return</span> x <span style="color:rgb(133, 153, 0)">*</span> x <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7b5881ac464fdebe9656e8a500448a22">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 235px;" data-block-id="0a11bf53dd6c28511d29b822ab02ad43"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="-2.5" data-line-y2="196" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="96" height="18" viewbox="-98 178 96 18"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="-4.5" y2="196.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="-4.5" y2="196.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(-5,196) rotate(100.62)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 266px; left: 336px; top: 236px;" data-block-id="56f15986fe69dac3a95bafced6e86309"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Function Expression</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 421px; top: 472px;" data-block-id="d8c0789683c1410fafd91278d83a67fb"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="-2.5" data-line-y2="196" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 18;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="96" height="18" viewbox="-98 178 96 18"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="-4.5" y2="196.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="-4.5" y2="196.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(-5,196) rotate(100.62)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 95px; left: 523px; top: 472px;" data-block-id="53a34ea3a53e2b08a4af116f9876c70f"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Terse </span></span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ac7a457574e4c7eb885889607e4efbea"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="bdec14621a47be385cdf364918b69dc9"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 188px; left: 772px; top: 331px;" data-block-id="8f9f3a3367ce03ce46fb0debd0d24bcb"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
<h2><span style="font-size:59.85px; line-height:70.7318px">Strings</span></h2>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="7e53596321f818264a67e9869bcda82e"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e28b835666a659231b2f167b5095d3d5"><div class="sl-block" data-block-type="text" style="width: 517.5px; left: 116px; top: 22px; height: auto;" data-block-id="2ea56db8e1ea62e2b34c740232304854">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px">String.prototype.includes</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="b0e54a9c063ec79bc161746ca2436197">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 684px; left: 116px; top: 160px;" data-block-id="1c6918c2627a4ef150e438a739a01eab">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> string <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>food<span style="color:rgb(198, 0, 0)">'</span></span>;
<span style="color:rgb(38, 139, 210)">var</span> substring <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>foo<span style="color:rgb(198, 0, 0)">'</span></span>;
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>string.<span style="color:rgb(38, 139, 210)">indexOf</span><span style="color:rgb(147, 161, 161)">(</span>substring<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">&gt;</span> <span style="color:rgb(133, 153, 0)">-</span><span style="color:rgb(38, 145, 134)">1</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 748px; left: 116px; top: 420px;" data-block-id="06395e4a889a913184a28a546ff8601a">
<div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> string <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>food<span style="color:rgb(198, 0, 0)">'</span></span>;
<strong>const</strong> substring <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>foo<span style="color:rgb(198, 0, 0)">'</span></span>;
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>string.includes<span style="color:rgb(147, 161, 161)">(</span>substring<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c5c427fb01ac4221b8a3aead1bb0cb92">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 255px; top: 270px;" data-block-id="30ecb437474a3df8a54fafa581aa67e6"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="277" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="378" height="1" viewbox="-101 178 378 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="275.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="275.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(275,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 256px; top: 521px;" data-block-id="e84bdd1ab12f8b783f90219ccc7fff74"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="244" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="345" height="1" viewbox="-101 178 345 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="242.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="242.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(242,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 266px; left: 640px; top: 253px;" data-block-id="a55d5d0f3e7622e5fc222095c006cad7"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// true</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 266px; left: 608px; top: 504px;" data-block-id="0f069caa5926efa9e588c694136c7cde"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="2">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// true</span></span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="64461d5278507fdcb3673f801a60f631"><div class="sl-block" data-block-type="text" style="width: 477px; left: 119px; top: 30px; height: auto;" data-block-id="cfafbe41488f9ea2c86b9ffa7fb24f10">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px">String.prototype.repeat</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7e5dfce1d115993165d7b758fbd30b0b">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 562px; left: 119px; top: 185px;" data-block-id="7df15975047c71b4e3f880a61eb62e68">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> repeat(string, count)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">var</span> strings <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 139, 210)">]</span>;
<span style="color:rgb(133, 153, 0)">while</span><span style="color:rgb(147, 161, 161)">(</span>strings.length <span style="color:rgb(133, 153, 0)">&lt;</span> count<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
strings.<span style="color:rgb(38, 139, 210)">push</span><span style="color:rgb(147, 161, 161)">(</span>string<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">return</span> strings.<span style="color:rgb(38, 139, 210)">join</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span><span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 375px; left: 119px; top: 537px;" data-block-id="54ac51ea63f26c6c11b4e6ed208e99c4">
<div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>meow<span style="color:rgb(198, 0, 0)">'</span></span>.repeat<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)">3</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="33b529380ceccbc0fc81b321d1d1ffdb">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 326px; top: 559px;" data-block-id="79ce858ec3a0c39975248f5fb1f001a5"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-6" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="95" height="1" viewbox="-101 178 95 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-7.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-7.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(-8,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 181px; left: 428px; top: 542px;" data-block-id="0e71c39a883978bd7583f390d0ab2a42"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// meowmeowmow</span></span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="9e200583ecebe51140dd62b77ea31f56"><div class="sl-block" data-block-type="text" style="width: 841px; left: 96px; top: 30px; height: auto;" data-block-id="bc137f7b36aef6d7bbf61737fe657482">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px">Template Literals: Escaping Characters</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="da18e9e028823caae02d08c57b1dbf23">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 885px; left: 104px; top: 202px;" data-block-id="d578b9086fec91f14795e3b1ef508b15">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
<pre><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> text <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">"</span>This string contains <span style="color:rgb(203, 75, 22)">\"</span>double quotes<span style="color:rgb(203, 75, 22)">\"</span> which are escaped.<span style="color:rgb(198, 0, 0)">"</span></span></span></pre>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 826px; left: 104px; top: 350px;" data-block-id="7309c8ed1da2b8f32c2e05238512df68">
<div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" dir="ui" data-fragment-index="0">
<pre> </pre>
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let text <span style="color:rgb(133, 153, 0)">=</span> `This string contains <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">"</span>double quotes<span style="color:rgb(198, 0, 0)">"</span></span> which are escaped.`
</span></pre>
<p> </p>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="da2328c868ef3f0d872472bd8f68e381">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="000e33552f64679b9636db27efd0689f"><div class="sl-block" data-block-type="text" style="width: 681px; left: 101px; top: 30px; height: auto;" data-block-id="2f68a19ada9b71f3a230479e2d50390a">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1 style="text-align: left;"><span style="font-size:52.5px">Template Literals: Interpolation</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="bf09f1707284ba2d74df53ab6cd7af4e">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 826px; left: 94px; top: 336px;" data-block-id="4953e8d802477333c684f3aa1cf619f9">
<div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">const name <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Tiger<span style="color:rgb(198, 0, 0)">'</span></span>;
const age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">13</span>;
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>`My cat is named <span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>name<span style="color:rgb(38, 139, 210)">}</span> and is <span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>age<span style="color:rgb(38, 139, 210)">}</span> years old.`<span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 876px; left: 101px; top: 179px;" data-block-id="9d69ed18c74b6ac692909970f8fa8a39"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> name <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Tiger<span style="color:rgb(198, 0, 0)">'</span></span>;
<span style="color:rgb(38, 139, 210)">var</span> age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">13</span>;
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>My cat is named <span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(133, 153, 0)">+</span> name <span style="color:rgb(133, 153, 0)">+</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span> and is <span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(133, 153, 0)">+</span> age <span style="color:rgb(133, 153, 0)">+</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span> years old.<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c90278af4ca45621fa6e3bbfb2fa617c">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 435px; top: 437px;" data-block-id="b385a42e3c3f5bf33bcfbfc12fe53602"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-20" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="81" height="1" viewbox="-101 178 81 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-19.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-19.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 607px; top: 437px;" data-block-id="538308fbd2ef62907002fd2ec1547c51"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-20" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="81" height="1" viewbox="-101 178 81 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-19.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-19.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 182.5px; height: 211.594px; left: 425px; top: 455px;" data-block-id="1bd6c13c92a7324d4f8060124770c4f5"><div class="sl-block-content fragment" style="z-index: 17;" data-fragment-index="0"><img data-natural-width="207" data-natural-height="240" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157344/cat4.png"></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 302px; left: 640px; top: 653px;" data-block-id="da252fd6a0293dbdef3313fbc3814dae"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="1">
<pre style="text-align: left;"><span style="font-size:0.5em">Credit: https://github.com/venegu</span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e6fe0e77cccc4e270ee85bf7c5668031"><div class="sl-block" data-block-type="text" style="width: 748px; left: 104px; top: 28px; height: auto;" data-block-id="7e676ee9d241ae1e1be753bc032a61de">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px">Template Literals: Multi-line Strings</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="64b95c3c58efac25841ab24f133633ad">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 265px; left: 108px; top: 165px;" data-block-id="c1237f75f9c5c22fabaf77a9663e225d"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> text <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(147, 161, 161)">(</span>
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>cat<span style="color:rgb(203, 75, 22)">\n</span><span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(133, 153, 0)">+</span>
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>dog<span style="color:rgb(203, 75, 22)">\n</span><span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(133, 153, 0)">+</span>
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>nickelodeon<span style="color:rgb(198, 0, 0)">'</span></span>
<span style="color:rgb(147, 161, 161)">)</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 273px; left: 108px; top: 414px;" data-block-id="15e3409cd8a56d75be421f3b4cf0414f"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> text <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span>
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>cat<span style="color:rgb(198, 0, 0)">'</span></span>,
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>dog<span style="color:rgb(198, 0, 0)">'</span></span>,
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>nickelodeon<span style="color:rgb(198, 0, 0)">'</span></span>
<span style="color:rgb(38, 139, 210)">]</span>.<span style="color:rgb(38, 139, 210)">join</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span><span style="color:rgb(203, 75, 22)">\n</span><span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 194px; left: 543px; top: 272px;" data-block-id="a09f1cf63462cdfe13f138775674cb27"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> text <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(147, 161, 161)">(</span>
`cat
dog
nickelodeon`
<span style="color:rgb(147, 161, 161)">)</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c2af18d91c08d1c9e480cc1cc1bd6dc8">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 310px; top: 248px;" data-block-id="b225ee65cd7d0cfe4ccbe39341111a52"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="84" data-line-y2="263" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="185" height="85" viewbox="-101 178 185 85"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="82.5" y2="262.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="82.5" y2="262.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(82,262) rotate(114.618)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 310px; top: 370px;" data-block-id="56a7e4b3c6ca867d99e05404552aa509"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="84" data-line-y2="73" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 18;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="185" height="105" viewbox="-101 73 185 105"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="82.5" y2="74.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="82.5" y2="74.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(82,74) rotate(60.489)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="cbebb8fc22b28953a0e01d16fef23647"><div class="sl-block" data-block-type="text" style="width: 667px; left: 106px; top: 28px; height: auto;" data-block-id="41cb1b1e99d2ab3a173c012db73db52f">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1><span style="font-size:52.5px">Template Literals: Expressions</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="9db7a13de4d1e94afb9c4de4f0107c58">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 906px; left: 116px; top: 285px;" data-block-id="c3a31752893c01f4d5f733a394c2be9e">
<div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; line-height: 1.56;" dir="ui" data-fragment-index="0" data-has-line-height="">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let today <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">new</span> Date<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>
let text <span style="color:rgb(133, 153, 0)">=</span> `The time and date is <span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>today.<span style="color:rgb(38, 139, 210)">toLocaleString</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(38, 139, 210)">}</span>`
</span></pre>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="99a4280ee3a12e1d401f54952227b669">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 503px; top: 372px;" data-block-id="d89a048d4fc609fe4bc35f9b0dc0cc58"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="190" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="291" height="1" viewbox="-101 178 291 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="190.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="190.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ea323ebaf10fb9a481abe7eabb43ea4f"><div class="sl-block" data-block-type="text" style="width: 748px; left: 104px; top: 28px; height: auto;" data-block-id="b459880787977ea7c2abeab26d0228cd">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px">Template Literals: Multi-line Strings</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="d5767fb2d69792a45658b9e901ca10c7">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 680px; left: 120px; top: 154px;" data-block-id="974dcd346a6a67f11cf36d9d84af5632"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let book <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span>
title: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Harry Potter and The Sorcercers Stone<span style="color:rgb(198, 0, 0)">'</span></span>,
summary: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Much magic. Such depth.<span style="color:rgb(198, 0, 0)">'</span></span>,
author: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>J.K. Rowling<span style="color:rgb(198, 0, 0)">'</span></span>
<span style="color:rgb(38, 139, 210)">}</span>
let html <span style="color:rgb(133, 153, 0)">=</span> `<span style="color:rgb(133, 153, 0)">&lt;</span>header<span style="color:rgb(133, 153, 0)">&gt;</span>
<span style="color:rgb(133, 153, 0)">&lt;</span>h1<span style="color:rgb(133, 153, 0)">&gt;</span><span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>book.title<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(133, 153, 0)">&lt;</span>/h1<span style="color:rgb(133, 153, 0)">&gt;</span>
<span style="color:rgb(133, 153, 0)">&lt;</span>/header<span style="color:rgb(133, 153, 0)">&gt;</span>
<span style="color:rgb(133, 153, 0)">&lt;</span>section<span style="color:rgb(133, 153, 0)">&gt;</span>
<span style="color:rgb(133, 153, 0)">&lt;</span>div<span style="color:rgb(133, 153, 0)">&gt;</span><span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>book.summary<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(133, 153, 0)">&lt;</span>/div<span style="color:rgb(133, 153, 0)">&gt;</span>
<span style="color:rgb(133, 153, 0)">&lt;</span>div<span style="color:rgb(133, 153, 0)">&gt;</span><span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>book.author<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(133, 153, 0)">&lt;</span>/div<span style="color:rgb(133, 153, 0)">&gt;</span>
<span style="color:rgb(133, 153, 0)">&lt;</span>/section<span style="color:rgb(133, 153, 0)">&gt;</span>`</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e00044518495808d68eb0ecf5b5180c9">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 208px; top: 420px;" data-block-id="850c8ac5f7d94795a024fed779ceef20"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="30" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="131" height="1" viewbox="-101 178 131 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="30.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="30.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 208px; top: 525px;" data-block-id="3418d006612bf5fab468c85b5f06d50a"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="63" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="164" height="1" viewbox="-101 178 164 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="63.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="63.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 208px; top: 559px;" data-block-id="a7d66c0184991d6c45591e5a651c43dd"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="54" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="155" height="1" viewbox="-101 178 155 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="54.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="54.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ef0c7e6231a2e1dd5b26207b6fc4cd95"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="661d498551a327bc4031893807280ec4"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 320px; left: 640px; top: 331px;" data-block-id="a70ce76e2ada09562c79d8c4d5f7f2f9"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
<h2><span style="font-size:59.85px; line-height:70.7318px">Destructuring</span></h2>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="093c27585a60ca59b50432813c15c62c"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="706b45bacee61ca79a7b600b16f9eb93"><div class="sl-block" data-block-type="text" style="width: 299px; left: 104px; top: 22px; height: auto;" data-block-id="03f6794ea3f093d7ea5308a0522522c1">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px; line-height:62.0455px">Destructuring</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7c241b3d00cb0e6f71c5ce96af020046">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 104px; top: 173px;" data-block-id="8ba99d6ed52f16621a2f9a76f5c86c7c"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
<pre><br></pre>
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> luke <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span> occupation: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>jedi<span style="color:rgb(198, 0, 0)">'</span></span>, father: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>anakin<span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">var</span> <span style="color:rgb(38, 139, 210)">{</span>occupation, father<span style="color:rgb(38, 139, 210)">}</span> <span style="color:rgb(133, 153, 0)">=</span> luke;
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>occupation<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 'jedi'</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>father<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 'anakin'</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 104px; top: 426px;" data-block-id="06bb0f7a210e88b37fd278d28c0225cc"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="3">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> <span style="color:rgb(38, 139, 210)">[</span>a, b<span style="color:rgb(38, 139, 210)">]</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">10, 20</span><span style="color:rgb(38, 139, 210)">]</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>a<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 10</span></span>
</pre>
<pre style="font-size: 0.9333em;"><span style="font-size:0.7em"><font color="#586e75">console</font><span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><font color="#586e75">b</font><span style="color:rgb(147, 161, 161)">)</span><font color="#586e75">; </font><span style="color:rgb(147, 161, 161)">// 20</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0ac2425bc10ef94e19539ead86d845e2">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 152px; top: 286px;" data-block-id="bc8319fe0df6c09f32f1703f03a49073"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="7" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="227" height="1" viewbox="-220 36 227 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="7.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="7.5" y2="36.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 143px; top: 253px;" data-block-id="c8adfaa7de2c8ef70032ce6dbedbb777"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-155" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="65" height="1" viewbox="-220 36 65 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-154.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-154.5" y2="36.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 241px; top: 253px;" data-block-id="dfd7e70ec409e3ca5720d995d422677e"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="231" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="451" height="1" viewbox="-220 36 451 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="231.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="231.5" y2="36.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="dacfe67bcf08cb3c7e10dceac0854af1"><div class="sl-block" data-block-type="text" style="width: 293px; left: 118px; top: 22px; height: auto;" data-block-id="355dfac38f5fde13032b83346ad4f57b">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px">Destructuring</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0958d321a46e21c11c6bb642b40c4125">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 170px;" data-block-id="d7584a49c3761c6da5299f698fdac430"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getCoords <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">{</span>
x: <span style="color:rgb(38, 145, 134)">10</span>,
y: <span style="color:rgb(38, 145, 134)">22</span>
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">var</span> <span style="color:rgb(38, 139, 210)">{</span>x, y<span style="color:rgb(38, 139, 210)">}</span> <span style="color:rgb(133, 153, 0)">=</span> getCoords<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>x<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 10</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>y<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 22</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="2c7fa661602caaccaefebe808627c2f4">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 175px; top: 440px;" data-block-id="ebb1961fd49646d0836c6670f2c297d9"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-50" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="51" height="1" viewbox="-101 178 51 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-49.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-49.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ee34c8127354649ae48b62a5200b8e32"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="8d0d2cce61251c7e57ad76cb2a585b75"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 212px; left: 748px; top: 331px;" data-block-id="ea385d033339879fd6ccc76b6a1659ae"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
<h2><span style="font-size:59.85px; line-height:70.7318px">Modules</span></h2>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="ad257b14cbdab85dc11bce7363af85cc"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section data-id="9a4e442278e4eb94a293ec38e0c2d366"><div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 369.6px; height: 420px; left: 283px; top: 148px;" data-block-id="5aab15e27f808d358211ad6a9176728d"><div class="sl-block-content" style="z-index: 11;"><img data-natural-width="440" data-natural-height="500" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2153791/importexport.jpg"></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 433px; left: 526px; top: 662px;" data-block-id="796b92678b042353cbe67fc93f00f0c9"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<p style="text-align: left;"><span style="font-size:0.5em">Credit: https://www.flickr.com/photos/lucaohman/3473867313</span></p>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="296426d5738e81c9c25bb378fa767c15"><div class="sl-block" data-block-type="text" style="width: 509px; left: 118px; top: 22px; height: auto;" data-block-id="dad1fe87a909e6263add7c704ff85f2c">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px; line-height:62.0455px">Exporting in CommonJS</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7c09eb4b267b000099933aa25566496e">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 170px;" data-block-id="6f6e105eef074c34568154fd18b3f54c"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">module.exports <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>
module.exports <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span> foo: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>bar<span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(38, 139, 210)">}</span>
module.exports <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>foo<span style="color:rgb(198, 0, 0)">'</span></span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>bar<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>
module.exports <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> bar <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 410px;" data-block-id="359c457c974681635d2af7cd97ce101d"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> <span style="color:rgb(38, 145, 134)">1</span>
<strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> <span style="color:rgb(38, 139, 210)">{</span> foo: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>bar<span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(38, 139, 210)">}</span>
<strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>foo<span style="color:rgb(198, 0, 0)">'</span></span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>bar<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>
<strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> bar <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="eb52615dbb250acb77dcb4a0f9bc18db">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="89b51bd42517e1156145c180dcd0c6e7"><div class="sl-block" data-block-type="text" style="width: 336px; left: 118px; top: 22px; height: auto;" data-block-id="fb6217a200208e9240ca52367d6f41ff">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px; line-height:62.0455px">Named Exports</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5793296616d3b3d91001880157fe52e3">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 209px;" data-block-id="9c0457a03a839941ce8d19795986fb4c"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">module.exports.name <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>David<span style="color:rgb(198, 0, 0)">'</span></span>;
module.exports.age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">25</span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 118px; top: 377px;" data-block-id="178019faa0b192c9285850e6be784fe1"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(38, 139, 210)">var</span> name <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>David<span style="color:rgb(198, 0, 0)">'</span></span>;
<strong>export</strong> <span style="color:rgb(38, 139, 210)">var</span> age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">25</span>;​​</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="6277561e09dfaf8629ba320ccd568012">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="9ddf6b553e1eab7325840bc36aa74855"><div class="sl-block" data-block-type="text" style="width: 362px; left: 118px; top: 22px; height: auto;" data-block-id="faa7737219a78e0e7dac7c8dc2c61d88">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
<h1><span style="font-size:52.5px; line-height:62.0455px">Exporting in ES6</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="b283d8488db288207cb0964b2bc89d72">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 170px;" data-block-id="809f6a053fa5c5d645b21c667eee4456"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// math/addition.js</span>
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumTwo(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumThree(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b <span style="color:rgb(133, 153, 0)">+</span> c;
<span style="color:rgb(38, 139, 210)">}</span>
</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="302a943ebc68d8416b900c04debda895">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 472px;" data-block-id="400d044949775afd466ef7db7a56b31c"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(38, 139, 210)">{</span> sumTwo, sumThree <span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="cb489e071961ec431c0cf155da28a345"><div class="sl-block" data-block-type="text" style="width: 362px; left: 118px; top: 22px; height: auto;" data-block-id="dca32cf523bf6ed006e4af106be70146">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px; line-height:62.0455px">Exporting in ES6</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e9dc15b21ab3ed6c9ff9655146661e5b">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 226px;" data-block-id="a75a5c801c0fc5df522830a3c3b84e85"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumTwo(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b;
<span style="color:rgb(38, 139, 210)">}</span>
<strong>export</strong> <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumThree(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b <span style="color:rgb(133, 153, 0)">+</span> c;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="3e21da8ba94df579bcb0088390c11728">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 118px; top: 262px;" data-block-id="92821413e519345214e6d14f861cdc35"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-33" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="68" height="1" viewbox="-101 178 68 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-32.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-32.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 118px; top: 395px;" data-block-id="58b39e2f359e8b0c86e183584509d8c4"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-33" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="68" height="1" viewbox="-101 178 68 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-32.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-32.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="4b2aa5768c9f10f17d5bd0e92474f97f"><div class="sl-block" data-block-type="text" style="width: 554px; left: 118px; top: 22px; height: auto;" data-block-id="6390c11bee58d5656cb6dd734a83c7e8">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
<h1><span style="font-size:52.5px">Exporting default bindings</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="d14062e493e1f461acc35967187ccccd">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 379px; left: 118px; top: 146px;" data-block-id="5d095cd213697fcf82572127b01cbc52"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumTwo(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumThree(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b <span style="color:rgb(133, 153, 0)">+</span> c;
<span style="color:rgb(38, 139, 210)">}</span>
</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c2e70475477fdffb131aaafed03992cc">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 401px;" data-block-id="ac469ef89cd301cfcea8d7d338c3701b"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> api <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span>
sumTwo : sumTwo,
sumThree: sumThree
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 560px;" data-block-id="39c9f61c5a397111a25cdcfff203ed91"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> api</span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e36cab13367ff2984bef2bc721b95ee3"><div class="sl-block" data-block-type="text" style="width: 402px; left: 118px; top: 22px; height: auto;" data-block-id="60bc8781bd901399a06df01069036017">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px; line-height:62.0455px">Importing Modules</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="9ed4e304810dccf40245b196459debf7">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 379px; left: 118px; top: 146px;" data-block-id="f43b8b5a1881c52f4b77ce11c17d0353"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> _ <span style="color:rgb(133, 153, 0)">=</span> require<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>underscore<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;​</span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 379px; left: 118px; top: 225px;" data-block-id="3c2371572c894e626bdeaf93792409a2"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">import</span> _ from <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>underscore<span style="color:rgb(198, 0, 0)">'</span></span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 615px; left: 118px; top: 309px;" data-block-id="1085b8cbbc9af796f04c521be5a6ccd8"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" dir="ui" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">import</span> <span style="color:rgb(38, 139, 210)">{</span> sumTwo, sumThree <span style="color:rgb(38, 139, 210)">}</span> from <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>math/addition<span style="color:rgb(198, 0, 0)">'</span></span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 602px; left: 118px; top: 397px;" data-block-id="fe8eae989e09ca25657104d25ca6f65e"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" dir="ui" data-fragment-index="2">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">import</span> <span style="color:rgb(38, 139, 210)">{</span>
sumTwo as addTwoNumbers,
sumThree as sumThreeNumbers<span style="color:rgb(38, 139, 210)">}</span> from
<span style="color:rgb(38, 139, 210)">}</span> from <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>math/addition<span style="color:rgb(198, 0, 0)">'</span></span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 615px; left: 118px; top: 566px;" data-block-id="6b01d76ba11071396eefe211a9838bf1"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" dir="ui" data-fragment-index="3">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">import</span> <span style="color:rgb(133, 153, 0)">*</span> as util from <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>math/addition<span style="color:rgb(198, 0, 0)">'</span></span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="3549f516dfbf92373aa061a211d043eb">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 253px; top: 600px;" data-block-id="6c3b1c90100d05d3795baa9c68e23dcd"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-46.5" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="55" height="1" viewbox="-101 178 55 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-45.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-45.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 224px; top: 464px;" data-block-id="99d91fffe044d50f906769b01cbe6aac"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="90" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="191" height="1" viewbox="-101 178 191 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="90.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="90.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 253px; top: 496px;" data-block-id="4bbb44d1947c4232d374487379c471d8"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="104" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 21;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="205" height="1" viewbox="-101 178 205 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="104.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="104.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="fa9f19d32b85083d9a7fdfea43a1b949"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="b814e6d37275dd87fcce8ba52f341a42"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 274px; left: 686px; top: 331px;" data-block-id="88065e43b31927f9ba0147edcd40a06b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
<h2><span style="font-size:59.85px; line-height:70.7318px">Parameters</span></h2>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="667b1a1ee1835aea3519b70b8b729d83"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="742ba986c23ffda6430aeb986f746104"><div class="sl-block" data-block-type="text" style="width: 406px; left: 118px; top: 22px; height: auto;" data-block-id="1316dfaf4f7a97a67e4dcf8cb1e9e06c">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
<h1><span style="font-size:52.5px; line-height:62.0455px">Default Parameters</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="818200688cccb964acafb3ef50b799b8">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 146px;" data-block-id="6a95472f7d5074c6cb00adf7a6766412"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> addTwoNumbers(x, y)</span> <span style="color:rgb(38, 139, 210)">{</span>
x <span style="color:rgb(133, 153, 0)">=</span> x <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)">0</span>;
y <span style="color:rgb(133, 153, 0)">=</span> y <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)">0</span>;
<span style="color:rgb(133, 153, 0)">return</span> x <span style="color:rgb(133, 153, 0)">+</span> y;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 361px;" data-block-id="85268f498ec66763474973c5011405af"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> addTwoNumbers(x=0, y=0)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> x <span style="color:rgb(133, 153, 0)">+</span> y;
<span style="color:rgb(38, 139, 210)">}</span>
</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e6ae7cdfcde2e3c09d247d1a9866f73d">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 217px;" data-block-id="335c0668da31af546aa29461534ea262"><div class="sl-block-content fragment" data-line-x1="-111.5" data-line-y1="178" data-line-x2="-62" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="49" height="1" viewbox="-111 178 49 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-110.5" y1="178.5" x2="-61.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-110.5" y1="178.5" x2="-61.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 249px;" data-block-id="18756bdb74e18ff3bb90e8c567941f8b"><div class="sl-block-content fragment" data-line-x1="-111.5" data-line-y1="178" data-line-x2="-62" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="49" height="1" viewbox="-111 178 49 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-110.5" y1="178.5" x2="-61.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-110.5" y1="178.5" x2="-61.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 383px; top: 396px;" data-block-id="d19e541699f63dca3bd9819bbf4542b4"><div class="sl-block-content fragment" data-line-x1="-111.5" data-line-y1="178" data-line-x2="-8" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="103" height="1" viewbox="-111 178 103 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-110.5" y1="178.5" x2="-7.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-110.5" y1="178.5" x2="-7.5" y2="178.5"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 510px;" data-block-id="c7aa575a5fead3c7e54b67a3760c0ed8"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="2">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">addTwoNumbers<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)">2</span>, <span style="color:rgb(38, 145, 134)">4</span><span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 6</span>
addTwoNumbers<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)">2</span><span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 2</span>
addTwoNumbers<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 0</span></span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="7c680d0c1b13d5acf0b4e2ba62962708"><div class="sl-block" data-block-type="text" style="width: 341px; left: 118px; top: 22px; height: auto;" data-block-id="9b925ce09275c60340179f4a0394319d">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px; line-height:62.0455px">Rest Parameters</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e39ec199478ea603b6ed88b8b16b7c9d">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 118px; top: 146px;" data-block-id="8836aab5d3c0d768a99f32657633d75f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> logArguments()</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">var</span> i<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">0</span>; i <span style="color:rgb(133, 153, 0)">&lt;</span> arguments.length; i<span style="color:rgb(133, 153, 0)">++</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>arguments<span style="color:rgb(38, 139, 210)">[</span>i<span style="color:rgb(38, 139, 210)">]</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 118px; top: 366px;" data-block-id="75c1c2dd599f398c3a637d9cb2aedb0f"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> logArguments(...args)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let arg of args<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>arg<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="fd4f7b7e6470f50072d654c092dc33f6">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 381px; top: 210px;" data-block-id="5a26ce61926c8b1a638a62eccaccab82"><div class="sl-block-content" data-line-x1="1" data-line-y1="-40" data-line-x2="107" data-line-y2="-40" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="106" height="1" viewbox="1 -40 106 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="1.5" y1="-39.5" x2="107.5" y2="-39.5"></line><line stroke="#ff0000" stroke-width="3" x1="1.5" y1="-39.5" x2="107.5" y2="-39.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 375px; top: 397px;" data-block-id="7946374ab258f0409e176d1d128979db"><div class="sl-block-content fragment" data-line-x1="1" data-line-y1="-40" data-line-x2="36" data-line-y2="-40" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="35" height="1" viewbox="1 -40 35 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="1.5" y1="-39.5" x2="36.5" y2="-39.5"></line><line stroke="#ff0000" stroke-width="3" x1="1.5" y1="-39.5" x2="36.5" y2="-39.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="72f16e98df227166c16b8772156ff463"><div class="sl-block" data-block-type="text" style="width: 413px; left: 118px; top: 22px; height: auto;" data-block-id="7cb3e9b46e7d35b784b7eeafa5e66dab">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px">Named Parameters</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="ad2ae3ffb6d1c40697f819e720b14aad">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 677px; left: 118px; top: 146px;" data-block-id="6293a2c6a1330582d260315e43dde7fc"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> initializeCanvas(options)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">var</span> height <span style="color:rgb(133, 153, 0)">=</span> options.height <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)">600</span>;
<span style="color:rgb(38, 139, 210)">var</span> width <span style="color:rgb(133, 153, 0)">=</span> options.width <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)">400</span>;
<span style="color:rgb(38, 139, 210)">var</span> lineStroke <span style="color:rgb(133, 153, 0)">=</span> options.lineStroke <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>black<span style="color:rgb(198, 0, 0)">'</span></span>;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 797px; left: 118px; top: 367px;" data-block-id="4374ab71b5301e177a030d9632477cc0"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="2">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span> initializeCanvas<span style="color:rgb(147, 161, 161)">(</span>
<span style="color:rgb(38, 139, 210)">{</span> height<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">600</span>, width<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">400</span>, lineStroke<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>black<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
...
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="574e09364c8512741eb13ada3894901c">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 320px; top: 216px;" data-block-id="84d41d305a52ed5b2dd47870624b8335"><div class="sl-block-content fragment" data-line-x1="-17" data-line-y1="153" data-line-x2="223" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="240" height="1" viewbox="-17 153 240 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-16.5" y1="153.5" x2="223.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-16.5" y1="153.5" x2="223.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 422px; top: 179px;" data-block-id="bde718b9f0f2712b80cc14f5eff938d8"><div class="sl-block-content fragment" data-line-x1="-17" data-line-y1="153" data-line-x2="67" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="84" height="1" viewbox="-17 153 84 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-16.5" y1="153.5" x2="67.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-16.5" y1="153.5" x2="67.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 170px; top: 434px;" data-block-id="fddfbc076089f06b7f5fda09ec0bad06"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="474" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="511" height="1" viewbox="-37 153 511 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="474.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="474.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 688px; left: 112px; top: 532px;" data-block-id="5f6c962aad43e7813286276df5f29d79"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="4">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span> initializeCanvas<span style="color:rgb(147, 161, 161)">(</span>
<span style="color:rgb(38, 139, 210)">{</span> height<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">600</span>, width<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">400</span>, lineStroke<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>black<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">}</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
...
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 184px; top: 600px;" data-block-id="9b1c8b7244c1b96f1a2db2df54748c3b"><div class="sl-block-content fragment" data-line-x1="-38" data-line-y1="152.5" data-line-x2="509" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="5"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="547" height="1" viewbox="-38 153 547 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-37.5" y1="153.5" x2="509.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-37.5" y1="153.5" x2="509.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="40f0e4ff125717911f8e36ca1ae4c55a"><div class="sl-block" data-block-type="text" style="width: 381px; left: 118px; top: 22px; height: auto;" data-block-id="f170cbcd578fc4f51b82e0f933f1df43">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
<h1><span style="font-size:52.5px; line-height:62.0455px">Spread Operator</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="255e9a075a5b6b266b5f25fad3b0bfa1">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 502px; left: 130px; top: 246px;" data-block-id="6b2e003ded4c8d8acda1c3b99faf4790"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">Math</span>.<span style="color:rgb(38, 139, 210)">max</span><span style="color:rgb(147, 161, 161)">(</span>...<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(133, 153, 0)">-</span><span style="color:rgb(38, 145, 134)">1</span>, <span style="color:rgb(38, 145, 134)">100</span>, <span style="color:rgb(38, 145, 134)">9001</span>, <span style="color:rgb(133, 153, 0)">-</span><span style="color:rgb(38, 145, 134)">32</span><span style="color:rgb(38, 139, 210)">]</span><span style="color:rgb(147, 161, 161)">) </span></span><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// 9001</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 130px; top: 353px;" data-block-id="1355cb4ae47c0f1614221b3189e01722"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> arr <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">1</span>, ...<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">2</span>,<span style="color:rgb(38, 145, 134)">3</span><span style="color:rgb(38, 139, 210)">]</span>, <span style="color:rgb(38, 145, 134)">4</span><span style="color:rgb(38, 139, 210)">]</span>;
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>arr<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// [1, 2, 3, 4]</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="6905ca6e7c70755fd3f90e6749dc0d2e">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 280px;" data-block-id="069bac81e2acec21731402bf24c92ec8"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="140" data-line-x2="259" data-line-y2="140" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="259" height="1" viewbox="0 140 259 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="140.5" x2="259.5" y2="140.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="140.5" x2="259.5" y2="140.5"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 130px; top: 484px;" data-block-id="7984c946a4dae7df1599757122f14b9a"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="2">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> arr1 <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">0</span>, <span style="color:rgb(38, 145, 134)">1</span>, <span style="color:rgb(38, 145, 134)">2</span><span style="color:rgb(38, 139, 210)">]</span>;
<span style="color:rgb(38, 139, 210)">var</span> arr2 <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">3</span>, <span style="color:rgb(38, 145, 134)">4</span>, <span style="color:rgb(38, 145, 134)">5</span><span style="color:rgb(38, 139, 210)">]</span>;
arr1.<span style="color:rgb(38, 139, 210)">push</span><span style="color:rgb(147, 161, 161)">(</span>...arr2<span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="decd61193ef8bda98c523f892a9d5404"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="353c948c960cc058683ad5fb8116dc01"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 184px; left: 776px; top: 331px;" data-block-id="794994e6ac736a5561484c164028118a"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
<h2><span style="font-size:59.85px; line-height:70.7318px">Classes</span></h2>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="c7520ddce7464587575362ec5d944e99"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="35b296831c51243b2b0b71c4dc0e6d54"><div class="sl-block" data-block-type="text" style="width: 264px; left: 118px; top: 22px; height: auto;" data-block-id="3de36ee69733df5311007e90b7844e81">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1><span style="font-size:52.5px; line-height:62.0455px">Base Classes</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8a569b57b61360eb84366593dbcbd7a9">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 120px; top: 210px;" data-block-id="2ff7d1fbeac69315b6c11fa262cc139b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name, age, gender)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
<span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">=</span> age;
<span style="color:rgb(38, 139, 210)">this</span>.gender <span style="color:rgb(133, 153, 0)">=</span> gender;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">incrementAge</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>) <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
<span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="07227bafd57417dfd55db2ed5e339c39">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 118px; top: 447px;" data-block-id="b00f4fc4287765634679ba50dde827af"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="200" data-line-x2="341" data-line-y2="200" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="341" height="1" viewbox="0 200 341 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 224px; top: 241px;" data-block-id="3af12e376a714212130b693d9b98c5a6"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="37" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="74" height="1" viewbox="-37 153 74 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="37.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="37.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="4cb2019122dac5f34c711f1741df0d13"><div class="sl-block" data-block-type="text" style="width: 373px; left: 118px; top: 22px; height: auto;" data-block-id="451b5d97f7296aec223fd9af26dc4a9b">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Extended Classes</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="915c0f7ca210dfe0e46a7776de0ab2d0">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 740px; left: 120px; top: 210px;" data-block-id="9efb1abae33010690571142fa1614977"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Personal(name, age, gender, occupation, hobby)</span> <span style="color:rgb(38, 139, 210)">{</span>
Person.<span style="color:rgb(38, 139, 210)">call</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span>, name, age, gender<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">this</span>.occupation <span style="color:rgb(133, 153, 0)">=</span> occupation;
<span style="color:rgb(38, 139, 210)">this</span>.hobby <span style="color:rgb(133, 153, 0)">=</span> hobby;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">Personal</span>.prototype <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">Object</span>.create<span style="color:rgb(147, 161, 161)">(</span>Person.prototype<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(133, 153, 0)">Personal</span>.prototype.constructor <span style="color:rgb(133, 153, 0)">=</span> </span>Personal;
<span style="color:rgb(133, 153, 0)">Personal</span>.prototype.<span style="color:rgb(165, 120, 0)">incrementAge</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>) <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> Person.prototype.incrementAge.<span style="color:rgb(38, 139, 210)">call</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="2163a5cd07dfab3c64e766ddad17cdb0">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 118px; top: 447px;" data-block-id="da260d7efba2d317b2149f7efaaba888"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="200" data-line-x2="341" data-line-y2="200" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="341" height="1" viewbox="0 200 341 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 224px; top: 241px;" data-block-id="8b3a13d56ea381730fc242fc1b7ae1f5"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="59" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="96" height="1" viewbox="-37 153 96 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="59.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="59.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 168px; top: 279px;" data-block-id="f178cac1ac21c996ad4e3a412b4c2194"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="378" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="415" height="1" viewbox="-37 153 415 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="378.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="378.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 118px; top: 479px;" data-block-id="d859d39919ba823eada92db9233ba6f4"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="325" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="362" height="1" viewbox="-37 153 362 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="325.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="325.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 120px; top: 515px;" data-block-id="f03f104d47091e2e6129e7dd2e2e3243"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="333" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="370" height="1" viewbox="-37 153 370 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="333.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="333.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 168px; top: 544px;" data-block-id="91979d86c15bba41110156354a8f2c8f"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="571" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="5"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="608" height="1" viewbox="-37 153 608 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="571.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="571.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="df1758a4043fe8cf005e9411ca8d9ee2"><div class="sl-block" data-block-type="text" style="width: 442px; left: 118px; top: 22px; height: auto;" data-block-id="8f0b6a1947bb982c726dd6d87946c37a">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
<h1 style="text-align: left;"><span style="font-size:52.5px">Base Classes in ES6</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="44eb83bba94a5103bd1812bb494e161f">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 120px; top: 146px;" data-block-id="7b7e49b44db28661d984071ec2ec6295"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">class</span> Person <span style="color:rgb(38, 139, 210)">{</span>
constructor<span style="color:rgb(147, 161, 161)">(</span>name, age, gender<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
<span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">=</span> age;
<span style="color:rgb(38, 139, 210)">this</span>.gender <span style="color:rgb(133, 153, 0)">=</span> gender;
<span style="color:rgb(38, 139, 210)">}</span>
incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="a317f2589cf00232a4f2a02b6d995576">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 169px; top: 217px;" data-block-id="7e39f0fa1783eeefbc179d10a789bdfe"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="200" data-line-x2="341" data-line-y2="200" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="341" height="1" viewbox="0 200 341 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 188px; top: 180px;" data-block-id="6a4f4ce02fa37c709a74373f8f14fd73"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="37" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="74" height="1" viewbox="-37 153 74 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="37.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="37.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="d6a5a07f28dbb64e95f784c6236882ff"><div class="sl-block" data-block-type="text" style="width: 522px; left: 118px; top: 22px; height: auto;" data-block-id="096038bc3a3019617aa5b95cbb6c676a">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
<h1><span style="font-size:52.5px">Extended Classes in ES6</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="a83b5dab89e2623c77acb1fd5152e127">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 732px; left: 118px; top: 140px;" data-block-id="60a73c1817c4359e705102ae8ced82c1"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">class</span> Personal <strong>extends</strong> Person <span style="color:rgb(38, 139, 210)">{</span>
constructor<span style="color:rgb(147, 161, 161)">(</span>name, age, gender, occupation, hobby<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">super</span><span style="color:rgb(147, 161, 161)">(</span>name, age, gender<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">this</span>.occupation <span style="color:rgb(133, 153, 0)">=</span> occupation;
<span style="color:rgb(38, 139, 210)">this</span>.hobby <span style="color:rgb(133, 153, 0)">=</span> hobby;
<span style="color:rgb(38, 139, 210)">}</span>
incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">super</span>.incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">20</span>;
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span>.age<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8edf52ba0e7240a263623efacf4beed6">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 304px; top: 174px;" data-block-id="f0f1ec2776e269ee965716920cd7636a"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="41" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="78" height="1" viewbox="-37 153 78 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="41.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="41.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 173px; top: 210px;" data-block-id="82ccd065493b760a5860a54a385cbc02"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="530" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="567" height="1" viewbox="-37 153 567 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="530.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="530.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 195px; top: 242px;" data-block-id="0a5d717a2c4c112d8da2669f9856fabc"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="240" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="277" height="1" viewbox="-37 153 277 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="240.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="240.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 195px; top: 446px;" data-block-id="fbdf66ee4160442f0f11e6e3b3963863"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="224.5" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="262" height="1" viewbox="-37 153 262 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="222.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="222.5" y2="153.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(222,153) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 354px; left: 463px; top: 429px;" data-block-id="20f4b6d97075ec99625c49e3fc02a484"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="3">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Calls parent incrementAge()</span></span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ccf141e3b60946886bdffaa80a0efca9" data-background-size="initial"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="8f97b3211f9153e063da14e881a5f809"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 207px; left: 753px; top: 331px;" data-block-id="ce47aa9ac8ed6408ce8e42666a5c1648"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11; font-size: 150%;">
<h2><span style="font-size:59.85px; line-height:70.7318px">Symbols</span></h2>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="d108fd0713501897044f8de499999b77"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="1ef9229ba2bee61b23904ebe59f48dff"><div class="sl-block" data-block-type="text" style="width: 458px; left: 118px; top: 22px; height: auto;" data-block-id="f0edfd20de81a1d5bade2768bc19d5ee">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Unique Property Keys</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8ab2ccf4c72dfeff697966ace538dc9d">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 732px; left: 118px; top: 218px;" data-block-id="6232e474f5b70c8d9171095ff1131af1"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> key <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
<strong>const</strong> keyTwo <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
<strong>const</strong> object <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span>;
</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="a826ad44f0335db95dadbef334f9bb35">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 229px; left: 118px; top: 470px;" data-block-id="bf02de438cda09b3ea2d0f4e59e3a13e"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="2">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">&gt;</span><span style="color:rgb(133, 153, 0)">&gt;</span> key <span style="color:rgb(133, 153, 0)">===</span> keyTwo
<span style="color:rgb(133, 153, 0)">&gt;</span><span style="color:rgb(133, 153, 0)">&gt;</span> <span style="color:rgb(181, 137, 0)">false</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 353px;" data-block-id="1fc0f66d1d33d4d7b4f774fd97c6f998"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="1">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">object.key <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Such magic.<span style="color:rgb(198, 0, 0)">'</span></span>;
object.keyTwo <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Much Uniqueness<span style="color:rgb(198, 0, 0)">'</span></span></span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0baa0fd34908a37b007f1ebc2903c6b8"><div class="sl-block" data-block-type="text" style="width: 449px; left: 118px; top: 22px; height: auto;" data-block-id="e0ea89a7d9840efabaf02f1dbe3a3ca9">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Symbols as Concepts</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="d4e4e0b8323eb34952a06190e38c288d">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 732px; left: 118px; top: 210px;" data-block-id="7d6fa894eb115bd70adc4f658ec3c5c1"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> anakin <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>jedi<span style="color:rgb(198, 0, 0)">'</span></span>;
<strong>const</strong> yoda <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>jedi master<span style="color:rgb(198, 0, 0)">'</span></span>;
<strong>const</strong> luke <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>jedi<span style="color:rgb(198, 0, 0)">'</span></span>;
</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="dfd1be4ac953f2b272acbdec8815ac6b">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 389px;" data-block-id="6cca2c18e19fefa715d97bf6a0648d1f"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="0">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> anakin <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
<strong>const</strong> yoda <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
<strong>const</strong> luke <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="4235a2dfef93c89a75c955f31e90dab8"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="ad407f71865515aebe851634994d6a38"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 160px; left: 800px; top: 331px;" data-block-id="b0f1cb1c1b6d07ea300ed20eeb8c1d9e"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
<h2><span style="font-size:59.85px">Maps</span></h2>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="99db6d6967c06168ad9b6f25ace6c7da"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0ceeaa82fe25b36bda01fab38bcd5867"><div class="sl-block" data-block-type="text" style="width: 449px; left: 118px; top: 22px; height: auto;" data-block-id="d9c8b50b60df619b7a597d11cb643316">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">(Hash) Maps in ES5</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="54770c44484b2a94f4a35b525d622216">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="dec73e2fc565b0bdaf6f4a8ee3bf2d91">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 288px;" data-block-id="51e41c4591a593fefd4daa02f6c8e521"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">var <span style="color:rgb(38, 139, 210)">map</span> <span style="color:rgb(133, 153, 0)">=</span> new <span style="color:rgb(203, 75, 22)">Object</span><span style="color:rgb(181, 137, 0)">()</span>;
<span style="color:rgb(38, 139, 210)">map</span>[key1] <span style="color:rgb(133, 153, 0)">=</span> 'value1';
<span style="color:rgb(38, 139, 210)">map</span>[key2] <span style="color:rgb(133, 153, 0)">=</span> 'value2';</span></pre>
</div></div></section><section data-id="9a136c1f758609296791fc71c0c0c236"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="b6e2d3e83ef7b2d50d186e44ea70056b"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
<h1>Seems functional, right...?</h1>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="c07b069e15c1340c644a97abc4792730"><div class="sl-block" data-block-type="text" style="width: 428px; left: 118px; top: 22px; height: auto;" data-block-id="e2d215f47f725773919a6ba5aaca054d">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Get Own Properties</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="1d015e2e673a5804dd58fb979ca207cf">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5a9661fefefa49b1d3a8a8da654ef8c5">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 779px; left: 118px; top: 264px;" data-block-id="5b0292c290b4b638ff2cf8141295423d"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>function</strong> <span style="color:rgb(38, 139, 210)">getOwnProperty</span>(object, propertyKey) {
<span style="color:rgb(133, 153, 0)">return</span> (object.hasOwnProperty(propertyKey) ? object[propertyKey]<span style="color:rgb(133, 153, 0)">: </span>undefined);
}</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 341px; top: 331px;" data-block-id="edef2e40b17704660edfe6d14075a6c6"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="129.5" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="167" height="1" viewbox="-37 153 167 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="130.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="130.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 228px; top: 298px;" data-block-id="e85f9fd00fbff79770be188e4de85674"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-59" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="161" height="1" viewbox="-220 36 161 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-58.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-58.5" y2="36.5"></line></svg></div></div></section><section data-id="4863b24c43b088ed51df216d39e68f83"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="dbbbb2ab90959f30b1cc64b2cdcba408"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
<h1>We should be safe...right?</h1>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="36479d5b37d781ffaaf0e47773ddc5f7">
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="9a886018597d79118f9dabc4ece21245">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="88891355ae4cac3df22275905c8b70fc">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 810px; left: 114px; top: 133px;" data-block-id="2480e0975015bd46fa34bf01b4a00039"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">&gt; </span>getOwnProperty({ hasOwnProperty<span style="color:rgb(133, 153, 0)">: </span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Hah, overwritten<span style="color:rgb(198, 0, 0)">'</span></span>}, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Pwned<span style="color:rgb(198, 0, 0)">'</span></span>);
<span style="color:rgb(133, 153, 0)">&gt; </span>TypeError<span style="color:rgb(133, 153, 0)">: </span>Propery <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>hasOwnProperty<span style="color:rgb(198, 0, 0)">'</span></span> is <span style="color:rgb(133, 153, 0)">not</span> a <strong>function</strong></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 329px; top: 167px;" data-block-id="89128f2bdbeb5418fd3a88a9771bb56d"><div class="sl-block-content fragment" data-line-x1="-28" data-line-y1="152.5" data-line-x2="153" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="181" height="1" viewbox="-28 153 181 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-27.5" y1="153.5" x2="153.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-27.5" y1="153.5" x2="153.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 602px; height: 328.278px; left: 218px; top: 280px;" data-block-id="806c16b45b4512dfe3863536cee9281b"><div class="sl-block-content fragment" style="z-index: 15;" data-fragment-index="2"><img data-natural-width="640" data-natural-height="349" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2153956/Nooo-Meme-Darth-Vader-04.jpg"></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 139px; top: 200px;" data-block-id="f6d8c4ca6fc3f1c34ee7ded008de40e7"><div class="sl-block-content fragment" data-line-x1="-250" data-line-y1="90" data-line-x2="367" data-line-y2="90" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="4px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="617" height="1" viewbox="-250 90 617 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-250" y1="90" x2="367" y2="90"></line><line stroke="#ff0000" stroke-width="4" x1="-250" y1="90" x2="367" y2="90"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 386px; left: 574px; top: 662px;" data-block-id="9a90585d15dd0687f0df78dffc2dbf2b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;">
<p style="text-align: left;"><span style="font-size:0.5em">Credit: http://memesvault.com/nooo-meme-darth-vader/</span></p>
</div></div></section><section data-id="4b0722247b70f8941b51f08ee8da187b"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="1a5f7a3e8206290ff2e8eb6b09253806"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
<h1>Second time is the charm.</h1>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="5daa72a4ff3fd3cea4c2285bb3bc22fd">
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="01e85bc94044d4ac2d8e1ff07b6a89c6">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e25d3c4353997ea5d4b299c75c3ffe67">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 779px; left: 118px; top: 264px;" data-block-id="bc10db4c3388552cf9e5ee05c307f8be"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>function</strong> <span style="color:rgb(38, 139, 210)">getOwnProperty</span>(object, propertyKey) {
<span style="color:rgb(133, 153, 0)">return</span> (Object.prototype.hasOwnProperty(object, propertyKey) ? object[propertyKey]<span style="color:rgb(133, 153, 0)">: </span>undefined);
}</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 260px; top: 332px;" data-block-id="ddf695e11f7eca449215508ff0d5ad5b"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="325" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="362" height="1" viewbox="-37 153 362 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="325.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="325.5" y2="153.5"></line></svg></div></div></section><section data-id="82cc868f866484de1c140b9cbbe52259"><div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 277px; height: 277px; left: 320px; top: 214px;" data-block-id="53a0563b8b355ed1c973ab3fb2cd90c8"><div class="sl-block-content" style="z-index: 11;"><img data-natural-width="363" data-natural-height="363" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2149583/Pusheen24.png"></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 360px; top: 653px;" data-block-id="e5af66985e3fbcbd47e24ebf197d2bab"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<p><span style="font-size:0.7em">credit: http://deloiz.blogspot.com/2014/01/Pusheen.html</span></p>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="a3610f815cdedd505ebb11ed0e201caf"><div class="sl-block" data-block-type="text" style="width: 282px; left: 118px; top: 22px; height: auto;" data-block-id="59fc21b2ad9904503d747814950fa530">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Maps in ES6</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8774af0928b47f61a55df8018d57107c">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e011e358ce027c479e53bbe6351065c5">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 779px; left: 118px; top: 280px;" data-block-id="e55b072a15ebd76a93fdb81b59691e4f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let map <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">new</span> Map();
&gt; map.<span style="color:rgb(38, 139, 210)">set</span>(<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>name<span style="color:rgb(198, 0, 0)">'</span></span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>david<span style="color:rgb(198, 0, 0)">'</span></span>);
&gt; map.<span style="color:rgb(38, 139, 210)">get</span>(<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>name<span style="color:rgb(198, 0, 0)">'</span></span>); <span style="color:rgb(147, 161, 161)">// david</span>
&gt; map.has(<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>name<span style="color:rgb(198, 0, 0)">'</span></span>); <span style="color:rgb(147, 161, 161)">// true</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 234px; top: 316px;" data-block-id="ad5e132ff0a15fd3de00564fd8aab75c"><div class="sl-block-content fragment" data-line-x1="-32" data-line-y1="152.5" data-line-x2="65" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="97" height="1" viewbox="-32 153 97 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-31.5" y1="153.5" x2="65.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-31.5" y1="153.5" x2="65.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 189px; top: 347px;" data-block-id="8a8228242c3b31f92849dc3ee6ae5277"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="12" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="34" height="1" viewbox="-22 153 34 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 347px;" data-block-id="1de070cc0c0e33ac9b6d05868c83cb31"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="31" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="68" height="1" viewbox="-37 153 68 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="31.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="31.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 338px; top: 347px;" data-block-id="5f3d757bb3430f5f74bac468a47154f4"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="41" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="78" height="1" viewbox="-37 153 78 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="41.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="41.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 308px; top: 210px;" data-block-id="dcdf7365e74663e037933c7509bc1b03"><div class="sl-block-content fragment" data-line-x1="-33" data-line-y1="325.5" data-line-x2="75" data-line-y2="189" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 19;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="108" height="137" viewbox="-33 189 108 137"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-32.5" y1="326.5" x2="74.5" y2="191.5"></line><line stroke="#ff0000" stroke-width="3" x1="-32.5" y1="326.5" x2="74.5" y2="191.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(74,191) rotate(38.351)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 85.5px; left: 422px; top: 193px;" data-block-id="f4560b3ff8cc181a9c34cdf1c2cef3e1"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 20;" data-fragment-index="2">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// key</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 415px; top: 265px;" data-block-id="a9c3afa850313a7fa491769e5db2490f"><div class="sl-block-content fragment" data-line-x1="-33" data-line-y1="325.5" data-line-x2="111" data-line-y2="243" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 21;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="144" height="83" viewbox="-33 243 144 83"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-32.5" y1="326.5" x2="109.5" y2="244.5"></line><line stroke="#ff0000" stroke-width="3" x1="-32.5" y1="326.5" x2="109.5" y2="244.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(109,244) rotate(60.191)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 98px; left: 568px; top: 248px;" data-block-id="0cf03992c61a75ef36b93bb49028eee3"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 22;" data-fragment-index="3">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// value</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 189px; top: 382px;" data-block-id="545302408df1fbbf65c7329e639dcfd9"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="12" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 23;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="34" height="1" viewbox="-22 153 34 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 189px; top: 415px;" data-block-id="864bdf6f93e03eba1f2239ba7cd6f652"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="12" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 24;" data-line-width="3px" data-fragment-index="5"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="34" height="1" viewbox="-22 153 34 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line></svg></div></div></section><section data-id="7984b895283f856f147096406830fcff"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 302px; height: auto;" data-block-id="0207ecc62fa95f5d7e65699921499284"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
<h1><span style="font-size:0.7em">Keys can be more than strings!</span></h1>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e6690e1f515240cc9eac0c46251f6826"><div class="sl-block" data-block-type="text" style="width: 522px; left: 118px; top: 22px; height: auto;" data-block-id="7bd58a5abfb4ab42a755347f433f5686">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Arbitrary values as keys</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="89f190c706295df75853e42759508fec">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="45520b715f1ae208e2532e4acc9b7cc4">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 779px; left: 118px; top: 210px;" data-block-id="d58b2c7d4754290b9f8c77cd41bf5c88"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let map <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">new</span> Map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">[</span>
<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>name<span style="color:rgb(198, 0, 0)">'</span></span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>david<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>,
<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(181, 137, 0)">true</span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>false<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>,
<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">1</span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>one<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>,
<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>object<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>,
<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>function<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>
<span style="color:rgb(38, 139, 210)">]</span><span style="color:rgb(147, 161, 161)">)</span>;
</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 184px; top: 280px;" data-block-id="59876d45edf97f802bb8852e8e4757fe"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="34" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="56" height="1" viewbox="-22 153 56 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="34.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="34.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 174px; top: 313px;" data-block-id="91ade1bf136ff63d6c8e09e20140e9e8"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="34" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="56" height="1" viewbox="-22 153 56 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="34.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="34.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 174px; top: 343px;" data-block-id="3dd1d67270b8fe6df2a201f7b166a1ea"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="-2" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="20" height="1" viewbox="-22 153 20 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="-1.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="-1.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 174px; top: 378px;" data-block-id="0a3b1608906a9e5e62497a1962ae625c"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="6" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="28" height="1" viewbox="-22 153 28 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="6.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="6.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 174px; top: 412px;" data-block-id="abd21c5006fc42c1f48a5530ae46b10e"><div class="sl-block-content fragment" data-line-x1="-32" data-line-y1="153" data-line-x2="131" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="163" height="1" viewbox="-32 153 163 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-31.5" y1="153.5" x2="131.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-31.5" y1="153.5" x2="131.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 484px;" data-block-id="819f7893bddfc2e37fd90bac47c6fbf9"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 20;" data-fragment-index="5">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let key of map.keys<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(133, 153, 0)">typeof</span> key<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(147, 161, 161)">// &gt; string, boolean, number, object, function</span>
<span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="c345c792fcbd8caf453a3007b6ae8b1b"><div class="sl-block" data-block-type="text" style="width: 226px; left: 112px; top: 22px; height: auto;" data-block-id="b76fd8468cfa4371c18d6ea7e68d8883">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1><span style="font-size:52.5px">.entries( )</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="1d016ce2c53f995628365635d60f1c56">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="f0526ffaf551b8c8a0dce7c2271442ee">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 779px; left: 118px; top: 210px;" data-block-id="d30905ab1568ee31f0c0dc48c17e6d3a"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let entry of map.entries<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>entry<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">0</span><span style="color:rgb(38, 139, 210)">]</span>, entry<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">1</span><span style="color:rgb(38, 139, 210)">]</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 112px; top: 428px;" data-block-id="6bd2ffe1d47f7e6d4316cf6ae183f508"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let <span style="color:rgb(38, 139, 210)">[</span>key, value<span style="color:rgb(38, 139, 210)">]</span> of map.entries<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>key, value<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 328px; top: 243px;" data-block-id="64fd1ffa0f0c009fe401f9cf567e831b"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="128" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="152" height="1" viewbox="-24 153 152 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="128.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="128.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 225px; top: 462px;" data-block-id="a0b5e2d4a25a366a94a56e597def2138"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="109" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="133" height="1" viewbox="-24 153 133 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="109.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="109.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="8bf898044658277400af9c963d4339bb"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="76be9618cbb89773474632a0f840421b"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 289px; left: 671px; top: 331px;" data-block-id="228c42facb57850fa79bdb9ebecba4c8"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
<h2><span style="font-size:59.85px; line-height:70.7318px">WeakMaps</span></h2>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="9bfb151c29ef61af97ff7bfae798fbdb"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0ab69aed36b61605f78a77d812d6e7b8"><div class="sl-block" data-block-type="text" style="width: 226px; left: 112px; top: 22px; height: auto;" data-block-id="f215b7a88ac9b5c42feefbf8a427031b">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Classes 101</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="66b229e02ec2b51ab75860b6998b1d81">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="13cc59629bf24af23bae5ce61295a393">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 302px; left: 112px; top: 199px;" data-block-id="fecac93156712d19535e94005ad998e0"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">class</span> Person <span style="color:rgb(38, 139, 210)">{</span>
constructor<span style="color:rgb(147, 161, 161)">(</span>age<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">=</span> age;
<span style="color:rgb(38, 139, 210)">}</span>
incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div></section><section data-id="90176b1438c8aa694cd3b86f62bc786a"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="6d6db0b733eb8fa87a80af11656c4869"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
<h1>Private data?</h1>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="aae28de5d74421def58d1a3f9b895863"><div class="sl-block" data-block-type="text" style="width: 448px; left: 106px; top: 22px; height: auto;" data-block-id="b230c4abbb7dd72d8f1e5e16ec0f3dd3">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1><span style="font-size:52.5px">Naming Conventions</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="1a531a31c9096ef4dda4aef1bfb32772">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="f39c4b516989748a69ddd3af8fa86370">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 302px; left: 112px; top: 199px;" data-block-id="48c54ca38fd241597c9216fcd69ff35f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">class</span> Person <span style="color:rgb(38, 139, 210)">{</span>
constructor<span style="color:rgb(147, 161, 161)">(</span>age<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">this</span>._age <span style="color:rgb(133, 153, 0)">=</span> age;
<span style="color:rgb(38, 139, 210)">}</span>
_incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">this</span>._age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 263px; top: 301px;" data-block-id="12584f4890a7782e71cb06eb45f44435"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="19" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="43" height="1" viewbox="-24 153 43 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="19.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="19.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 406px;" data-block-id="40248a5c503e1fd58f490f7109550d10"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="145.5" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="170" height="1" viewbox="-24 153 170 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="146.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="146.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 227px; top: 439px;" data-block-id="276931233d0334a3f3ad85eb9c505575"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="12" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="36" height="1" viewbox="-24 153 36 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="12.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="12.5" y2="153.5"></line></svg></div></div></section><section data-id="36f11c2f80ed0e2646321fdf0c9c1b82"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 239px; height: auto;" data-block-id="e019c470688dd035e585954f92f22fae"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
<h1>WeakMaps to the rescue!</h1>
</div></div>
<div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 336px; height: auto;" data-block-id="f287b76e58dcf575a44dbe83d1288192"><div class="sl-block-content fragment" data-placeholder-tag="h2" data-placeholder-text="Subtitle" data-fragment-index="0">
<h2>(Maybe they're not so weak)</h2>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="dc6ce8638372afae4bbc0b695963ec20"><div class="sl-block" data-block-type="text" style="width: 550px; left: 90px; top: 33px; height: auto;" data-block-id="a620f5e90e4e8777bcd501058047393c">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h2>WeakMaps for Privacy</h2>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0d61f388e0131c3a93d1773e58c48bf2">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="db3309193239efdadcedff4cda71dd96">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 501px; left: 106px; top: 115px;" data-block-id="99f4b17823149357fed6b08feca54d51"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let _age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">new</span> WeakMap<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">class</span> Person <span style="color:rgb(38, 139, 210)">{</span>
constructor<span style="color:rgb(147, 161, 161)">(</span>age<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
_age.set<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span>, age<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span>
incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
let age <span style="color:rgb(133, 153, 0)">=</span> _age.get<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(133, 153, 0)">if</span><span style="color:rgb(147, 161, 161)">(</span>age <span style="color:rgb(133, 153, 0)">&gt;</span> <span style="color:rgb(38, 145, 134)">90</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Midlife crisis<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 520px; left: 106px; top: 573px;" data-block-id="5f93e9928fcabf35a095fcc866917f79"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="3">
<pre style="font-size: 0.9333em;"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">&gt;</span><font color="#586e75"> </font><strong style="color:rgb(88, 110, 117)">const</strong><font color="#586e75"> person </font><span style="color:rgb(133, 153, 0)">=</span><font color="#586e75"> </font><span style="color:rgb(133, 153, 0)">new</span><font color="#586e75"> Person</font><span style="color:rgb(147, 161, 161)">(</span><font color="#269186">90</font><span style="color:rgb(147, 161, 161)">)</span><font color="#586e75">;
</font><span style="color:rgb(133, 153, 0)">&gt;</span><font color="#586e75"> person.incrementAge</font><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><font color="#586e75">; </font><span style="color:rgb(147, 161, 161)">// 'Midlife crisis'</span><font color="#586e75">
</font><span style="color:rgb(133, 153, 0)">&gt;</span><font color="#586e75"> Reflect.ownKeys</font><span style="color:rgb(147, 161, 161)">(</span><font color="#586e75">person</font><span style="color:rgb(147, 161, 161)">)</span><font color="#586e75">; </font><span style="color:rgb(147, 161, 161)">// []</span><font color="#586e75">
</font></span></pre>
<p> </p>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 106px; top: 150px;" data-block-id="d3d3023cbf7e6096a924c46bfdf87f05"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="258" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="282" height="1" viewbox="-24 153 282 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="258.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="258.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 149px; top: 251px;" data-block-id="44a0851ec3d05fe8d759f4fe84d9b55b"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="206" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="230" height="1" viewbox="-24 153 230 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="206.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="206.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 264px; top: 386px;" data-block-id="f181064569ce5968cde90fb41f2aac1f"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="143" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="167" height="1" viewbox="-24 153 167 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="143.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="143.5" y2="153.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 129px; top: 674px;" data-block-id="5f4c9e10bd111a7328d999034c5f61d1"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="327" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="351" height="1" viewbox="-24 153 351 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="327.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="327.5" y2="153.5"></line></svg></div></div></section><section><div class="sl-block" data-block-type="image" style="width: 700px; height: 467.6px; left: 130px; top: 117px;" data-block-id="fff04cfbea9fe8e464e9875072444225"><div class="sl-block-content" style="z-index: 10;"><img data-natural-width="500" data-natural-height="334" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157571/pinky-promise_2.jpg"></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 516px; left: 434px; top: 656px;" data-block-id="c5dc7de484a64c8d66204e097ffc7403"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre><span style="font-size:0.5em">credit: http://wildermuth.com/images/pinky-promise_2.jpg</span></pre>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="56d4df842023ceb5e85ed9fcf8e72443"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="d96d0eec4ade2b26203915f731c65017"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 207px; left: 743px; top: 330px;" data-block-id="d0d4b6f2810cbea8a2d352970a27da88"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
<h2><span style="font-size:59.85px; line-height:70.7318px">Promises</span></h2>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="d6a8ad09a5d37b5cb589944348b1ba34"><div class="sl-block" data-block-type="text" style="width: 280px; left: 120px; top: 22px; height: auto;" data-block-id="9b4a0f94ca7b709f3c89f98dd2ee58bf">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Callback Hell</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="50d8786f91fa53b84f5a6b6e1c371f0f">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 120px; top: 170px;" data-block-id="248ea089572a340fa673a33296ce5a98"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">func1<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>value1)</span> <span style="color:rgb(38, 139, 210)">{</span>
func2<span style="color:rgb(147, 161, 161)">(</span>value1, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>value2<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
func3<span style="color:rgb(147, 161, 161)">(</span>value2, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>value3<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
func4<span style="color:rgb(147, 161, 161)">(</span>value3, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>value4<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
func5<span style="color:rgb(147, 161, 161)">(</span>value4, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>value5<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(147, 161, 161)">// Do something with value 5</span>
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="153ea4566ecc11f6663c610d66b98385">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 119px; top: 203px;" data-block-id="703b9ed482ee098b3f4f0611071c414f"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-111.5" data-line-y2="188" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="109" height="152" viewbox="-220 36 109 152"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-110.5" y2="188.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-110.5" y2="188.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 120px; top: 355px;" data-block-id="8f3c858fd67d59e4694a2e7c5cd79b7d"><div class="sl-block-content fragment" data-line-x1="-198" data-line-y1="217" data-line-x2="-90.5" data-line-y2="72" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="108" height="145" viewbox="-198 72 108 145"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-197.5" y1="217.5" x2="-89.5" y2="72.5"></line><line stroke="#ff0000" stroke-width="3" x1="-197.5" y1="217.5" x2="-89.5" y2="72.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 120px; top: 203px;" data-block-id="c01163cee3cee3bc64c408d75e092e98"><div class="sl-block-content fragment" data-line-x1="-234" data-line-y1="21" data-line-x2="-234" data-line-y2="318" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="297" viewbox="-234 21 1 297"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-233.5" y1="21.5" x2="-233.5" y2="318.5"></line><line stroke="#ff0000" stroke-width="3" x1="-233.5" y1="21.5" x2="-233.5" y2="318.5"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 35.5px; left: 138px; top: 268px;" data-block-id="61cdd5920981aa93055dbfb4545173f2"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18; color: rgb(255, 0, 0);" data-fragment-index="1">
<p style="text-align:left">D</p>
<p style="text-align:left">O</p>
<p style="text-align:left">O</p>
<p style="text-align:left">M</p>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e797fb591fb91cdf81abb90be6c4843a"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="6ca487e5b597b117d0b98a32484af09c">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Promises</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="4f05be63850e4e5794463ce34fa09585">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 120px; top: 236px;" data-block-id="c324b41f0d6152a6b53506407bb2a734"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">func1<span style="color:rgb(147, 161, 161)">(</span>value1<span style="color:rgb(147, 161, 161)">)</span>
.then<span style="color:rgb(147, 161, 161)">(</span>func2<span style="color:rgb(147, 161, 161)">(</span>value1<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span> <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>
.then<span style="color:rgb(147, 161, 161)">(</span>func3<span style="color:rgb(147, 161, 161)">(</span>value2<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span> <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>
.then<span style="color:rgb(147, 161, 161)">(</span>func4<span style="color:rgb(147, 161, 161)">(</span>value3<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span> <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>
.then<span style="color:rgb(147, 161, 161)">(</span>func5<span style="color:rgb(147, 161, 161)">(</span>value4<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(147, 161, 161)">// Do something with value 5 </span>
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="72da20a07f0f9feb651ce2765c4edd2d">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 148px; top: 302px;" data-block-id="0b57f8c57c0e825629e5b481e77299e5"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-162.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="58" height="1" viewbox="-220 36 58 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-161.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-161.5" y2="36.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="634889aa325f22e8a7f375b54c72ac2b"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="00898c39425ad7cdd591ef728b6558e1">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Promises</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c89351e28dd4718775658b7ad9c14f74">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 260px; height: 260px; left: 160px; top: 230px;" data-block-id="0ffe8570db43154c516e00ada7bd1550"><div class="sl-block-content fragment" style="z-index: 13;" data-fragment-index="0"><img data-natural-width="375" data-natural-height="375" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2148721/qtia.png"></div></div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 244.541px; height: 280px; left: 598px; top: 220px;" data-block-id="b38b30e92d6819df7e4ef21ee28f1781"><div class="sl-block-content fragment" style="z-index: 14;" data-fragment-index="1"><img data-natural-width="200" data-natural-height="229" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2148724/q.png"></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7a27e6ac958d5f3e03dea6f44c0bf015">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="eb20bcd64bcf576d4ec843b217a55eb3"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="e67cba307e014651d4132bde69466443">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1><span style="font-size:52.5px">Promises</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7ba86759e44053a4636b3b4aec3d2ec7">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 732px; left: 114px; top: 191px;" data-block-id="5cc7ec6eecdd372bb3a7fee6c41d69c5"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span>resolve <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> resolve<span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>
.then<span style="color:rgb(147, 161, 161)">(</span>result <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>resolve, reject<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span>
reject<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(133, 153, 0)">new</span> Error<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Failed to fufill Promise<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>
.<span style="color:rgb(133, 153, 0)">catch</span><span style="color:rgb(147, 161, 161)">(</span>reason <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>reason<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c2de23bb7d1c2b92fbd1c71525eac61f">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 255px; top: 223px;" data-block-id="ebaaf7233cd8a6d2ed868d584462fc9e"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-137.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="83" height="1" viewbox="-220 36 83 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 268px; top: 427px;" data-block-id="710c668fc3b044c13a3b2dc0019a7759"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-137.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="83" height="1" viewbox="-220 36 83 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 369px; top: 426px;" data-block-id="4da28b7950f23d8811f8f0d73878969e"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-137.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="83" height="1" viewbox="-220 36 83 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 494px;" data-block-id="3d1e34cee65ea1dfd836183f11479492"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-137.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="83" height="1" viewbox="-220 36 83 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="26576adb2262aac025446042fe3eeb0d"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="15ef2d9c274707635edb94eea3bc4cd1">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Promises</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="d97113173d910f4e9186cc225f7af4f7">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0300559c204343c52c107e37d6779f19">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 842px; height: 324.744px; left: 99px; top: 188px;" data-block-id="c37b1fd5877a11a00d034b5dd595c449"><div class="sl-block-content" style="z-index: 14;"><img data-natural-width="866" data-natural-height="334" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2149357/whitebackgroundpromises.png"></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="b3539802200449c4092f73037564941f"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="2d06ac3dccb20295539a897f0ec828e6">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Promises</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c1e46935647eac5eb70cbbce7cdd085e">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 814px; left: 118px; top: 216px;" data-block-id="40ac60a4326a831f6408868061fe52c5"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> <span style="color:rgb(165, 120, 0)">fetchJSON <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span>(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>resolve, reject<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">$</span>.getJSON<span style="color:rgb(147, 161, 161)">(</span>url<span style="color:rgb(147, 161, 161)">)</span>
.done<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>json<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> resolve<span style="color:rgb(147, 161, 161)">(</span>json<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>
.fail<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>xhr, status, err<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> reject<span style="color:rgb(147, 161, 161)">(</span>status <span style="color:rgb(133, 153, 0)">+</span> err.message<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c26bd329cb4574b50da45d6b4d589633">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 144px; top: 280px;" data-block-id="8d9f6ed814291bab07be209cb4513af9"><div class="sl-block-content fragment" data-line-x1="-236" data-line-y1="30" data-line-x2="180" data-line-y2="30" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="416" height="1" viewbox="-236 30 416 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-235.5" y1="30.5" x2="180.5" y2="30.5"></line><line stroke="#ff0000" stroke-width="3" x1="-235.5" y1="30.5" x2="180.5" y2="30.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 248px;" data-block-id="45b67429c99b18c069272aaec0a442f9"><div class="sl-block-content fragment" data-line-x1="-236" data-line-y1="30" data-line-x2="-124" data-line-y2="30" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="112" height="1" viewbox="-236 30 112 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-235.5" y1="30.5" x2="-123.5" y2="30.5"></line><line stroke="#ff0000" stroke-width="3" x1="-235.5" y1="30.5" x2="-123.5" y2="30.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 376px; top: 350px;" data-block-id="69ea48e2baf9691f23d48e011b82ea55"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="79" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="79" height="1" viewbox="0 100 79 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="79.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="79.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 186px; top: 350px;" data-block-id="5965ce5b9cb70bcb61f1bff058b9421a"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="66" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="66" height="1" viewbox="0 100 66 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="66.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="66.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 193px; top: 380px;" data-block-id="e9c907316b9d36ec4815a00f1c618fff"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="59" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="59" height="1" viewbox="0 100 59 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="59.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="59.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 514px; top: 380px;" data-block-id="3162ea4b30d5ab7a51d83ce728f24562"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="79" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="79" height="1" viewbox="0 100 79 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="79.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="79.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="5c330950352bb24cdbc5a70e7947115b"><div class="sl-block" data-block-type="text" style="width: 572px; left: 112px; top: 32px; height: auto;" data-block-id="62e3a9284aba644d9cb7677a93f13940">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1 style="text-align: left;"><span style="font-size:52.5px">Parallelizing using Promises</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="a9f119f240335fce40144b206bb63db2">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 473px; left: 112px; top: 148px;" data-block-id="4e5c62b1b1cd91548dcd01e0e1b0b896"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> urls <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span>
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://www.api.com/items/1234<span style="color:rgb(198, 0, 0)">'</span></span>,
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://www.api.com/items/4567<span style="color:rgb(198, 0, 0)">'</span></span>
<span style="color:rgb(38, 139, 210)">]</span>;
<span style="color:rgb(38, 139, 210)">var</span> urlPromises <span style="color:rgb(133, 153, 0)">=</span> urls.map<span style="color:rgb(147, 161, 161)">(</span>fetchJSON<span style="color:rgb(147, 161, 161)">)</span>;
Promise.all<span style="color:rgb(147, 161, 161)">(</span>urlPromises<span style="color:rgb(147, 161, 161)">)</span>
.then<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>results<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
results.forEach<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>
.<span style="color:rgb(133, 153, 0)">catch</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>err<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">"</span>Failed: <span style="color:rgb(198, 0, 0)">"</span></span>, err<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 350px;" data-block-id="7ed5fb163a38fe7b63817a53681dcdc2"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="131" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="131" height="1" viewbox="0 100 131 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="131.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="131.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 419px;" data-block-id="e89c611a21ce067123f801d80171b60d"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="128" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="128" height="1" viewbox="0 100 128 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="128.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="128.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 176px; top: 489px;" data-block-id="131f1c468b5e41d9e25e8e9e08022759"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="172.5" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="173" height="1" viewbox="0 100 173 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="173.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="173.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 141px; top: 587px;" data-block-id="60ee60ea8b3679b7d75b2d421aba8fcf"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="224" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="224" height="1" viewbox="0 100 224 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="224.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="224.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="36287dd6b364d678b42295a4ecbdc0ab"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="649e9848a3660de602c19eb72499aeb0"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 274px; left: 686px; top: 331px;" data-block-id="9568690c5e84ffe348d476c3db123828"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
<h2><span style="font-size:59.85px; line-height:70.7318px">Generators</span></h2>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e9fb2d56545bba5bf0f9dd8cb7a92da9"><div class="sl-block" data-block-type="text" style="width: 208px; left: 80px; top: 33px; height: auto;" data-block-id="53139c7c785c28ae90ad5d7ed6319bc2">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1><span style="font-size:0.7em">Syntax</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8985516f9adc983fabc4630ee2c95416">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 362px; left: 112px; top: 148px;" data-block-id="8f26b9fefeb89345621c41edd8dd9ec7"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> sillyGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
yield <span style="color:rgb(38, 145, 134)">1</span>;
yield <span style="color:rgb(38, 145, 134)">2</span>;
yield <span style="color:rgb(38, 145, 134)">3</span>;
yield <span style="color:rgb(38, 145, 134)">4</span>;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 112px; top: 389px;" data-block-id="d8dd566c9167210e190e569ea9fa13f0"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> generator <span style="color:rgb(133, 153, 0)">=</span> sillyGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">var</span> value <span style="color:rgb(133, 153, 0)">=</span> generator.next<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(133, 153, 0)">&gt;</span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>value<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// { value: 1, done: false }</span>
<span style="color:rgb(133, 153, 0)">&gt;</span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>value<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// { value: 2, done: false }</span>
<span style="color:rgb(133, 153, 0)">&gt;</span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>value<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// { value: 3, done: false }</span>
<span style="color:rgb(133, 153, 0)">&gt;</span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>value<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// { value: 4, done: false }</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 183px;" data-block-id="3ec914e090e30d1ba1f42371084dd5a8"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="105" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="105" height="1" viewbox="0 100 105 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="105.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="105.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 419px;" data-block-id="56a59dbba45f02584887bfb3013655a7"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="152" data-line-y2="101" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="152" height="1" viewbox="0 100 152 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="152.5" y2="101.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="152.5" y2="101.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 256px; top: 455px;" data-block-id="dbfa88e62a9eed4939b3283284699c62"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="180" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="180" height="1" viewbox="0 100 180 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="180.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="180.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 411px; top: 490px;" data-block-id="d4a345984dd3ab0a2a98a1e4c224ae02"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="287" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="287" height="1" viewbox="0 100 287 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="287.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="287.5" y2="100.5"></line></svg></div></div></section><section data-id="122689eb24533399f2654d4dee80c6c8"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="9ae5a7fe5430f567b419abbf299e649c"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
<h1>What about using return?</h1>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="d35d282e41a78977955cdd00e79c1ccf"><div class="sl-block" data-block-type="text" style="width: 462px; left: 112px; top: 32px; height: auto;" data-block-id="7547234925b920b3c007ef3b60e3432a">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1><span style="font-size:0.7em">Return in a Generator</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="b64fa0dba4d1e065c5fc4261f48a8979">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 473px; left: 112px; top: 190px;" data-block-id="6cfe79bfd3f9aa59d95724da24ba4e82"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> sillyGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
yield <span style="color:rgb(38, 145, 134)">1</span>;
yield <span style="color:rgb(38, 145, 134)">2</span>;
yield <span style="color:rgb(38, 145, 134)">3</span>;
yield <span style="color:rgb(38, 145, 134)">4</span>;
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 145, 134)">5</span>;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">for</span><span style="color:rgb(147, 161, 161)">(</span>let val of sillyGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>val<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 1, 2, 3, 4</span>
<span style="color:rgb(38, 139, 210)">}</span> </span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 391px;" data-block-id="0a203f94b0fc79a2f5c44615ad89feeb"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="103" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="103" height="1" viewbox="0 100 103 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="103.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="103.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 497px;" data-block-id="d5523cd2bd4d607ce9aaa30c4a344031"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="368" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="368" height="1" viewbox="0 100 368 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="368.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="368.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="25a49093a42665fa4b45d1660268a1aa"><div class="sl-block" data-block-type="text" style="width: 511px; left: 112px; top: 32px; height: auto;" data-block-id="9cd55333435125070113d3fa99cc793b">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Real Generator Function</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0a34b24729e50d7514137ab29828b2b1">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 473px; left: 112px; top: 129px;" data-block-id="0dd05849b41f6ca08d6e831ea4a986c4"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> factorial<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(38, 139, 210)">{</span>
let <span style="color:rgb(38, 139, 210)">[</span>current, total<span style="color:rgb(38, 139, 210)">]</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">0</span>, <span style="color:rgb(38, 145, 134)">1</span><span style="color:rgb(38, 139, 210)">]</span>;
<span style="color:rgb(133, 153, 0)">while</span> <span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">true</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(38, 139, 210)">{</span>
yield total;
current<span style="color:rgb(133, 153, 0)">++</span>;
total <span style="color:rgb(133, 153, 0)">=</span> total <span style="color:rgb(133, 153, 0)">*</span> current;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let n of factorial<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>n<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(133, 153, 0)">if</span><span style="color:rgb(147, 161, 161)">(</span>n <span style="color:rgb(133, 153, 0)">&gt;=</span> <span style="color:rgb(38, 145, 134)">100000</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">break</span>;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 136px; top: 199px;" data-block-id="320e0a8afa1501f9d771eb43c4ad5e98"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="231.5" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="232" height="1" viewbox="0 100 232 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="232.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="232.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 296px;" data-block-id="9b97cea65b5b4d777ea4538f2341bdbe"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="128" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="128" height="1" viewbox="0 100 128 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="128.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="128.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 500px;" data-block-id="b216fb9d27b079f4b69445bc186285c6"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="301" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="301" height="1" viewbox="0 100 301 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="301.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="301.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ae2c0fd2f20a0b5e99c6afe0bd5b8568"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="e52a2c4c4cf2b2cf48505b12addace4f">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
<h1 style="text-align: left;"><span style="font-size:52.5px">Writing Sync-Async </span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e7e754929db03b94a8ce8eed14408d83">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 112px; top: 178px;" data-block-id="be7dd21d8f954226ff808ff063ff2cce"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> request(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
getJSON<span style="color:rgb(147, 161, 161)">(</span>url, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>response<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
generator.next<span style="color:rgb(147, 161, 161)">(</span>response<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> getData<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">var</span> entry1 <span style="color:rgb(133, 153, 0)">=</span> yield request<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item1<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">var</span> data1 <span style="color:rgb(133, 153, 0)">=</span> JSON.<span style="color:rgb(38, 139, 210)">parse</span><span style="color:rgb(147, 161, 161)">(</span>entry1<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">var</span> entry2 <span style="color:rgb(133, 153, 0)">=</span> yield request<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item2<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">var</span> data2 <span style="color:rgb(133, 153, 0)">=</span> JSON.<span style="color:rgb(38, 139, 210)">parse</span><span style="color:rgb(147, 161, 161)">(</span>entry2<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 206px; top: 280px;" data-block-id="2d6b2d3c26612f491386c3435b133995"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="163" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="163" height="1" viewbox="0 100 163 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="163.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="163.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 410px;" data-block-id="3742fe8c39c351dcd42e3ce515cd09cf"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="221" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="221" height="1" viewbox="0 100 221 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="221.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="221.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 445px;" data-block-id="acc6ddb945542ec6cd4346fdd55a98c2"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="599" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="599" height="1" viewbox="0 100 599 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="599.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="599.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 159px; top: 480px;" data-block-id="92537275ad91be922218993327aa72a0"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="367" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="367" height="1" viewbox="0 100 367 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="367.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="367.5" y2="100.5"></line></svg></div></div></section><section data-id="cb86bc63209094e494e605835d72f074"><div class="sl-block" data-block-type="text" style="width: 872px; left: 80px; top: 313px; height: auto;" data-block-id="88277cd9afa654d9babef5d747364e0f"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
<h2>Not without problems though...</h2>
</div></div></section><section data-id="87f4dc2afa162ecea575fc31fa32d9ca"><div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 729px; left: 132px; top: 157px;" data-block-id="62da03fb1e53ed10e50c6bf56187fccd">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 10; text-align: left; background-color: rgba(0, 0, 0, 0);" data-has-custom-html="" dir="ui">
<h3 class="fragment" data-fragment-index="2" style="color: rgb(251, 222, 52); text-align: left;"> </h3>
<ul>
<li class="visible" style="color: rgb(251, 222, 52);">
<h3><span style="font-size:1.0em;"><span style="color:black">How do we handle errors?</span> </span></h3>
</li>
<li class="fragment" data-fragment-index="0" style="color: rgb(251, 222, 52);">
<h3><span style="font-size:1.0em;"><span style="color:black">getJSON not in control</span> </span></h3>
</li>
<li class="fragment" data-fragment-index="1" style="color: rgb(251, 222, 52);">
<h3><span style="font-size:1.0em;"><span style="color:black">Parallelize?</span> </span></h3>
</li>
</ul>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="195630d346665afbe8f09433da78fb2c">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div></section><section data-id="f626262a4f441530f6c23838cb235da3"><div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 506.667px; height: 380px; left: 227px; top: 180px;" data-block-id="872e298b2d019180d03ccd2333e3f5d8"><div class="sl-block-content" style="z-index: 11;"><img data-natural-width="400" data-natural-height="300" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2149789/allthethings.jpg"></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="c7f875d262172a5ce1d1d5be6cc2bdec"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="a8475473eaeb624c238d1d94c4c40410">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; text-align: left;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Generators &amp; Promises</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="cdbaa59a785d3ea2b8ccebaab7a5b307">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 98px; top: 280px;" data-block-id="6e241c846a4ea1785f8c3513ed8c9de4"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> request(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>resolve, reject<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">&gt;</span> <span style="color:rgb(38, 139, 210)">{</span>
getJSON<span style="color:rgb(147, 161, 161)">(</span>url, resolve<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 148px; top: 350px;" data-block-id="2e60a0dc0a3833b1028232df9c873e98"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="207" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="207" height="1" viewbox="0 100 207 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="207.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="207.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="567963526087dc70f2ca4a6d10636f9a"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="0c17be190d1081182b27bfdbf8212e10">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; text-align: left;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Generators &amp; Promises</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="ae11ba0d594b2386b7d9a8288af86589">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 98px; top: 151px;" data-block-id="3c0ca41b68b716c6eed732a96246b4f4"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> iterateGenerator(gen)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">var</span> generator <span style="color:rgb(133, 153, 0)">=</span> gen<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">var</span> ret;
<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> iterate(val)</span> <span style="color:rgb(38, 139, 210)">{</span>
ret <span style="color:rgb(133, 153, 0)">=</span> generator.next<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(133, 153, 0)">if</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(133, 153, 0)">!</span>ret.done<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
ret.value.then<span style="color:rgb(147, 161, 161)">(</span>iterate<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span> <span style="color:rgb(133, 153, 0)">else</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">setTimeout</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
iterate<span style="color:rgb(147, 161, 161)">(</span>ret.value<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 143px; top: 218px;" data-block-id="4a61451e17ba805bad81a9f8c5e49e53"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="247" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="247" height="1" viewbox="0 100 247 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="247.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="247.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 194px; top: 318px;" data-block-id="280927949e79c5b75ffc78a3fc6544e0"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="259" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="259" height="1" viewbox="0 100 259 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="259.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="259.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 242px; top: 387px;" data-block-id="74eab7f04eaece240a794369157675df"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="275" data-line-y2="99.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="275" height="1" viewbox="0 100 275 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="275.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="275.5" y2="100.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 290px; top: 490px;" data-block-id="c8d7ec9c33dd2970edddd2db64c578df"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="212" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="212" height="1" viewbox="0 100 212 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="212.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="212.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="20538dde8f8ae6de16a7b310e080144f"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="5a1ccf59e43725b918512bdb2d22f234">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11; text-align: left;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Generators &amp; Promises</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="60d701128c72a0e7faeb785e0a3ad638">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 98px; top: 249px;" data-block-id="fe1928605b85df28609821c92634bc16"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">iterateGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> getData<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">var</span> entry1 <span style="color:rgb(133, 153, 0)">=</span> yield request<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item1<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">var</span> data1 <span style="color:rgb(133, 153, 0)">=</span> JSON.<span style="color:rgb(38, 139, 210)">parse</span><span style="color:rgb(147, 161, 161)">(</span>entry1<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">var</span> entry2 <span style="color:rgb(133, 153, 0)">=</span> yield request<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item2<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">var</span> data2 <span style="color:rgb(133, 153, 0)">=</span> JSON.<span style="color:rgb(38, 139, 210)">parse</span><span style="color:rgb(147, 161, 161)">(</span>entry2<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div></div></section><section data-id="bafc3fec81a2c04804a8bb7a1ff44d20"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 239px; height: auto;" data-block-id="e578cb5ad2196dead92782233dcc6d3d"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
<h1>Alternate Solution?</h1>
</div></div>
<div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 313px; height: auto;" data-block-id="b2071f218e22f7341b782fde9aa5b3c2"><div class="sl-block-content" data-placeholder-tag="h2" data-placeholder-text="Subtitle">
<h2>Beyond ES6</h2>
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="780231b90b41fb453a7b1db6726c3f12"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="3ef071da475468d87caa943fcfb675e7">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; text-align: left;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Async / Await (ES7)</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="03d2e04aa32186882ab0653c7abb923b">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 98px; top: 148px;" data-block-id="44c04ec07fd59f7860d3331b64e7e493"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> request <span style="color:rgb(133, 153, 0)">=</span> require<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>request<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getJSON(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
request<span style="color:rgb(147, 161, 161)">(</span>url, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>error, response, body<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> body;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span>
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> main()</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">var</span> data <span style="color:rgb(133, 153, 0)">=</span> getJSON<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item1<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// Undefined</span>
<span style="color:rgb(38, 139, 210)">}</span>
main<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 204px; top: 250px;" data-block-id="fb3c2c92313a58406a6742dc257364d7"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-35" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="138" height="1" viewbox="-173 0 138 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 122px; top: 317px;" data-block-id="8fe9d1e3cb9ab755c6d74eddf6ebe7ba"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="332" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="505" height="1" viewbox="-173 0 505 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="332.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="332.5" y2="0.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 144px; top: 349px;" data-block-id="b21660af2376091da86139a356166ec8"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-35" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="138" height="1" viewbox="-173 0 138 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 122px; top: 517px;" data-block-id="f8e87b5ed1de1f3d3014752738e02442"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="38" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="211" height="1" viewbox="-173 0 211 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="38.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="38.5" y2="0.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 349px; top: 550px;" data-block-id="0d90ac999c697ef633d2a3fde79ab960"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-35" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="138" height="1" viewbox="-173 0 138 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="3086aac54a037a7ac7128b789e9efd2e"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 22px; height: auto;" data-block-id="9506bf2e2e08a8bbd13d029a1e4953c5">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; text-align: left;" dir="ui">
<h1><span style="font-size:52.5px; line-height:62.0455px">Async / Await (ES7)</span></h1>
</div>
</div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="114e94949c639d60f6b6fc2d9beadb74">
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
</div>
</div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 676px; left: 98px; top: 119px;" data-block-id="2ee06920567cc32a0744e01077d7099a"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> request <span style="color:rgb(133, 153, 0)">=</span> require<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>request<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getJSON(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>resolve, reject<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
request<span style="color:rgb(147, 161, 161)">(</span>url, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>error, response, body<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
resolve<span style="color:rgb(147, 161, 161)">(</span>body<span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
<span style="color:rgb(38, 139, 210)">}</span>
async <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> main()</span> <span style="color:rgb(38, 139, 210)">{</span>
<span style="color:rgb(38, 139, 210)">var</span> data <span style="color:rgb(133, 153, 0)">=</span> await getJSON<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// NOT undefined!</span>
<span style="color:rgb(38, 139, 210)">}</span>
main<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>The data is: <span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
</div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 121px; top: 253px;" data-block-id="17d1eda764290f592b19e99c01edb0e4"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="33" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="206" height="1" viewbox="-173 0 206 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="33.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="33.5" y2="0.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 171px; top: 322px;" data-block-id="ffe4e23f354c4aeae840297bd34f42a4"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-35" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="138" height="1" viewbox="-173 0 138 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 98px; top: 490px;" data-block-id="3b552b0e25082a1fe472eb33f0996f68"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-111" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="62" height="1" viewbox="-173 0 62 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-110.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-110.5" y2="0.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 262px; top: 559px;" data-block-id="2245fcc89bb768e540ac5e64f3d1ceda"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-115" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="58" height="1" viewbox="-173 0 58 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-114.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-114.5" y2="0.5"></line></svg></div></div>
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 98px; top: 690px;" data-block-id="b57b1cd3ebfd5d50b4099e6b92e44418"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="164.5" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="338" height="1" viewbox="-173 0 338 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="165.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="165.5" y2="0.5"></line></svg></div></div></section><section><div class="sl-block" data-block-type="image" style="width: 700px; height: 438.298px; left: 129px; top: 162px;" data-block-id="f9e85462aa600a10bdf3f9dbe26ab3e0"><div class="sl-block-content"><img data-natural-width="658" data-natural-height="412" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157420/meme3.jpg"></div></div></section><section><div class="sl-block" data-block-type="image" style="width: 700px; height: 563.485px; left: 130px; top: 68px;" data-block-id="662e55ac2028644373730d66a86ce2c7"><div class="sl-block-content"><img data-natural-width="964" data-natural-height="776" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157539/cheatsheet.png"></div></div></section><section data-id="1beb2db9b5bb7d4388a4b6bc1863dcfd"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 140px; height: auto;" data-block-id="1e064ea6d54c38502045685ba11c0f98"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
<h1>Thank you everyone!</h1>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 450px; left: 254px; top: 268px;" data-block-id="2bb55f2f1712233f4f06a9eefc53c90a"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<pre><span style="font-size:0.7em">Github: <a href="https://github.com/DrkSephy" target="_blank">https://github.com/DrkSephy</a></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 473px; left: 243px; top: 313px;" data-block-id="4d196c2d82748488c59e3906d4b9bcbe"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
<pre><span style="font-size:0.7em">Blog: <a href="http://drksephy.github.io/blog/" target="_blank">http://drksephy.github.io/blog/</a></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 180px; top: 404px;" data-block-id="9d548cc2b462c8e46464116f11fec427"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
<pre><span style="font-size:0.7em">LinkedIn: <a href="https://www.linkedin.com/in/drksephy" target="_blank">https://www.linkedin.com/in/drksephy</a></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 469px; left: 236px; top: 358px;" data-block-id="138744fb99d0d589eb81de4b92ecef9b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;">
<pre><span style="font-size:0.7em">Twitter: <a href="https://twitter.com/DrkSephy" target="_blank">https://twitter.com/DrkSephy</a></span></pre>
</div></div>
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 740px; left: 140px; top: 446px;" data-block-id="60a311f7d27eb8038cc3d09416b04fa5"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;">
<pre><span style="font-size:0.7em">ES6 Cheatsheet: <a href="https://github.com/DrkSephy/es6-cheatsheet" target="_blank">https://github.com/DrkSephy/es6-cheatsheet</a></span></pre>
</div></div></section>
</div>
</div>
</div>
</div>
<div class="deck-kudos">
<button class="kudos-button kudos-trigger" data-kudos-id="584013" data-kudoed-by-user="true">
<div class="kudos-heart">
<span class="kudos-icon icon i-heart-fill"></span>
</div>
<div class="kudos-count" data-kudos-value="15" data-kudos-id="584013"></div>
</button>
</div>
<div class="pill summary-pill">
<div class="pill-picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&amp;d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></div>
<div class="pill-content">
<h4 class="pill-title">ECMAScript 2015</h4>
<p class="pill-description">By David Leonard</p>
</div>
</div>
<div class="pill instructions-pill">
<div class="pill-picture"></div>
<div class="pill-content">
<h4 class="pill-title"></h4>
<p class="pill-description"></p>
</div>
</div>
</div>
<div class="column">
<header class="deck-info">
<div class="deck-social">
<a href="#" class="deck-social-button facebook-share-button" data-tooltip="Share on Facebook">
<span class="icon i-facebook"></span>
</a>
<a href="#" class="deck-social-button twitter-share-button" data-tooltip="Share on Twitter">
<span class="icon i-twitter"></span>
</a>
<a href="#" class="deck-social-button google-share-button" data-tooltip="Share on Google+">
</a>
</div>
<div class="deck-options">
<a class="fullscreen-button" data-tooltip="Fullscreen" href="#"><span class="icon i-fullscreen"></span></a>
<a class="comment-button" data-tooltip="Comments" data-scroll-to href="#comments" data-scroll-to data-scroll-to-offset="-90"><span class="icon i-comment-stroke"></span></a>
<a class="share-button" data-tooltip="Share" href="#"><span class="icon i-share"></span></a>
</div>
<div class="details">
<div class="deck-info">
<h3 class="title">ECMAScript 2015</h3>
<p class="description">An overview of ES6 features. </p>
<ul class="deck-meta">
<li data-tooltip="Published date" data-tooltip-delay="500">
<span class="icon i-clock"></span>
<time class="value ago" datetime="2016-01-13 04:42:35 UTC"></time>
</li>
<li data-tooltip="Kudos" data-tooltip-delay="500">
<span class="icon i-heart-fill"></span>
<span class="value" data-kudos-value="15" data-kudos-id="584013"></span>
</li>
<li data-tooltip="Views" data-tooltip-delay="500">
<span class="icon i-eye"></span>
<span class="value">3,451</span>
</li>
</ul>
</div>
<div class="user-info">
<div class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&amp;d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></div>
<div class="text">
<h3 class="title">
<a href="/drksephy" class="username">David Leonard</a>
<a href="/pricing#pro" class="pro-badge">PRO</a>
</h3>
<p class="description"></p>
<ul class="links">
<li><a href="https://github.com/DrkSephy" target="_blank"><span class="icon i-link"></span>https://github.com/DrkSephy</a></li>
<li><a href="http://twitter.com/DrkSephy" target="_blank"><span class="icon i-twitter"></span>DrkSephy</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</header>
<section class="comments" id="comments">
<div id="disqus_thread"><span class="placeholder">Loading comments...</span></div>
</section>
<section class="deck-list">
<h2>More from <a href="/drksephy">David Leonard</a></h2>
<ul class="carousel">
<li class="deck-thumbnail">
<div class="deck-image" style="background-image: url(https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/bcca32/decks.jpg)">
<a class="deck-link" href="/drksephy/deck-5"></a>
</div>
<footer class="deck-details">
<a class="author" href="/drksephy">
<span class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&amp;d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></span>
<span class="name">David Leonard</span>
</a>
<div class="stats">
<div>54<span class="icon i-eye"></span></div>
</div>
</footer>
</li>
<li class="deck-thumbnail">
<div class="deck-image" style="background-image: url(https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/21666a/decks.jpg)">
<a class="deck-link" href="/drksephy/tales-of-kratos"></a>
</div>
<footer class="deck-details">
<a class="author" href="/drksephy">
<span class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&amp;d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></span>
<span class="name">David Leonard</span>
</a>
<div class="stats">
<div>86<span class="icon i-eye"></span></div>
</div>
</footer>
</li>
<li class="deck-thumbnail">
<div class="deck-image" style="background-image: url(https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/ec076a/decks.jpg)">
<a class="deck-link" href="/drksephy/deck-3"></a>
</div>
<footer class="deck-details">
<a class="author" href="/drksephy">
<span class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&amp;d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></span>
<span class="name">David Leonard</span>
</a>
<div class="stats">
<div>179<span class="icon i-eye"></span></div>
</div>
</footer>
</li>
<li class="deck-thumbnail">
<div class="deck-image" style="background-image: url(https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/c63c39/decks.jpg)">
<a class="deck-link" href="/drksephy/deck-2"></a>
</div>
<footer class="deck-details">
<a class="author" href="/drksephy">
<span class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&amp;d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></span>
<span class="name">David Leonard</span>
</a>
<div class="stats">
<div>372<span class="icon i-eye"></span></div>
</div>
</footer>
</li>
</ul>
</section>
</div>
</div>
<footer class="global-footer">
<div class="link-group">
<h5>Product</h5>
<a href="http://slides.com/">Home</a>
<a href="http://slides.com/explore">Explore</a>
<a href="http://slides.com/features">Features</a>
<a href="http://slides.com/pricing">Pricing</a>
</div>
<div class="link-group">
<h5>Help</h5>
<a href="http://help.slides.com" target="_blank">Forum</a>
<a href="http://help.slides.com/knowledgebase" target="_blank">Knowledge base</a>
<a href="#" data-feedback-mode="smartvote">Give feedback</a>
<a href="#" data-feedback-mode="contact">Report an issue</a>
</div>
<div class="link-group">
<h5>News</h5>
<a href="http://blog.slides.com" target="_blank">Blog</a>
<a href="http://twitter.com/slides" target="_blank">Twitter</a>
<a href="http://facebook.com/slidesapp" target="_blank">Facebook</a>
<a href="http://plus.google.com/+slidesapp/" rel="publisher" target="_blank">Google+</a>
</div>
<div class="link-group">
<h5>Company</h5>
<a href="http://slides.com/about">About Slides</a>
<a href="http://slides.com/changelog">Changelog</a>
<a href="http://slides.com/terms">Terms of Service</a>
<a href="http://slides.com/privacy">Privacy Policy</a>
</div>
<div class="copyright"><span>&copy; 2016 Slides, Inc.</span></div>
</footer>
</div> <!--! end of #container -->
<script>
UserVoice=window.UserVoice||[];(function(){var uv=document.createElement('script');uv.type='text/javascript';uv.async=true;uv.src='//widget.uservoice.com/f7sH7NavrjjvuGxByaw.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(uv,s)})();
UserVoice.push(['set', {
accent_color: '#448dd6',
trigger_color: 'white',
trigger_background_color: 'rgba(46, 49, 51, 0.6)',
position: 'automatic'
}]);
</script>
<script>
var SLConfig = {"deck":{"id":584013,"slug":"ecmascript-2015","title":"ECMAScript 2015","description":"An overview of ES6 features. ","visibility":"all","published_at":"2016-01-13T04:42:35.240Z","sanitize_messages":null,"thumbnail_url":"https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/cff7c3/decks.jpg","view_count":3451,"user":{"id":280009,"username":"drksephy","name":"David Leonard","description":"","thumbnail_url":"https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140\u0026d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png","pro":true,"enterprise":false,"enterprise_manager":false,"settings":{"id":104558,"present_controls":false,"present_upsizing":false,"present_notes":true},"registered":true},"background_transition":"slide","transition":"slide","theme_id":null,"theme_font":"josefine","theme_color":"white-blue","auto_slide_interval":0,"comments_enabled":true,"forking_enabled":true,"rolling_links":false,"center":false,"should_loop":false,"share_notes":false,"slide_number":false,"rtl":false,"version":2}};
</script>
<script defer="defer" src="//assets.slid.es/assets/application-0f31ff3403cab3aa82c045dee9bbb97c.js"></script>
<script defer="defer" src="//assets.slid.es/assets/reveal.min-25b719b3b898da619ea3b535ce4f4dbd.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink