jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

2
1-js/01-getting-started/1-intro/article.md
View file

@ -75,7 +75,7 @@ Examples of such restrictions include:
This limitation is, again, for the user's safety. A page from `http://anysite.com` which a user has opened must not be able to access another browser tab with the URL `http://gmail.com` and steal information from there. This limitation is, again, for the user's safety. A page from `http://anysite.com` which a user has opened must not be able to access another browser tab with the URL `http://gmail.com` and steal information from there.
- JavaScript can easily communicate over the net to the server where the current page came from. But its ability to receive data from other sites/domains is crippled. Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's a safety limitation. - JavaScript can easily communicate over the net to the server where the current page came from. But its ability to receive data from other sites/domains is crippled. Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's a safety limitation.
![](limitations.png) ![](limitations.svg)
Such limits do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow plugin/extensions which may ask for extended permissions. Such limits do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow plugin/extensions which may ask for extended permissions.

BIN
1-js/01-getting-started/1-intro/limitations.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 34 KiB

92
1-js/01-getting-started/1-intro/limitations.svg Normal file
View file

@ -0,0 +1,92 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="566px" height="449px" viewBox="0 0 566 449" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>limitations.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="limitations.svg">
<path d="M183,142 L193,150" id="Line-3" stroke="#FFFFFF" stroke-width="4.33212996" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#979797" stroke-width="1.44404332" x="148.722022" y="176.722022" width="143.555957" height="85.5559567" rx="2.16606498"></rect>
<path d="M149.36,195 L292.64,195" id="Line" stroke="#979797" stroke-width="0.722021661" stroke-linecap="square"></path>
<text id="https://javascript.i" font-family="OpenSans-Regular, Open Sans" font-size="10.1083032" font-weight="normal" fill="#373535">
<tspan x="173" y="189">https://javascript.info</tspan>
</text>
<text id="&lt;script&gt;" font-family="OpenSans-Regular, Open Sans" font-size="10" font-weight="normal" fill="#373535">
<tspan x="173" y="210">&lt;script&gt;</tspan>
<tspan x="173" y="224">...</tspan>
<tspan x="173" y="238">&lt;/script&gt;</tspan>
</text>
<circle id="Oval-1" stroke="#979797" stroke-width="0.722021661" cx="155" cy="185" r="2"></circle>
<circle id="Oval-2" stroke="#979797" stroke-width="0.722021661" cx="161" cy="185" r="2"></circle>
<circle id="Oval-3" stroke="#979797" stroke-width="0.722021661" cx="167" cy="185" r="2"></circle>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="1.44404332" x="415.722022" y="176.722022" width="143.555957" height="85.5559567" rx="2.16606498"></rect>
<path d="M415.36,195 L558.64,195" id="Line-2" stroke="#979797" stroke-width="0.722021661" stroke-linecap="square"></path>
<text id="https://gmail.com" font-family="OpenSans-Regular, Open Sans" font-size="10" font-weight="normal" fill="#373535">
<tspan x="439" y="188">https://gmail.com</tspan>
</text>
<circle id="Oval-4" stroke="#979797" stroke-width="0.722021661" cx="422" cy="185" r="2"></circle>
<circle id="Oval-5" stroke="#979797" stroke-width="0.722021661" cx="427" cy="185" r="2"></circle>
<circle id="Oval-6" stroke="#979797" stroke-width="0.722021661" cx="433" cy="185" r="2"></circle>
<g id="Layer_1" transform="translate(317.000000, 14.000000)" fill="#E8C48F">
<path d="M118,56.8818333 C118,43.5594174 107.087668,32.7612614 93.6255999,32.7612614 C91.5461923,32.7612614 89.5384885,33.0462779 87.6122108,33.5321288 C87.8941644,31.9266562 88.049725,30.2790926 88.049725,28.5942483 C88.049725,12.8016896 75.111459,0 59.15313,0 C43.1948009,0 30.2565349,12.8016896 30.2565349,28.5942483 C30.2565349,30.307955 30.4169568,31.9831784 30.7098482,33.6139056 C28.6851299,33.0751403 26.5680475,32.7612614 24.3731847,32.7612614 C10.9111171,32.7612614 0,43.5594174 0,56.8818333 C0,69.447813 9.7140297,79.757713 22.1163409,80.8869555 C22.2536717,80.9470855 22.4031557,80.981961 22.5623622,80.981961 L24.0207428,80.981961 C24.1398439,80.9831636 24.2540837,81 24.3731847,81 C24.4922858,81 24.6065256,80.9831636 24.7256267,80.981961 L93.2743733,80.981961 C93.3934744,80.9831636 93.5077142,81 93.6268153,81 C93.7459163,81 93.8601561,80.9831636 93.9792572,80.981961 L94.6014996,80.981961 C94.6756339,80.981961 94.7388304,80.9543012 94.8093188,80.9410725 C107.717202,80.3265433 118,69.8073908 118,56.8818333 L118,56.8818333 Z" id="Shape"></path>
</g>
<g id="Group" transform="translate(354.000000, 43.000000)" fill="#FFFFFF">
<path d="M39.3767187,29.8285714 L39.2106875,30.1 L38.901625,30.0214286 C37.8364375,29.7392857 35.59825,29.205 32.5385312,28.7564286 L32.0943437,28.6914286 L32.1813125,28.2528571 C32.289125,27.6892857 32.3883125,27.1235714 32.4767187,26.555 L31.8895,24.615 C31.7443125,25.8128571 31.5545625,27.0057143 31.32025,28.1871429 L31.2433437,28.575 L30.8473125,28.5271429 C27.200375,28.0257143 23.4125625,28.0157143 23.4125625,28.0157143 L23.4125625,25.8921429 L22.9849062,24.3171429 L22.58025,25.8935714 L22.554375,28.0128571 C22.554375,28.0128571 18.90025,27.9921429 14.973,28.4607143 L14.5755312,28.5085714 L14.5000625,28.1185714 C14.2693437,26.9414286 14.0824687,25.75 13.938,24.555 L13.3328125,26.42 C13.4255312,27.0121429 13.5275937,27.6028571 13.641875,28.1914286 L13.7259687,28.6257143 L13.2846562,28.6928571 C11.1758437,29.0128571 9.085,29.4571429 7.07321875,30.0171429 L6.759125,30.1028571 L6.5909375,29.825 C6.24953125,29.2642857 5.9469375,28.6821429 5.6651875,28.0921429 L4.7164375,28.0921429 C7.8415625,35.0321429 14.85225,39.8814286 22.9849062,39.8814286 C31.116125,39.8814286 38.1275312,35.0321429 41.2540937,28.0921429 L40.3031875,28.0921429 C40.022875,28.6857143 39.7195625,29.2671429 39.3767187,29.8285714 L39.3767187,29.8285714 Z M16.5700625,37.9678571 L16.5837187,37.9614286 L15.6665937,37.5821429 C12.4767812,36.265 9.69521875,34.11 7.62521875,31.3471429 L7.2464375,30.8435714 L7.85809375,30.6814286 C9.66215625,30.2042857 11.5654062,29.8171429 13.5132187,29.5285714 L13.9085312,29.4707143 L13.9976562,29.8557143 C14.5510937,32.2785714 15.3029062,34.6921429 16.2308125,37.0314286 L16.597375,37.9557143 L16.7023125,38.0021429 L16.5700625,37.9678571 L16.5700625,37.9678571 Z M22.5550937,39.0292857 L22.1073125,39.0107143 C20.6331562,38.9428571 19.1625937,38.7028571 17.7351562,38.2985714 L17.64675,38.2742857 C16.6160625,35.7842857 15.4725312,32.4235714 14.8673437,29.8235714 L14.7595312,29.3578571 L15.234625,29.3042857 C17.459875,29.045 19.7792812,28.9071429 22.1245625,28.9007143 L22.5550937,28.8978571 L22.5550937,39.0292857 L22.5550937,39.0292857 Z M23.8632187,39.0092857 L23.4125625,39.0278571 L23.4125625,28.9014286 L23.8495625,28.9121429 C26.0748125,28.9614286 28.3374375,29.1228571 30.5777812,29.3892857 L31.0564687,29.445 L30.9472187,29.9078571 C30.337,32.5028571 29.1029062,35.8728571 28.0715,38.3407143 C26.6986875,38.7185714 25.2805937,38.9457143 23.8632187,39.0092857 L23.8632187,39.0092857 Z M38.3302187,31.3707143 C36.225,34.1692857 33.393125,36.34 30.1400625,37.6457143 L29.3027187,37.9835714 L29.3242812,37.9935714 L29.2912187,38.0042857 L29.5794375,37.0964286 C30.5087812,34.76 31.2634687,32.3521429 31.817625,29.9392857 L31.90675,29.5571429 L32.300625,29.6128571 C34.8579375,29.9792857 36.8582187,30.4078571 38.0844062,30.7021429 L38.7161875,30.8535714 L38.3302187,31.3707143 L38.3302187,31.3707143 Z" id="Shape"></path>
<path d="M6.8295625,9.80214286 L6.99703125,9.54142857 L7.29675,9.61785714 C8.4568125,9.91357143 10.3665312,10.3464286 12.8728125,10.735 L13.2904062,10.8 L13.2329062,11.215 C13.06975,12.3757143 12.951875,13.5492857 12.8670625,14.7257143 L13.3975,14.7257143 L13.7209375,14.7257143 C13.8043125,13.59 13.917875,12.4578571 14.0738437,11.3378571 L14.1342187,10.9185714 L14.5554062,10.9735714 C17.0624062,11.3007143 19.61325,11.4914286 22.1331875,11.54 L22.554375,11.5485714 L22.554375,14.7257143 L23.4125625,14.7257143 L23.4125625,11.5557143 L23.8380625,11.5514286 C26.3989687,11.5371429 28.90525,11.3742857 31.2936562,11.0685714 L31.7155625,11.0164286 L31.7759375,11.4342857 C31.9261562,12.5214286 32.0339687,13.6221429 32.11375,14.725 L32.6154375,14.725 L32.9705,14.725 C32.8864062,13.5778571 32.7728437,12.4335714 32.6154375,11.3021429 L32.5579375,10.8885714 L32.9740937,10.8221429 C34.876625,10.5214286 36.7877812,10.11 38.6522187,9.60142857 L38.9576875,9.51785714 L39.1280312,9.78357143 C40.5885312,12.0585714 41.5365625,14.62 41.9239687,17.275 L42.45225,15.4271429 C40.3685937,6.66285714 32.432875,0.117142857 22.9849062,0.117142857 C13.5894062,0.117142857 5.69034375,6.58928571 3.5520625,15.2814286 L4.0551875,17.2064286 C4.44978125,14.58 5.38775,12.0528571 6.8295625,9.80214286 L6.8295625,9.80214286 Z M31.4884375,2.95571429 C34.0234687,4.21071429 36.2954375,6.05 38.050625,8.27642857 L38.4574375,8.78714286 L37.8235,8.95214286 C36.245125,9.35928571 34.569,9.70357143 32.8425625,9.97285714 L32.4264062,10.0378571 L32.3530937,9.62357143 C31.8880625,6.91357143 31.2986875,4.77785714 30.886125,3.46428571 L30.587125,2.51071429 L31.4884375,2.95571429 L31.4884375,2.95571429 Z M23.4125625,0.971428571 L23.8617812,0.992142857 C25.7319687,1.07571429 27.5719687,1.43214286 29.3300312,2.04928571 L29.5219375,2.115 L29.5909375,2.305 C29.9481562,3.27285714 30.851625,5.93714286 31.5078437,9.71714286 L31.5825937,10.1571429 L31.1384062,10.2114286 C28.77875,10.505 26.3242187,10.6592857 23.84525,10.6707143 L23.4132812,10.6714286 L23.4125625,0.971428571 L23.4125625,0.971428571 Z M16.2940625,2.16714286 L16.4838125,2.09857143 C18.2871562,1.45 20.179625,1.07785714 22.105875,0.991428571 L22.5550937,0.970714286 L22.5550937,10.6671429 L22.1166562,10.6564286 C19.6729062,10.605 17.1831562,10.4192857 14.7178437,10.105 L14.274375,10.0485714 L14.3512812,9.60857143 C14.9722812,6.06428571 15.7938125,3.54285714 16.2265,2.35571429 L16.2940625,2.16714286 L16.2940625,2.16714286 Z M7.926375,8.265 C9.64346875,6.09428571 11.8543437,4.28642857 14.320375,3.03857143 L15.2238437,2.58 L14.924125,3.54357143 C14.5280937,4.81428571 13.958125,6.88214286 13.4995625,9.51642857 L13.4269687,9.92857143 L13.01225,9.865 C10.8746875,9.53857143 9.19640625,9.18285714 8.165,8.94214286 L7.5080625,8.79071429 L7.926375,8.265 L7.926375,8.265 Z" id="Shape"></path>
<path d="M6.52625,21.5 C6.87628125,20.4307143 7.18821875,19.4028571 7.4361875,18.2092857 L7.4793125,18.2092857 C7.7265625,19.3814286 8.01621875,20.37 8.36840625,21.4807143 L9.89934375,26.2314286 L11.5553437,26.2314286 L14.7854062,16.2757143 L12.9842187,16.2757143 L11.5553437,21.2735714 C11.2232812,22.4471429 10.9559062,23.4957143 10.7884375,24.5035714 L10.7273437,24.5035714 C10.5009375,23.4957143 10.2098437,22.4457143 9.83896875,21.2542857 L8.28359375,16.2757143 L6.753375,16.2757143 L5.1160625,21.3557143 C4.78615625,22.4264286 4.4548125,23.4942857 4.2276875,24.5021429 L4.16371875,24.5021429 C3.97971875,23.4735714 3.70946875,22.4442857 3.4198125,21.3342857 L2.095875,16.2735714 L0.232875,16.2735714 L3.2545,26.2292857 L4.9105,26.2292857 L6.52625,21.5 L6.52625,21.5 Z" id="Shape"></path>
<path d="M26.2810938,24.5028571 L26.2185625,24.5028571 C25.9921563,23.4964286 25.7003438,22.4457143 25.32875,21.2542857 L23.7748125,16.2757143 L22.24675,16.2757143 L20.6101563,21.3564286 C20.2795313,22.4257143 19.9460313,23.4957143 19.719625,24.5021429 L19.6578125,24.5021429 C19.472375,23.4742857 19.202125,22.445 18.91175,21.3342857 L17.5856563,16.275 L15.723375,16.275 L18.7464375,26.2307143 L20.4024375,26.2307143 L22.0174688,21.4992857 C22.3696563,20.43 22.680875,19.4021429 22.9295625,18.2085714 L22.9698125,18.2085714 C23.2192188,19.3807143 23.508875,20.3692857 23.8603438,21.48 L25.389125,26.2307143 L27.0472813,26.2307143 L30.2780625,16.275 L28.4754375,16.275 L27.0472813,21.2728571 C26.7159375,22.4457143 26.447125,23.4964286 26.2810938,24.5028571 L26.2810938,24.5028571 Z" id="Shape"></path>
<path d="M43.9659375,16.2757143 L42.5377813,21.2735714 C42.205,22.4471429 41.937625,23.4957143 41.77375,24.5035714 L41.7112188,24.5035714 C41.4848125,23.4957143 41.1944375,22.4457143 40.8206875,21.2542857 L39.2681875,16.2757143 L37.7386875,16.2757143 L36.1035313,21.3557143 C35.7721875,22.4264286 35.4394063,23.4942857 35.2137188,24.5021429 L35.1504688,24.5021429 C34.9650313,23.4735714 34.6933438,22.4442857 34.405125,21.3342857 L33.0804688,16.2742857 L31.2181875,16.2742857 L34.2376563,26.23 L35.8958125,26.23 L37.510125,21.4992857 C37.860875,20.4292857 38.1728125,19.4014286 38.4222188,18.2078571 L38.464625,18.2078571 C38.7140313,19.3807143 39.00225,20.3685714 39.3537188,21.4807143 L40.8839375,26.23 L42.5399375,26.23 L45.7714375,16.2742857 L43.9659375,16.2742857 L43.9659375,16.2757143 L43.9659375,16.2757143 Z" id="Shape"></path>
</g>
<g id="Layer_1" transform="translate(11.000000, 14.000000)" fill="#E8C48F">
<path d="M118,56.8818333 C118,43.5594174 107.087668,32.7612614 93.6255999,32.7612614 C91.5461923,32.7612614 89.5384885,33.0462779 87.6122108,33.5321288 C87.8941644,31.9266562 88.049725,30.2790926 88.049725,28.5942483 C88.049725,12.8016896 75.111459,0 59.15313,0 C43.1948009,0 30.2565349,12.8016896 30.2565349,28.5942483 C30.2565349,30.307955 30.4169568,31.9831784 30.7098482,33.6139056 C28.6851299,33.0751403 26.5680475,32.7612614 24.3731847,32.7612614 C10.9111171,32.7612614 0,43.5594174 0,56.8818333 C0,69.447813 9.7140297,79.757713 22.1163409,80.8869555 C22.2536717,80.9470855 22.4031557,80.981961 22.5623622,80.981961 L24.0207428,80.981961 C24.1398439,80.9831636 24.2540837,81 24.3731847,81 C24.4922858,81 24.6065256,80.9831636 24.7256267,80.981961 L93.2743733,80.981961 C93.3934744,80.9831636 93.5077142,81 93.6268153,81 C93.7459163,81 93.8601561,80.9831636 93.9792572,80.981961 L94.6014996,80.981961 C94.6756339,80.981961 94.7388304,80.9543012 94.8093188,80.9410725 C107.717202,80.3265433 118,69.8073908 118,56.8818333 L118,56.8818333 Z" id="Shape"></path>
</g>
<g id="letter2" transform="translate(458.000000, 213.000000)" fill="#E8C48F">
<path d="M0,0 L0,29 L59,29 L59,0 L0,0 L0,0 Z M43.1240353,1.01976386 L29.4945142,10.2609086 L14.2795909,1.01976386 L43.1240353,1.01976386 L43.1240353,1.01976386 Z M7.98735472,5.63847536 L24.4228731,15.2964579 L7.98735472,23.8360498 L7.98735472,5.63847536 L7.98735472,5.63847536 Z M51.0099024,28.0435062 L7.98735472,28.0435062 L7.98735472,25.4196612 L25.5502092,16.2529517 L29.4945142,18.9289014 L33.62808,16.2529517 L51.0099024,25.4196612 L51.0099024,28.0435062 L51.0099024,28.0435062 Z M51.0099024,23.8360498 L35.0406788,15.0433778 L51.0099024,4.33399641 L51.0099024,23.8360498 L51.0099024,23.8360498 Z" id="Shape"></path>
</g>
<path d="M122.854043,129.30192 L136.633029,115.826339 C138.246288,114.551596 141.818195,111.398948 140.204936,110.124394 C138.591676,108.848897 137.540503,109.651986 135.929629,110.927484 L117.43143,129.30192 C115.818171,130.576663 115.818171,132.14665 117.43143,133.421205 C117.43143,133.421205 138.913731,153.488866 140.204935,153.488866 C143.209997,153.488866 142.882164,151.667811 141.268905,150.393257 L122.854043,132.567034 L157.842523,132.567034 L181.224064,132.567034 L200.028364,132.567034 C202.308965,132.567034 203.778514,132.845699 203.778514,131.042579 C203.778514,129.239459 202.308964,129.30192 200.028364,129.30192 L122.854043,129.30192 Z" id="Shape-2" fill="#999647" transform="translate(160.000000, 131.484428) rotate(-315.000000) translate(-160.000000, -131.484428) "></path>
<path d="M488.5,252.5 L490,254" id="Line-4" stroke="#979797" stroke-width="0.722021661" stroke-linecap="square"></path>
<text id="https://javascript.i" font-family="OpenSans-Regular, Open Sans" font-size="10" font-weight="normal" fill="#FFFFFF">
<tspan x="19" y="73.9688567">https://javascript.info</tspan>
</text>
<g id="computer146" transform="translate(181.000000, 379.000000)" fill="#E8C48F">
<g id="Group">
<path d="M51.4122641,1 L2.41098553,1 C0.911369099,1 0,2.43823632 0,4.34538668 L0,45.7357984 C0,47.6429488 0.911369099,49.2876473 2.41098553,49.2876473 L23.6707411,49.2876473 L23.6707411,54.2182433 L23.6707411,54.4352035 L16.161612,54.4352035 C13.7727203,54.4352035 11.8339897,56.8917532 11.8339897,59.9151989 L11.8339897,61 L41.0557971,61 L41.0557971,59.9151989 C41.0557971,56.8882538 39.1170664,54.4352035 36.7281747,54.4352035 L29.2190457,54.4352035 L29.2190457,54.2182433 L29.2190457,49.2876473 L51.4122641,49.2876473 C52.9146423,49.2876473 54,47.6499475 54,45.7357984 L54,4.34188732 C53.9972383,2.43823632 52.9146423,1 51.4122641,1 L51.4122641,1 Z M47.9945122,38.5221471 C47.9945122,40.9941479 46.4441963,43 44.5152192,43 L8.47929296,43 C6.55854764,43 5,41.0012108 5,38.5221471 L5,12.4743215 C5,10.0023207 6.55580371,8 8.47929296,8 L44.5179631,8 C46.4387084,8 48,10.0023207 48,12.4743215 L48,38.5221471 L47.9945122,38.5221471 L47.9945122,38.5221471 Z" id="Shape"></path>
<path d="M63.5862135,3.11194047e-15 C60.5043562,3.11194047e-15 58,3.15336014 58,7.04600804 L58,61 L87,61 L87,5.49035037 C87,2.45611717 85.0509335,0 82.6520823,0 L63.5862135,0 L63.5862135,3.11194047e-15 Z M72.501456,54 C71.1153174,54 70,52.6543062 70,51 C70,49.3456938 71.1240536,48 72.501456,48 C73.8788585,48 75,49.3456938 75,51 C75,52.6543062 73.8759464,54 72.501456,54 L72.501456,54 Z M80,21.752 L64,21.752 L64,18 L80,18 L80,21.752 L80,21.752 Z M80,14.752 L64,14.752 L64,11 L80,11 L80,14.752 L80,14.752 Z" id="Shape"></path>
</g>
</g>
<path d="M242.854043,129.30192 L256.633029,115.826339 C258.246288,114.551596 261.818195,111.398948 260.204936,110.124394 C258.591676,108.848897 257.540503,109.651986 255.929629,110.927484 L237.43143,129.30192 C235.818171,130.576663 235.818171,132.14665 237.43143,133.421205 C237.43143,133.421205 258.913731,153.488866 260.204935,153.488866 C263.209997,153.488866 262.882164,151.667811 261.268905,150.393257 L242.854043,132.567034 L277.842523,132.567034 L301.224064,132.567034 L320.028364,132.567034 C322.308965,132.567034 323.778514,132.845699 323.778514,131.042579 C323.778514,129.239459 322.308964,129.30192 320.028364,129.30192 L242.854043,129.30192 Z" id="Shape-3" fill="#CB1E31" transform="translate(280.000000, 131.484428) scale(-1, 1) rotate(-315.000000) translate(-280.000000, -131.484428) "></path>
<g id="Shape-3-+-Oval-8-+-noun_25798_cc" transform="translate(223.144001, 318.146447) rotate(-225.000000) translate(-223.144001, -318.146447) translate(175.644001, 270.646447)" fill="#CB1E31">
<path d="M10.3696145,45.3019195 L24.1486006,31.8263394 C25.7618597,30.5515965 29.3337664,27.3989481 27.7205072,26.1243938 C26.107248,24.8488967 25.0560749,25.6519864 23.4452008,26.9274835 L4.94700183,45.3019201 C3.33374267,46.576663 3.33374272,48.1466503 4.94700187,49.4212046 C4.94700187,49.4212046 26.429303,69.4888665 27.7205068,69.4888665 C30.7255686,69.4888665 30.3977357,67.667811 28.7844765,66.3932567 L10.369615,48.5670341 L45.3580951,48.5670341 L68.7396358,48.5670341 L87.5439361,48.5670341 C89.8245369,48.5670341 91.2940859,48.8456989 91.2940859,47.0425789 C91.2940859,45.2394589 89.8245362,45.3019195 87.5439353,45.3019195 L10.3696145,45.3019195 Z" id="Shape-3" transform="translate(47.515572, 47.484428) scale(-1, 1) rotate(-315.000000) translate(-47.515572, -47.484428) "></path>
</g>
<g id="Shape-3-+-Oval-8-+-noun_25798_cc-2" transform="translate(352.468037, 219.146447) rotate(-315.000000) translate(-352.468037, -219.146447) translate(304.968037, 171.646447)" fill="#CB1E31">
<path d="M10.3696145,45.3019195 L24.1486006,31.8263394 C25.7618597,30.5515965 29.3337664,27.3989481 27.7205072,26.1243938 C26.107248,24.8488967 25.0560749,25.6519864 23.4452008,26.9274835 L4.94700183,45.3019201 C3.33374267,46.576663 3.33374272,48.1466503 4.94700187,49.4212046 C4.94700187,49.4212046 26.429303,69.4888665 27.7205068,69.4888665 C30.7255686,69.4888665 30.3977357,67.667811 28.7844765,66.3932567 L10.369615,48.5670341 L45.3580951,48.5670341 L68.7396358,48.5670341 L87.5439361,48.5670341 C89.8245369,48.5670341 91.2940859,48.8456989 91.2940859,47.0425789 C91.2940859,45.2394589 89.8245362,45.3019195 87.5439353,45.3019195 L10.3696145,45.3019195 Z" id="Shape-3" transform="translate(47.515572, 47.484428) scale(-1, 1) rotate(-315.000000) translate(-47.515572, -47.484428) "></path>
</g>
<g id="Oval-9-+-Shape" transform="translate(143.000000, 114.000000)">
<circle id="Oval-9" fill="#FFFFFF" cx="20" cy="20" r="20"></circle>
<path d="M19.7126904,6.27920345 C27.1393918,6.27920345 33.1807108,12.4134658 33.1807108,19.9544241 C33.1807108,27.4953824 27.1393918,33.6296448 19.7126904,33.6296448 C12.2859891,33.6296448 6.24467006,27.4953824 6.24467006,19.9544241 C6.24467006,12.4134658 12.2859891,6.27920345 19.7126904,6.27920345 L19.7126904,6.27920345 Z M19.7126904,4 C11.0343049,4 4,11.142525 4,19.9544241 C4,28.7663232 11.0343049,35.9088482 19.7126904,35.9088482 C28.3910759,35.9088482 35.4253808,28.7663232 35.4253808,19.9544241 C35.4253808,11.142525 28.3910759,4 19.7126904,4 L19.7126904,4 Z M15.2233503,11.9772121 C13.9826089,11.9772121 12.9786802,13.5085519 12.9786802,15.3960172 C12.9786802,17.2856906 13.9826791,18.8148224 15.2233503,18.8148224 C16.4640215,18.8148224 17.4680204,17.2856906 17.4680204,15.3960172 C17.4680204,13.5085519 16.4640917,11.9772121 15.2233503,11.9772121 L15.2233503,11.9772121 Z M24.2020305,11.9772121 C22.9612892,11.9772121 21.9573605,13.5085519 21.9573605,15.3960172 C21.9573605,17.2856906 22.9613593,18.8148224 24.2020305,18.8148224 C25.4427018,18.8148224 26.4467006,17.2856906 26.4467006,15.3960172 C26.4467006,13.5085519 25.4427719,11.9772121 24.2020305,11.9772121 L24.2020305,11.9772121 Z M29.7698645,22.5519326 C29.9430548,21.9487271 29.6010934,21.3166043 29.0048529,21.1385415 C28.4107869,20.9582708 27.7882417,21.3121884 27.6128768,21.9131146 C26.5957607,25.4565637 23.347162,27.9316362 19.7126904,27.9316362 C16.0782189,27.9316362 12.8296201,25.4565637 11.8113817,21.9131146 C11.6381913,21.3121171 11.0222398,20.9582708 10.4194056,21.1385415 C9.82428749,21.3166043 9.48337823,21.9487271 9.65656855,22.5519326 C10.9520939,27.0613366 15.0874776,30.2108396 19.7126904,30.2108396 C24.3379032,30.2108396 28.4721646,27.0613366 29.7698645,22.5519326 L29.7698645,22.5519326 Z" id="Shape" fill="#999647"></path>
</g>
<g id="Oval-9-+-Shape-2" transform="translate(143.000000, 114.000000)">
<circle id="Oval-9" fill="#FFFFFF" cx="20" cy="20" r="20"></circle>
<path d="M19.7126904,6.27920345 C27.1393918,6.27920345 33.1807108,12.4134658 33.1807108,19.9544241 C33.1807108,27.4953824 27.1393918,33.6296448 19.7126904,33.6296448 C12.2859891,33.6296448 6.24467006,27.4953824 6.24467006,19.9544241 C6.24467006,12.4134658 12.2859891,6.27920345 19.7126904,6.27920345 L19.7126904,6.27920345 Z M19.7126904,4 C11.0343049,4 4,11.142525 4,19.9544241 C4,28.7663232 11.0343049,35.9088482 19.7126904,35.9088482 C28.3910759,35.9088482 35.4253808,28.7663232 35.4253808,19.9544241 C35.4253808,11.142525 28.3910759,4 19.7126904,4 L19.7126904,4 Z M15.2233503,11.9772121 C13.9826089,11.9772121 12.9786802,13.5085519 12.9786802,15.3960172 C12.9786802,17.2856906 13.9826791,18.8148224 15.2233503,18.8148224 C16.4640215,18.8148224 17.4680204,17.2856906 17.4680204,15.3960172 C17.4680204,13.5085519 16.4640917,11.9772121 15.2233503,11.9772121 L15.2233503,11.9772121 Z M24.2020305,11.9772121 C22.9612892,11.9772121 21.9573605,13.5085519 21.9573605,15.3960172 C21.9573605,17.2856906 22.9613593,18.8148224 24.2020305,18.8148224 C25.4427018,18.8148224 26.4467006,17.2856906 26.4467006,15.3960172 C26.4467006,13.5085519 25.4427719,11.9772121 24.2020305,11.9772121 L24.2020305,11.9772121 Z M29.7698645,22.5519326 C29.9430548,21.9487271 29.6010934,21.3166043 29.0048529,21.1385415 C28.4107869,20.9582708 27.7882417,21.3121884 27.6128768,21.9131146 C26.5957607,25.4565637 23.347162,27.9316362 19.7126904,27.9316362 C16.0782189,27.9316362 12.8296201,25.4565637 11.8113817,21.9131146 C11.6381913,21.3121171 11.0222398,20.9582708 10.4194056,21.1385415 C9.82428749,21.3166043 9.48337823,21.9487271 9.65656855,22.5519326 C10.9520939,27.0613366 15.0874776,30.2108396 19.7126904,30.2108396 C24.3379032,30.2108396 28.4721646,27.0613366 29.7698645,22.5519326 L29.7698645,22.5519326 Z" id="Shape" fill="#999647"></path>
</g>
<g id="Oval-9-+-Shape-2" transform="translate(257.000000, 114.000000)">
<circle id="Oval-9" fill="#FFFFFF" cx="20" cy="20" r="20"></circle>
<g id="Oval-12-+-Shape-3" transform="translate(4.000000, 4.000000)" fill="#CB1E31">
<path d="M16.0000272,2.53200679 C23.4267285,2.53200679 29.4680475,8.57332582 29.4680475,16.0000272 C29.4680475,23.4267285 23.4267285,29.4680475 16.0000272,29.4680475 C8.57332582,29.4680475 2.53200679,23.4267285 2.53200679,16.0000272 C2.53200679,8.57332582 8.57332582,2.53200679 16.0000272,2.53200679 L16.0000272,2.53200679 Z M16.0000272,0.287336727 C7.32164168,0.287336727 0.287336727,7.32164168 0.287336727,16.0000272 C0.287336727,24.6784126 7.32164168,31.7127176 16.0000272,31.7127176 C24.6784126,31.7127176 31.7127176,24.6784126 31.7127176,16.0000272 C31.7127176,7.32164168 24.6784126,0.287336727 16.0000272,0.287336727 L16.0000272,0.287336727 Z M11.510687,8.14368194 C10.2699457,8.14368194 9.26601697,9.65181964 9.26601697,11.510687 C9.26601697,13.3717289 10.2700158,14.8776921 11.510687,14.8776921 C12.7513583,14.8776921 13.7553571,13.3717289 13.7553571,11.510687 C13.7553571,9.65181964 12.7514284,8.14368194 11.510687,8.14368194 L11.510687,8.14368194 Z M20.4893673,8.14368194 C19.2486259,8.14368194 18.2446972,9.65181964 18.2446972,11.510687 C18.2446972,13.3717289 19.248696,14.8776921 20.4893673,14.8776921 C21.7300385,14.8776921 22.7340373,13.3717289 22.7340373,11.510687 C22.7340373,9.65181964 21.7301086,8.14368194 20.4893673,8.14368194 L20.4893673,8.14368194 Z M25.6516875,23.6328173 C26.1471283,23.2601319 26.247928,22.556498 25.8774873,22.0611273 C23.5560776,18.9681123 19.8646475,17.1223622 16.0000272,17.1223622 C12.1354068,17.1223622 8.44292452,18.9681123 6.12368932,22.0610572 C5.75100395,22.556498 5.85187381,23.2601319 6.34731458,23.6327471 C6.84380754,24.0031878 7.54638927,23.9023881 7.9190045,23.4069473 C9.81729391,20.8773445 12.8379885,19.3670322 16.0000272,19.3670322 C19.1610136,19.3670322 22.1838126,20.8773445 24.0799976,23.4070175 C24.3013782,23.7007185 24.6389205,23.8563724 24.9787074,23.8563724 C25.2132754,23.8563724 25.450018,23.7840519 25.6516875,23.6328173 L25.6516875,23.6328173 Z" id="Shape"></path>
</g>
</g>
<g id="Oval-9-+-Shape-3" transform="translate(327.000000, 198.000000)">
<circle id="Oval-9" fill="#FFFFFF" cx="20" cy="20" r="20"></circle>
<g id="Oval-12-+-Shape-3" transform="translate(4.000000, 4.000000)" fill="#CB1E31">
<path d="M16.0000272,2.53200679 C23.4267285,2.53200679 29.4680475,8.57332582 29.4680475,16.0000272 C29.4680475,23.4267285 23.4267285,29.4680475 16.0000272,29.4680475 C8.57332582,29.4680475 2.53200679,23.4267285 2.53200679,16.0000272 C2.53200679,8.57332582 8.57332582,2.53200679 16.0000272,2.53200679 L16.0000272,2.53200679 Z M16.0000272,0.287336727 C7.32164168,0.287336727 0.287336727,7.32164168 0.287336727,16.0000272 C0.287336727,24.6784126 7.32164168,31.7127176 16.0000272,31.7127176 C24.6784126,31.7127176 31.7127176,24.6784126 31.7127176,16.0000272 C31.7127176,7.32164168 24.6784126,0.287336727 16.0000272,0.287336727 L16.0000272,0.287336727 Z M11.510687,8.14368194 C10.2699457,8.14368194 9.26601697,9.65181964 9.26601697,11.510687 C9.26601697,13.3717289 10.2700158,14.8776921 11.510687,14.8776921 C12.7513583,14.8776921 13.7553571,13.3717289 13.7553571,11.510687 C13.7553571,9.65181964 12.7514284,8.14368194 11.510687,8.14368194 L11.510687,8.14368194 Z M20.4893673,8.14368194 C19.2486259,8.14368194 18.2446972,9.65181964 18.2446972,11.510687 C18.2446972,13.3717289 19.248696,14.8776921 20.4893673,14.8776921 C21.7300385,14.8776921 22.7340373,13.3717289 22.7340373,11.510687 C22.7340373,9.65181964 21.7301086,8.14368194 20.4893673,8.14368194 L20.4893673,8.14368194 Z M25.6516875,23.6328173 C26.1471283,23.2601319 26.247928,22.556498 25.8774873,22.0611273 C23.5560776,18.9681123 19.8646475,17.1223622 16.0000272,17.1223622 C12.1354068,17.1223622 8.44292452,18.9681123 6.12368932,22.0610572 C5.75100395,22.556498 5.85187381,23.2601319 6.34731458,23.6327471 C6.84380754,24.0031878 7.54638927,23.9023881 7.9190045,23.4069473 C9.81729391,20.8773445 12.8379885,19.3670322 16.0000272,19.3670322 C19.1610136,19.3670322 22.1838126,20.8773445 24.0799976,23.4070175 C24.3013782,23.7007185 24.6389205,23.8563724 24.9787074,23.8563724 C25.2132754,23.8563724 25.450018,23.7840519 25.6516875,23.6328173 L25.6516875,23.6328173 Z" id="Shape"></path>
</g>
</g>
<g id="Oval-9-+-Shape-3" transform="translate(203.000000, 293.000000)">
<circle id="Oval-9" fill="#FFFFFF" cx="20" cy="20" r="20"></circle>
<g id="Oval-12-+-Shape-3" transform="translate(4.000000, 4.000000)" fill="#CB1E31">
<path d="M16.0000272,2.53200679 C23.4267285,2.53200679 29.4680475,8.57332582 29.4680475,16.0000272 C29.4680475,23.4267285 23.4267285,29.4680475 16.0000272,29.4680475 C8.57332582,29.4680475 2.53200679,23.4267285 2.53200679,16.0000272 C2.53200679,8.57332582 8.57332582,2.53200679 16.0000272,2.53200679 L16.0000272,2.53200679 Z M16.0000272,0.287336727 C7.32164168,0.287336727 0.287336727,7.32164168 0.287336727,16.0000272 C0.287336727,24.6784126 7.32164168,31.7127176 16.0000272,31.7127176 C24.6784126,31.7127176 31.7127176,24.6784126 31.7127176,16.0000272 C31.7127176,7.32164168 24.6784126,0.287336727 16.0000272,0.287336727 L16.0000272,0.287336727 Z M11.510687,8.14368194 C10.2699457,8.14368194 9.26601697,9.65181964 9.26601697,11.510687 C9.26601697,13.3717289 10.2700158,14.8776921 11.510687,14.8776921 C12.7513583,14.8776921 13.7553571,13.3717289 13.7553571,11.510687 C13.7553571,9.65181964 12.7514284,8.14368194 11.510687,8.14368194 L11.510687,8.14368194 Z M20.4893673,8.14368194 C19.2486259,8.14368194 18.2446972,9.65181964 18.2446972,11.510687 C18.2446972,13.3717289 19.248696,14.8776921 20.4893673,14.8776921 C21.7300385,14.8776921 22.7340373,13.3717289 22.7340373,11.510687 C22.7340373,9.65181964 21.7301086,8.14368194 20.4893673,8.14368194 L20.4893673,8.14368194 Z M25.6516875,23.6328173 C26.1471283,23.2601319 26.247928,22.556498 25.8774873,22.0611273 C23.5560776,18.9681123 19.8646475,17.1223622 16.0000272,17.1223622 C12.1354068,17.1223622 8.44292452,18.9681123 6.12368932,22.0610572 C5.75100395,22.556498 5.85187381,23.2601319 6.34731458,23.6327471 C6.84380754,24.0031878 7.54638927,23.9023881 7.9190045,23.4069473 C9.81729391,20.8773445 12.8379885,19.3670322 16.0000272,19.3670322 C19.1610136,19.3670322 22.1838126,20.8773445 24.0799976,23.4070175 C24.3013782,23.7007185 24.6389205,23.8563724 24.9787074,23.8563724 C25.2132754,23.8563724 25.450018,23.7840519 25.6516875,23.6328173 L25.6516875,23.6328173 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
1-js/01-getting-started/1-intro/limitations@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 83 KiB

4
1-js/02-first-steps/04-variables/article.md
View file

@ -99,7 +99,7 @@ We can easily grasp the concept of a "variable" if we imagine it as a "box" for
For instance, the variable `message` can be imagined as a box labeled `"message"` with the value `"Hello!"` in it: For instance, the variable `message` can be imagined as a box labeled `"message"` with the value `"Hello!"` in it:
![](variable.png) ![](variable.svg)
We can put any value in the box. We can put any value in the box.
@ -116,7 +116,7 @@ alert(message);
When the value is changed, the old data is removed from the variable: When the value is changed, the old data is removed from the variable:
![](variable-change.png) ![](variable-change.svg)
We can also declare two variables and copy data from one into the other. We can also declare two variables and copy data from one into the other.

BIN
1-js/02-first-steps/04-variables/variable-change.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

37
1-js/02-first-steps/04-variables/variable-change.svg Normal file
View file

@ -0,0 +1,37 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="392px" height="192px" viewBox="0 0 392 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>variable-change.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-change.svg">
<g id="noun_1211_cc" transform="translate(52.000000, -5.000000)">
<path d="M25,94.1960457 L137.557785,94.1960457 L137.557785,137.145664 C137.557785,137.518573 137.479295,138.008386 137.279367,138.440486 C137.07944,138.872587 120.704625,174 120.704625,174 L120.704625,119.63967 L137.559266,94.1960457 L156,66 L43.4407339,66 L25,94.1960457 L25,94.1960457 Z" id="Shape" fill="#E8C48F"></path>
<polyline id="Shape" fill="#E8C48F" points="25 123 25 95 10 123"></polyline>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(0.000000, 57.000000)">
<path d="M18.8613371,1.80856046 L1.99871056,17.5332141 L55.1386629,74.5188362 L72.0012894,58.7941826 L18.8613371,1.80856046 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;World!&quot;" transform="translate(40.081064, 39.767828) rotate(47.000000) translate(-40.081064, -39.767828) " font-family="OpenSans-SemiBold, Open Sans" font-size="14" font-weight="500" line-spacing="17" fill="#8A704D">
<tspan x="10.5885761" y="46.2678284">"World!"</tspan>
</text>
</g>
<g id="Rectangle-5-+-&quot;World!&quot;-2" transform="translate(139.643781, 49.254803) rotate(293.000000) translate(-139.643781, -49.254803) translate(102.643781, 11.254803)">
<path d="M18.8613371,1.80856046 L1.99871056,17.5332141 L55.1386629,74.5188362 L72.0012894,58.7941826 L18.8613371,1.80856046 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Hello!&quot;" transform="translate(40.081064, 39.767828) rotate(47.000000) translate(-40.081064, -39.767828) " font-family="OpenSans-SemiBold, Open Sans" font-size="14" font-weight="500" line-spacing="17" fill="#8A704D">
<tspan x="10.5885761" y="46.2678284">"Hello!"</tspan>
</text>
</g>
<path d="M8,125 L8,179.729971 C8,183.150501 9.4836395,185 12.387122,185 L112.473443,185 C115.59502,185 118,182.4521 118,181.524372 L118,125 L8,125 L8,125 Z" id="Shape" fill="#E8C48F"></path>
</g>
<text id="message" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="77" y="157">message</tspan>
</text>
<path d="M58.1116321,51.8083441 C58.1116321,51.8083441 47.657459,40.6232618 40.718887,36.1553077 C40.5505125,38.0030849 40.3826205,39.8498971 40.2142461,41.6967094 C28.8419738,40.6618577 17.2921606,42.1936311 6.44527455,46.2920298 C7.83472576,49.9697335 9.22417698,53.6469547 10.6136282,57.324176 C19.7782168,53.8616442 29.5366994,52.5677178 39.1451405,53.4419142 C38.9767661,55.2896913 38.8083916,57.1365036 38.6404996,58.9837982 C44.221462,55.6553872 58.1116321,51.8083441 58.1116321,51.8083441" id="Fill-54" fill="#E8C48F" transform="translate(32.278453, 47.569553) rotate(11.000000) translate(-32.278453, -47.569553) "></path>
<path d="M287.796688,28.1860236 C287.796688,28.1860236 277.342515,17.0009413 270.403943,12.5329872 C270.235568,14.3807644 270.067676,16.2275766 269.899302,18.0743889 C258.527029,17.0395372 246.977216,18.5713106 236.13033,22.6697093 C237.519781,26.347413 238.909232,30.0246342 240.298684,33.7018555 C249.463272,30.2393237 259.221755,28.9453973 268.830196,29.8195937 C268.661822,31.6673708 268.493447,33.5141831 268.325555,35.3614778 C273.906517,32.0330667 287.796688,28.1860236 287.796688,28.1860236" id="Fill-54" fill="#E8C48F" transform="translate(261.963509, 23.947232) rotate(2.000000) translate(-261.963509, -23.947232) "></path>
<g id="noun_48910_cc" transform="translate(298.000000, 5.000000)">
<path d="M50.9827143,6 L36.0161055,6 C35.4567164,6 35,6.62621359 35,7.39482201 L35,12 L52,12 L52,7.39482201 C52,6.62621359 51.5432836,6 50.9827143,6 L50.9827143,6 Z" id="Shape"></path>
<path d="M84.1925988,9.36030059 L57.803165,9.36030059 L57.803165,6.08482838 C57.803165,2.72879291 54.9894635,0 51.5275421,0 L36.4712707,0 C33.0105365,0 30.1956478,2.72879291 30.1956478,6.08482838 L30.1956478,9.36030059 L3.80740121,9.36030059 C1.70484195,9.36030059 0,11.0118475 0,13.0500982 L0,13.3102024 C0,15.348453 1.70484195,17 3.80740121,17 L84.1925988,17 C86.295158,17 88,15.348453 88,13.3102024 L88,13.0500982 C88,11.0118475 86.2939708,9.36030059 84.1925988,9.36030059 L84.1925988,9.36030059 Z M53,12 L36,12 L36,7.39482201 C36,6.62621359 36.4567164,6 37.0161055,6 L51.9838945,6 C52.5444637,6 53,6.62621359 53,7.39482201 L53,12 L53,12 Z" id="Shape" fill="#E8C48F"></path>
<path d="M74.9552359,20.0447289 L8.04358113,20.0447289 C4.15387761,20.0447289 1,19.3642794 1,23.3113665 L6.28209435,101.692668 C6.28209435,105.636155 9.43715496,109 13.3268585,109 L69.6743245,109 C73.564028,109 76.7179057,105.636155 76.7179057,101.692668 L82,23.3113665 C81.998817,19.3642794 78.8449394,20.0447289 74.9552359,20.0447289 L74.9552359,20.0447289 Z M26.7566501,98.9987039 C25.4744903,99.0375373 24.4044574,98.1989795 24.361495,97.1213538 L22.0012467,36.0255616 C21.9596269,34.947936 22.9652161,34.0414198 24.2433483,34.0013729 C25.5255081,33.961326 26.595541,34.8023109 26.6385035,35.8799365 L28.9987517,96.9757287 C29.0403715,98.0521408 28.0361248,98.9598706 26.7566501,98.9987039 L26.7566501,98.9987039 Z M43,97.0485689 C43,98.1255551 42.328125,99 41.5,99 C40.671875,99 40,98.1243423 40,97.0485689 L40,35.9514311 C40,34.8732321 40.671875,34 41.5,34 C42.328125,34 43,34.8732321 43,35.9514311 L43,97.0485689 L43,97.0485689 Z M61.6385051,97.1213889 C61.5968852,98.1989944 60.5255097,99.0375366 59.2433499,98.9987039 C57.9638752,98.9598713 56.9596285,98.0521585 57.0012483,96.974553 L59.3614965,35.8799014 C59.4031164,34.8022959 60.4731493,33.9613267 61.7553091,34.0013729 C63.0347839,34.0426325 64.0403731,34.9479183 63.9987533,36.0255238 L61.6385051,97.1213889 L61.6385051,97.1213889 Z" id="Shape" fill="#E8C48F"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
1-js/02-first-steps/04-variables/variable-change@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 42 KiB

BIN
1-js/02-first-steps/04-variables/variable.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.4 KiB

26
1-js/02-first-steps/04-variables/variable.svg Normal file
View file

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="166px" height="145px" viewBox="0 0 166 145" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>variable.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable.svg">
<g id="noun_1211_cc-+-Message" transform="translate(13.000000, 3.000000)">
<g id="noun_1211_cc">
<path d="M17,37.1960457 L129.557785,37.1960457 L129.557785,80.1456641 C129.557785,80.5185728 129.479295,81.0083855 129.279367,81.4404861 C129.07944,81.8725868 112.704625,117 112.704625,117 L112.704625,62.6396695 L129.559266,37.1960457 L148,9 L35.4407339,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F"></path>
<polyline id="Shape" fill="#E8C48F" points="17 66 17 38 2 66"></polyline>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M18.8613371,1.80856046 L1.99871056,17.5332141 L55.1386629,74.5188362 L72.0012894,58.7941826 L18.8613371,1.80856046 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Hello!&quot;" transform="translate(40.081064, 39.767828) rotate(47.000000) translate(-40.081064, -39.767828) " font-family="OpenSans-SemiBold, Open Sans" font-size="14" font-weight="500" line-spacing="17" fill="#8A704D">
<tspan x="10.5885761" y="46.2678284">"Hello!"</tspan>
</text>
</g>
<path d="M0,68 L0,122.729971 C0,126.150501 1.4836395,128 4.38712201,128 L104.473443,128 C107.59502,128 110,125.4521 110,124.524372 L110,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F"></path>
</g>
<text id="message" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="17" y="105">message</tspan>
</text>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
1-js/02-first-steps/04-variables/variable@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

2
1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg
View file

@ -10,7 +10,7 @@
<g id="Rectangle-1-+-Корень" transform="translate(180.000000, 4.000000)"> <g id="Rectangle-1-+-Корень" transform="translate(180.000000, 4.000000)">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="1" y="1" width="78" height="28" rx="14"></rect> <rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="1" y="1" width="78" height="28" rx="14"></rect>
<text id="Begin" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D"> <text id="Begin" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="17" y="19">Begin</tspan> <tspan x="21" y="20">Begin</tspan>
</text> </text>
</g> </g>
<g id="Rectangle-1-+-Корень-Copy-2" transform="translate(0.000000, 243.000000)"> <g id="Rectangle-1-+-Корень-Copy-2" transform="translate(0.000000, 243.000000)">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

Before After
Before After

4
1-js/03-code-quality/01-debugging-chrome/article.md
View file

@ -22,7 +22,7 @@ The toggler button <span class="devtools" style="background-position:-168px -76p
Let's click it and select `hello.js` in the tree view. Here's what should show up: Let's click it and select `hello.js` in the tree view. Here's what should show up:
![](chrome-tabs.png) ![](chrome-tabs.svg)
Here we can see three zones: Here we can see three zones:
@ -40,7 +40,7 @@ After a statement is executed, its result is shown below.
For example, here `1+2` results in `3`, and `hello("debugger")` returns nothing, so the result is `undefined`: For example, here `1+2` results in `3`, and `hello("debugger")` returns nothing, so the result is `undefined`:
![](chrome-sources-console.png) ![](chrome-sources-console.svg)
## Breakpoints ## Breakpoints

BIN
1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 31 KiB

14
1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 177 KiB

BIN
1-js/03-code-quality/01-debugging-chrome/chrome-sources-console@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 60 KiB

BIN
1-js/03-code-quality/01-debugging-chrome/chrome-tabs.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 72 KiB

55
1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 175 KiB

BIN
1-js/03-code-quality/01-debugging-chrome/chrome-tabs@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 134 KiB

6
1-js/03-code-quality/03-comments/article.md
View file

@ -4,7 +4,7 @@ As we know from the chapter <info:structure>, comments can be single-line: start
We normally use them to describe how and why the code works. We normally use them to describe how and why the code works.
At first sight, commenting might be obvious, but novices in programming usually get it wrong. At first sight, commenting might be obvious, but novices in programming often use them wrongly.
## Bad comments ## Bad comments
@ -120,9 +120,9 @@ In reality, we can't totally avoid "explanatory" comments. There are complex alg
So, explanatory comments are usually bad. Which comments are good? So, explanatory comments are usually bad. Which comments are good?
Describe the architecture Describe the architecture
: Provide a high-level overview of components, how they interact, what's the control flow in various situations... In short -- the bird's eye view of the code. There's a special diagram language [UML](http://wikipedia.org/wiki/Unified_Modeling_Language) for high-level architecture diagrams. Definitely worth studying. : Provide a high-level overview of components, how they interact, what's the control flow in various situations... In short -- the bird's eye view of the code. There's a special language [UML](http://wikipedia.org/wiki/Unified_Modeling_Language) to build high-level architecture diagrams explaining the code. Definitely worth studying.
Document a function usage Document function parameters and usage
: There's a special syntax [JSDoc](http://en.wikipedia.org/wiki/JSDoc) to document a function: usage, parameters, returned value. : There's a special syntax [JSDoc](http://en.wikipedia.org/wiki/JSDoc) to document a function: usage, parameters, returned value.
For instance: For instance:

25
1-js/03-code-quality/05-testing-mocha/article.md
View file

@ -18,15 +18,15 @@ For instance, we're creating a function `f`. Wrote some code, testing: `f(1)` wo
That's very typical. When we develop something, we keep a lot of possible use cases in mind. But it's hard to expect a programmer to check all of them manually after every change. So it becomes easy to fix one thing and break another one. That's very typical. When we develop something, we keep a lot of possible use cases in mind. But it's hard to expect a programmer to check all of them manually after every change. So it becomes easy to fix one thing and break another one.
**Automated testing means that tests are written separately, in addition to the code. They can be executed automatically and check all the main use cases.** **Automated testing means that tests are written separately, in addition to the code. They run our functions in various ways and compare results with the expected.**
## Behavior Driven Development (BDD) ## Behavior Driven Development (BDD)
Let's use a technique named [Behavior Driven Development](http://en.wikipedia.org/wiki/Behavior-driven_development) or, in short, BDD. That approach is used among many projects. BDD is not just about testing. That's more. Let's start with a technique named [Behavior Driven Development](http://en.wikipedia.org/wiki/Behavior-driven_development) or, in short, BDD.
**BDD is three things in one: tests AND documentation AND examples.** **BDD is three things in one: tests AND documentation AND examples.**
Let's see the example. To understand BDD, we'll examine a practical case of development.
## Development of "pow": the spec ## Development of "pow": the spec
@ -36,7 +36,7 @@ That task is just an example: there's the `**` operator in JavaScript that can d
Before creating the code of `pow`, we can imagine what the function should do and describe it. Before creating the code of `pow`, we can imagine what the function should do and describe it.
Such description is called a *specification* or, in short, a spec, and looks like this: Such description is called a *specification* or, in short, a spec, and contains descriptions of use cases together with tests for them, like this:
```js ```js
describe("pow", function() { describe("pow", function() {
@ -51,7 +51,7 @@ describe("pow", function() {
A spec has three main building blocks that you can see above: A spec has three main building blocks that you can see above:
`describe("title", function() { ... })` `describe("title", function() { ... })`
: What functionality we're describing. Uses to group "workers" -- the `it` blocks. In our case we're describing the function `pow`. : What functionality we're describing. In our case we're describing the function `pow`. Used to group "workers" -- the `it` blocks.
`it("use case description", function() { ... })` `it("use case description", function() { ... })`
: In the title of `it` we *in a human-readable way* describe the particular use case, and the second argument is a function that tests it. : In the title of `it` we *in a human-readable way* describe the particular use case, and the second argument is a function that tests it.
@ -59,9 +59,9 @@ A spec has three main building blocks that you can see above:
`assert.equal(value1, value2)` `assert.equal(value1, value2)`
: The code inside `it` block, if the implementation is correct, should execute without errors. : The code inside `it` block, if the implementation is correct, should execute without errors.
Functions `assert.*` are used to check whether `pow` works as expected. Right here we're using one of them -- `assert.equal`, it compares arguments and yields an error if they are not equal. Here it checks that the result of `pow(2, 3)` equals `8`. Functions `assert.*` are used to check whether `pow` works as expected. Right here we're using one of them -- `assert.equal`, it compares arguments and yields an error if they are not equal. Here it checks that the result of `pow(2, 3)` equals `8`. There are other types of comparisons and checks, that we'll add later.
There are other types of comparisons and checks that we'll see further. The specification can be executed, and it will run the test specified in `it` block. We'll see that later.
## The development flow ## The development flow
@ -79,7 +79,7 @@ So, the development is *iterative*. We write the spec, implement it, make sure t
Let's see this development flow in our practical case. Let's see this development flow in our practical case.
The first step is complete: we have an initial spec for `pow`. Now, before making the implementaton, let's use few JavaScript libraries to run the tests, just to see that they are working (they will all fail). The first step is already complete: we have an initial spec for `pow`. Now, before making the implementaton, let's use few JavaScript libraries to run the tests, just to see that they are working (they will all fail).
## The spec in action ## The spec in action
@ -336,10 +336,9 @@ The result with new tests:
The newly added tests fail, because our implementation does not support them. That's how BDD is done: first we write failing tests, and then make an implementation for them. The newly added tests fail, because our implementation does not support them. That's how BDD is done: first we write failing tests, and then make an implementation for them.
```smart header="Other assertions" ```smart header="Other assertions"
Please note the assertion `assert.isNaN`: it checks for `NaN`. Please note the assertion `assert.isNaN`: it checks for `NaN`.
There are other assertions in Chai as well, for instance: There are other assertions in [Chai](http://chaijs.com) as well, for instance:
- `assert.equal(value1, value2)` -- checks the equality `value1 == value2`. - `assert.equal(value1, value2)` -- checks the equality `value1 == value2`.
- `assert.strictEqual(value1, value2)` -- checks the strict equality `value1 === value2`. - `assert.strictEqual(value1, value2)` -- checks the strict equality `value1 === value2`.
@ -380,9 +379,9 @@ In BDD, the spec goes first, followed by implementation. At the end we have both
The spec can be used in three ways: The spec can be used in three ways:
1. **Tests** guarantee that the code works correctly. 1. As **Tests** - they guarantee that the code works correctly.
2. **Docs** -- the titles of `describe` and `it` tell what the function does. 2. As **Docs** -- the titles of `describe` and `it` tell what the function does.
3. **Examples** -- the tests are actually working examples showing how a function can be used. 3. As **Examples** -- the tests are actually working examples showing how a function can be used.
With the spec, we can safely improve, change, even rewrite the function from scratch and make sure it still works right. With the spec, we can safely improve, change, even rewrite the function from scratch and make sure it still works right.

4
1-js/03-code-quality/06-polyfills/article.md
View file

@ -29,8 +29,8 @@ Actually, there are two parts in Babel:
A script that updates/adds new functions is called "polyfill". It "fills in" the gap and adds missing implementations. A script that updates/adds new functions is called "polyfill". It "fills in" the gap and adds missing implementations.
Two interesting polyfills are: Two interesting polyfills are:
- [babel polyfill](https://babeljs.io/docs/usage/polyfill/) that supports a lot, but is big. - [core js](https://github.com/zloirock/core-js) that supports a lot, allows to include only needed features.
- [polyfill.io](http://polyfill.io) service that allows to load/construct polyfills on-demand, depending on the features we need. - [polyfill.io](http://polyfill.io) service that provides a script with polyfills, depending on the features and user's browser.
So, if we're going to use modern language features, a transpiler and a polyfill are necessary. So, if we're going to use modern language features, a transpiler and a polyfill are necessary.

18
1-js/04-object-basics/01-object/article.md
View file

@ -9,7 +9,7 @@ An object can be created with figure brackets `{…}` with an optional list of *
We can imagine an object as a cabinet with signed files. Every piece of data is stored in its file by the key. It's easy to find a file by its name or add/remove a file. We can imagine an object as a cabinet with signed files. Every piece of data is stored in its file by the key. It's easy to find a file by its name or add/remove a file.
![](object.png) ![](object.svg)
An empty object ("empty cabinet") can be created using one of two syntaxes: An empty object ("empty cabinet") can be created using one of two syntaxes:
@ -18,7 +18,7 @@ let user = new Object(); // "object constructor" syntax
let user = {}; // "object literal" syntax let user = {}; // "object literal" syntax
``` ```
![](object-user-empty.png) ![](object-user-empty.svg)
Usually, the figure brackets `{...}` are used. That declaration is called an *object literal*. Usually, the figure brackets `{...}` are used. That declaration is called an *object literal*.
@ -42,7 +42,7 @@ In the `user` object, there are two properties:
The resulting `user` object can be imagined as a cabinet with two signed files labeled "name" and "age". The resulting `user` object can be imagined as a cabinet with two signed files labeled "name" and "age".
![user object](object-user.png) ![user object](object-user.svg)
We can add, remove and read files from it any time. We can add, remove and read files from it any time.
@ -60,7 +60,7 @@ The value can be of any type. Let's add a boolean one:
user.isAdmin = true; user.isAdmin = true;
``` ```
![user object 2](object-user-isadmin.png) ![user object 2](object-user-isadmin.svg)
To remove a property, we can use `delete` operator: To remove a property, we can use `delete` operator:
@ -68,7 +68,7 @@ To remove a property, we can use `delete` operator:
delete user.age; delete user.age;
``` ```
![user object 3](object-user-delete.png) ![user object 3](object-user-delete.svg)
We can also use multiword property names, but then they must be quoted: We can also use multiword property names, but then they must be quoted:
@ -80,7 +80,7 @@ let user = {
}; };
``` ```
![](object-user-props.png) ![](object-user-props.svg)
The last property in the list may end with a comma: The last property in the list may end with a comma:
@ -474,7 +474,7 @@ let phrase = message;
As a result we have two independent variables, each one is storing the string `"Hello!"`. As a result we have two independent variables, each one is storing the string `"Hello!"`.
![](variable-copy-value.png) ![](variable-copy-value.svg)
Objects are not like that. Objects are not like that.
@ -488,7 +488,7 @@ let user = {
}; };
``` ```
![](variable-contains-reference.png) ![](variable-contains-reference.svg)
Here, the object is stored somewhere in memory. And the variable `user` has a "reference" to it. Here, the object is stored somewhere in memory. And the variable `user` has a "reference" to it.
@ -506,7 +506,7 @@ let admin = user; // copy the reference
Now we have two variables, each one with the reference to the same object: Now we have two variables, each one with the reference to the same object:
![](variable-copy-reference.png) ![](variable-copy-reference.svg)
We can use any variable to access the cabinet and modify its contents: We can use any variable to access the cabinet and modify its contents:

BIN
1-js/04-object-basics/01-object/object-user-delete.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.3 KiB

36
1-js/04-object-basics/01-object/object-user-delete.svg Normal file
View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="173px" viewBox="0 0 248 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>object-user-delete.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user-delete.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="173"></rect>
<path d="M127.93675,101 L111.270083,121 L241.729917,121 L225.06325,101 L127.93675,101 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(141.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 42.858871) rotate(-90.000000) translate(-15.500000, -42.858871) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-1.3" y="47.358871">name</tspan>
</text>
</g>
<g id="Group-2-Copy-2" transform="translate(179.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="isAdmin" transform="translate(14.500000, 41.653226) rotate(-90.000000) translate(-14.500000, -41.653226) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-14.9" y="46.1532258">isAdmin</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="109" y="115" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="164.5" y="135.5" width="25" height="10"></rect>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="9" y="145">user</tspan>
</text>
<path id="Line-8" d="M75.5,142 L49,142 L49,139 L75.5,139 L75.5,131 L94.5,140.5 L75.5,150 L75.5,142 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
1-js/04-object-basics/01-object/object-user-delete@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
1-js/04-object-basics/01-object/object-user-empty.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.9 KiB

21
1-js/04-object-basics/01-object/object-user-empty.svg Normal file
View file

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="92px" viewBox="0 0 248 92" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>object-user-empty.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user-empty.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="92"></rect>
<path d="M123.93675,12 L107.270083,32 L237.729917,32 L221.06325,12 L123.93675,12 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="105" y="26" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="160.5" y="46.5" width="25" height="10"></rect>
<text id="empty" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#9B9B9B">
<tspan x="151" y="22">empty</tspan>
</text>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="4" y="56">user</tspan>
</text>
<path id="Line-8" d="M70.5,53 L44,53 L44,50 L70.5,50 L70.5,42 L89.5,51.5 L70.5,61 L70.5,53 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
1-js/04-object-basics/01-object/object-user-empty@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.5 KiB

BIN
1-js/04-object-basics/01-object/object-user-isadmin.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.8 KiB

45
1-js/04-object-basics/01-object/object-user-isadmin.svg Normal file
View file

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="173px" viewBox="0 0 248 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>object-user-isadmin.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user-isadmin.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="173"></rect>
<path d="M127.93675,101 L111.270083,121 L241.729917,121 L225.06325,101 L127.93675,101 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(125.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 42.858871) rotate(-90.000000) translate(-15.500000, -42.858871) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-1.3" y="47.358871">name</tspan>
</text>
</g>
<g id="Group-2-Copy" transform="translate(162.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="age" transform="translate(14.500000, 41.653226) rotate(-90.000000) translate(-14.500000, -41.653226) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="1.9" y="46.1532258">age</tspan>
</text>
</g>
<g id="Group-2-Copy-2" transform="translate(199.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="isAdmin" transform="translate(14.500000, 41.653226) rotate(-90.000000) translate(-14.500000, -41.653226) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-14.9" y="46.1532258">isAdmin</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="109" y="115" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="164.5" y="135.5" width="25" height="10"></rect>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="12" y="145">user</tspan>
</text>
<path id="Line-8" d="M78.5,142 L52,142 L52,139 L78.5,139 L78.5,131 L97.5,140.5 L78.5,150 L78.5,142 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
1-js/04-object-basics/01-object/object-user-isadmin@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
1-js/04-object-basics/01-object/object-user-props.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.1 KiB

45
1-js/04-object-basics/01-object/object-user-props.svg Normal file
View file

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="215px" viewBox="0 0 248 215" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>object-user-props.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user-props.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="215"></rect>
<path d="M127.93675,143 L111.270083,163 L241.729917,163 L225.06325,143 L127.93675,143 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(124.000000, 3.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="157"></rect>
<path d="M0,0 L32,0 L32,157 L0,157 L0,0 Z M16.5,145.604839 C20.6421356,145.604839 24,141.353349 24,136.108871 C24,130.864393 20.6421356,126.612903 16.5,126.612903 C12.3578644,126.612903 9,130.864393 9,136.108871 C9,141.353349 12.3578644,145.604839 16.5,145.604839 Z M4,6.33064516 L4,116.483871 L28,116.483871 L28,6.33064516 L4,6.33064516 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 60.141129) rotate(-90.000000) translate(-15.500000, -60.141129) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="62.7459677">name</tspan>
</text>
</g>
<g id="Group-2-Copy" transform="translate(161.000000, 3.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="157"></rect>
<path d="M0,0 L32,0 L32,157 L0,157 L0,0 Z M16.5,145.604839 C20.6421356,145.604839 24,141.353349 24,136.108871 C24,130.864393 20.6421356,126.612903 16.5,126.612903 C12.3578644,126.612903 9,130.864393 9,136.108871 C9,141.353349 12.3578644,145.604839 16.5,145.604839 Z M4,6.33064516 L4,116.483871 L28,116.483871 L28,6.33064516 L4,6.33064516 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="age" transform="translate(15.500000, 60.141129) rotate(-90.000000) translate(-15.500000, -60.141129) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="1.1" y="62.7459677">age</tspan>
</text>
</g>
<g id="Group-2-Copy-2" transform="translate(198.000000, 3.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="157"></rect>
<path d="M0,0 L32,0 L32,157 L0,157 L0,0 Z M16.5,145.604839 C20.6421356,145.604839 24,141.353349 24,136.108871 C24,130.864393 20.6421356,126.612903 16.5,126.612903 C12.3578644,126.612903 9,130.864393 9,136.108871 C9,141.353349 12.3578644,145.604839 16.5,145.604839 Z M4,6.33064516 L4,116.483871 L28,116.483871 L28,6.33064516 L4,6.33064516 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="likes-birds" transform="translate(17.500000, 60.774194) rotate(-90.000000) translate(-17.500000, -60.774194) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-28.7" y="63.2782258">likes birds</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="109" y="157" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="164.5" y="177.5" width="25" height="10"></rect>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="5" y="187">user</tspan>
</text>
<path id="Line-8" d="M71.5,184 L45,184 L45,181 L71.5,181 L71.5,173 L90.5,182.5 L71.5,192 L71.5,184 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
1-js/04-object-basics/01-object/object-user-props@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
1-js/04-object-basics/01-object/object-user.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.6 KiB

36
1-js/04-object-basics/01-object/object-user.svg Normal file
View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="173px" viewBox="0 0 248 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>object-user.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="173"></rect>
<path d="M127.93675,101 L111.270083,121 L241.729917,121 L225.06325,101 L127.93675,101 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(142.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 42.858871) rotate(-90.000000) translate(-15.500000, -42.858871) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-1.3" y="47.358871">name</tspan>
</text>
</g>
<g id="Group-2-Copy" transform="translate(179.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="age" transform="translate(14.500000, 41.653226) rotate(-90.000000) translate(-14.500000, -41.653226) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="1.9" y="46.1532258">age</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="109" y="115" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="164.5" y="135.5" width="25" height="10"></rect>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="11" y="145">user</tspan>
</text>
<path id="Line-8" d="M77.5,142 L51,142 L51,139 L77.5,139 L77.5,131 L96.5,140.5 L77.5,150 L77.5,142 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
1-js/04-object-basics/01-object/object-user@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
1-js/04-object-basics/01-object/object.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.6 KiB

41
1-js/04-object-basics/01-object/object.svg Normal file
View file

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="176px" height="183px" viewBox="0 0 176 183" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>object.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object.svg">
<rect fill="#FFFFFF" x="0" y="0" width="176" height="183"></rect>
<path d="M36.9367499,113 L20.2700832,133 L150.729917,133 L134.06325,113 L36.9367499,113 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(33.000000, 6.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="key1" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">key1</tspan>
</text>
</g>
<g id="Group-2-Copy" transform="translate(70.000000, 6.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="key2" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">key2</tspan>
</text>
</g>
<g id="Group-2-Copy-2" transform="translate(107.000000, 6.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="key3" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">key3</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="18" y="127" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="73.5" y="147.5" width="25" height="10"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
1-js/04-object-basics/01-object/object@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.4 KiB

BIN
1-js/04-object-basics/01-object/variable-contains-reference.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9 KiB

36
1-js/04-object-basics/01-object/variable-contains-reference.svg Normal file
View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="370px" height="249px" viewBox="0 0 370 249" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>variable-contains-reference.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-contains-reference.svg">
<g id="noun_1211_cc" transform="translate(12.000000, 119.000000)" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<polyline id="Shape" points="17 57 17 29 2 57"></polyline>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
</g>
<text id="user" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="47" y="215">user</tspan>
</text>
<rect id="Rectangle-4" fill="#FFFFFF" x="116" y="153" width="44" height="6"></rect>
<path d="M123.854043,154.321929 L137.633029,140.846349 C139.246288,139.571606 142.818195,136.418958 141.204936,135.144404 C139.591676,133.868906 138.540503,134.671996 136.929629,135.947493 L118.43143,154.32193 C116.818171,155.596673 116.818171,157.16666 118.43143,158.441214 C118.43143,158.441214 139.913731,178.508876 141.204935,178.508876 C144.209997,178.508876 143.882164,176.687821 142.268905,175.413266 L123.854043,157.587044 L158.842523,157.587044 L182.224064,157.587044 L201.028364,157.587044 C203.308965,157.587044 204.778514,157.865709 204.778514,156.062589 C204.778514,154.259469 203.308964,154.321929 201.028364,154.321929 L123.854043,154.321929 Z" id="Shape-3" fill="#EE6B47" transform="translate(161.000000, 156.504438) scale(-1, 1) translate(-161.000000, -156.504438) "></path>
<g id="Rectangle-3-+-Shape" transform="translate(58.000000, 135.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
</g>
<path d="M241.93675,117 L225.270083,137 L355.729917,137 L339.06325,117 L241.93675,117 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(271.000000, 10.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">name</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="223" y="131" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="278.5" y="151.5" width="25" height="10"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
1-js/04-object-basics/01-object/variable-contains-reference@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
1-js/04-object-basics/01-object/variable-copy-reference.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

56
1-js/04-object-basics/01-object/variable-copy-reference.svg Normal file
View file

@ -0,0 +1,56 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="599px" height="260px" viewBox="0 0 599 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>variable-copy-reference.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-copy-reference.svg">
<g id="Group" transform="translate(11.000000, 125.000000)">
<g id="noun_1211_cc" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<polyline id="Shape" points="17 57 17 29 2 57"></polyline>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
</g>
<text id="user" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="35" y="96">user</tspan>
</text>
<g id="Rectangle-4-+-Shape-3" transform="translate(104.000000, 15.000000)">
<rect id="Rectangle-4" fill="#FFFFFF" x="0" y="19" width="44" height="6"></rect>
<path d="M7.85404284,20.3219293 L21.6330289,6.84634915 C23.2462881,5.57160629 26.8181947,2.41895793 25.2049355,1.14440364 C23.5916764,-0.131093502 22.5405033,0.671996159 20.9296292,1.9474933 L2.43143016,20.3219299 C0.818170998,21.5966728 0.818171047,23.1666601 2.43143021,24.4412144 C2.43143021,24.4412144 23.9137313,44.5088763 25.2049351,44.5088763 C28.2099969,44.5088763 27.882164,42.6878208 26.2689048,41.4132665 L7.8540433,23.5870439 L42.8425234,23.5870439 L66.2240642,23.5870439 L85.0283644,23.5870439 C87.3089653,23.5870439 88.7785142,23.8657087 88.7785142,22.0625887 C88.7785142,20.2594687 87.3089645,20.3219293 85.0283637,20.3219293 L7.85404284,20.3219293 Z" id="Shape-3" fill="#EE6B47" transform="translate(45.000000, 22.504438) scale(-1, 1) translate(-45.000000, -22.504438) "></path>
</g>
<g id="Rectangle-3-+-Shape" transform="translate(46.000000, 16.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
</g>
</g>
<g id="noun_1211_cc" transform="translate(418.000000, 125.000000)" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<polyline id="Shape" points="17 57 17 29 2 57"></polyline>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
</g>
<text id="admin" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="446" y="221">admin</tspan>
</text>
<g id="Rectangle-4-+-Shape-3" transform="translate(406.500000, 162.500000) scale(-1, 1) translate(-406.500000, -162.500000) translate(362.000000, 140.000000)">
<rect id="Rectangle-4" fill="#FFFFFF" x="0" y="19" width="44" height="6"></rect>
<path d="M7.85404284,20.3219293 L21.6330289,6.84634915 C23.2462881,5.57160629 26.8181947,2.41895793 25.2049355,1.14440364 C23.5916764,-0.131093502 22.5405033,0.671996159 20.9296292,1.9474933 L2.43143016,20.3219299 C0.818170998,21.5966728 0.818171047,23.1666601 2.43143021,24.4412144 C2.43143021,24.4412144 23.9137313,44.5088763 25.2049351,44.5088763 C28.2099969,44.5088763 27.882164,42.6878208 26.2689048,41.4132665 L7.8540433,23.5870439 L42.8425234,23.5870439 L66.2240642,23.5870439 L85.0283644,23.5870439 C87.3089653,23.5870439 88.7785142,23.8657087 88.7785142,22.0625887 C88.7785142,20.2594687 87.3089645,20.3219293 85.0283637,20.3219293 L7.85404284,20.3219293 Z" id="Shape-3" fill="#EE6B47" transform="translate(45.000000, 22.504438) scale(-1, 1) translate(-45.000000, -22.504438) "></path>
</g>
<g id="Rectangle-3-+-Shape" transform="translate(464.000000, 141.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
</g>
<path d="M235.93675,125 L219.270083,145 L349.729917,145 L333.06325,125 L235.93675,125 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(265.000000, 18.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">name</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="217" y="139" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="272.5" y="159.5" width="25" height="10"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
1-js/04-object-basics/01-object/variable-copy-reference@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
1-js/04-object-basics/01-object/variable-copy-value.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

40
1-js/04-object-basics/01-object/variable-copy-value.svg Normal file
View file

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="359px" height="143px" viewBox="0 0 359 143" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>variable-copy-value.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-copy-value.svg">
<g id="noun_1211_cc-+-Message" transform="translate(11.000000, 6.000000)">
<g id="noun_1211_cc">
<path d="M17,37.1960457 L129.557785,37.1960457 L129.557785,80.1456641 C129.557785,80.5185728 129.479295,81.0083855 129.279367,81.4404861 C129.07944,81.8725868 112.704625,117 112.704625,117 L112.704625,62.6396695 L129.559266,37.1960457 L148,9 L35.4407339,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F"></path>
<polyline id="Shape" fill="#E8C48F" points="17 66 17 38 2 66"></polyline>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M18.8613371,1.80856046 L1.99871056,17.5332141 L55.1386629,74.5188362 L72.0012894,58.7941826 L18.8613371,1.80856046 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Hello!&quot;" transform="translate(38.099228, 39.181970) rotate(47.000000) translate(-38.099228, -39.181970) " font-family="OpenSans-SemiBold, Open Sans" font-size="14" font-weight="500" line-spacing="17" fill="#8A704D">
<tspan x="4.41856411" y="43.9983764">"Hello!"</tspan>
</text>
</g>
<path d="M0,68 L0,122.729971 C0,126.150501 1.4836395,128 4.38712201,128 L104.473443,128 C107.59502,128 110,125.4521 110,124.524372 L110,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F"></path>
</g>
<text id="message" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="17" y="105">message</tspan>
</text>
</g>
<g id="Group" transform="translate(210.000000, 6.000000)">
<path d="M17,37.1960457 L130.417005,37.1960457 L130.417005,80.1456641 C130.417005,80.5185728 130.337916,81.0083855 130.136462,81.4404861 C129.935008,81.8725868 113.435195,117 113.435195,117 L113.435195,62.6396695 L130.418497,37.1960457 L149,9 L35.5815029,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F"></path>
<polyline id="Shape" fill="#E8C48F" points="18 66 18 38 2 66"></polyline>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M19.1172186,1.79919253 L2.01617912,17.5335434 L55.8827814,74.5282042 L72.9838209,58.7938532 L19.1172186,1.79919253 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Hello!&quot;" transform="translate(38.155854, 37.706510) rotate(47.000000) translate(-38.155854, -37.706510) " font-family="OpenSans-SemiBold, Open Sans" font-size="14" font-weight="500" line-spacing="17" fill="#8A704D">
<tspan x="4.47519034" y="42.5229163">"Hello!"</tspan>
</text>
</g>
<path d="M0,68 L0,122.729971 C0,126.150501 1.49712713,128 4.42700494,128 L105.423201,128 C108.573157,128 111,125.4521 111,124.524372 L111,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F"></path>
<text id="phrase" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="25" y="105">phrase</tspan>
</text>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
1-js/04-object-basics/01-object/variable-copy-value@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 35 KiB

26
1-js/04-object-basics/02-garbage-collection/article.md
View file

@ -38,7 +38,7 @@ let user = {
}; };
``` ```
![](memory-user-john.png) ![](memory-user-john.svg)
Here the arrow depicts an object reference. The global variable `"user"` references the object `{name: "John"}` (we'll call it John for brevity). The `"name"` property of John stores a primitive, so it's painted inside the object. Here the arrow depicts an object reference. The global variable `"user"` references the object `{name: "John"}` (we'll call it John for brevity). The `"name"` property of John stores a primitive, so it's painted inside the object.
@ -48,7 +48,7 @@ If the value of `user` is overwritten, the reference is lost:
user = null; user = null;
``` ```
![](memory-user-john-lost.png) ![](memory-user-john-lost.svg)
Now John becomes unreachable. There's no way to access it, no references to it. Garbage collector will junk the data and free the memory. Now John becomes unreachable. There's no way to access it, no references to it. Garbage collector will junk the data and free the memory.
@ -67,7 +67,7 @@ let admin = user;
*/!* */!*
``` ```
![](memory-user-john-admin.png) ![](memory-user-john-admin.svg)
Now if we do the same: Now if we do the same:
```js ```js
@ -102,7 +102,7 @@ Function `marry` "marries" two objects by giving them references to each other a
The resulting memory structure: The resulting memory structure:
![](family.png) ![](family.svg)
As of now, all objects are reachable. As of now, all objects are reachable.
@ -113,19 +113,19 @@ delete family.father;
delete family.mother.husband; delete family.mother.husband;
``` ```
![](family-delete-refs.png) ![](family-delete-refs.svg)
It's not enough to delete only one of these two references, because all objects would still be reachable. It's not enough to delete only one of these two references, because all objects would still be reachable.
But if we delete both, then we can see that John has no incoming reference any more: But if we delete both, then we can see that John has no incoming reference any more:
![](family-no-father.png) ![](family-no-father.svg)
Outgoing references do not matter. Only incoming ones can make an object reachable. So, John is now unreachable and will be removed from the memory with all its data that also became unaccessible. Outgoing references do not matter. Only incoming ones can make an object reachable. So, John is now unreachable and will be removed from the memory with all its data that also became unaccessible.
After garbage collection: After garbage collection:
![](family-no-father-2.png) ![](family-no-father-2.svg)
## Unreachable island ## Unreachable island
@ -139,7 +139,7 @@ family = null;
The in-memory picture becomes: The in-memory picture becomes:
![](family-no-family.png) ![](family-no-family.svg)
This example demonstrates how important the concept of reachability is. This example demonstrates how important the concept of reachability is.
@ -161,25 +161,25 @@ The following "garbage collection" steps are regularly performed:
For instance, let our object structure look like this: For instance, let our object structure look like this:
![](garbage-collection-1.png) ![](garbage-collection-1.svg)
We can clearly see an "unreachable island" to the right side. Now let's see how "mark-and-sweep" garbage collector deals with it. We can clearly see an "unreachable island" to the right side. Now let's see how "mark-and-sweep" garbage collector deals with it.
The first step marks the roots: The first step marks the roots:
![](garbage-collection-2.png) ![](garbage-collection-2.svg)
Then their references are marked: Then their references are marked:
![](garbage-collection-3.png) ![](garbage-collection-3.svg)
...And their references, while possible: ...And their references, while possible:
![](garbage-collection-4.png) ![](garbage-collection-4.svg)
Now the objects that could not be visited in the process are considered unreachable and will be removed: Now the objects that could not be visited in the process are considered unreachable and will be removed:
![](garbage-collection-5.png) ![](garbage-collection-5.svg)
That's the concept of how garbage collection works. That's the concept of how garbage collection works.

BIN
1-js/04-object-basics/02-garbage-collection/family-delete-refs.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

56
1-js/04-object-basics/02-garbage-collection/family-delete-refs.svg Normal file
View file

@ -0,0 +1,56 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="337px" height="204px" viewBox="0 0 337 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family-delete-refs.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-delete-refs.svg">
<path id="Line" d="M147.5,189.5 L193.5,189.5 L193.5,191.5 L147.5,191.5 L147.5,197.5 L133.5,190.5 L147.5,183.5 L147.5,189.5 Z" fill="#9B9B9B" fill-rule="nonzero" opacity="0.6"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="88" y="13" width="151" height="26"></rect>
<text id="&lt;global-variable&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="92" y="30">&lt;global variable&gt;</tspan>
</text>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="123" y="80" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="139" y="96">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="5" y="148" width="118" height="48"></rect>
<text id="Object-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="39" y="165">Object</tspan>
</text>
<text id="wife" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="147" y="148">wife</tspan>
</text>
<text id="family" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="106" y="63">family</tspan>
</text>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="19" y="185">name: "John"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="214" y="148" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="230" y="185">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="242" y="127">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="244" y="165">Object</tspan>
</text>
<path id="Line" d="M162.5,61.5 L162.5,43.5 L164.5,43.5 L164.5,61.5 L170.5,61.5 L163.5,75.5 L156.5,61.5 L162.5,61.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M79.4216083,135.684192 L114.749841,111.10803 L115.89197,112.749841 L80.5637373,137.326002 L83.9901242,142.251434 L68.5,144.5 L75.9952214,130.758761 L79.4216083,135.684192 Z" fill="#9B9B9B" fill-rule="nonzero" opacity="0.6"></path>
<path id="Line" d="M180.5,157.5 L132.5,157.5 L132.5,155.5 L180.5,155.5 L180.5,149.5 L194.5,156.5 L180.5,163.5 L180.5,157.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M243.36482,137.447526 L207.11061,112.763808 L208.236192,111.11061 L244.490402,135.794327 L247.867147,130.834732 L255.5,144.5 L239.988074,142.407121 L243.36482,137.447526 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M89.5,118.5 L100.5,132.5" id="Line-Copy" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" transform="translate(95.000000, 125.500000) scale(-1, 1) translate(-95.000000, -125.500000) "></path>
<path d="M89.5,118.5 L100.5,132.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M161.5,183.5 L172.5,197.5" id="Line-Copy-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" transform="translate(167.000000, 190.500000) scale(-1, 1) translate(-167.000000, -190.500000) "></path>
<path d="M161.5,183.5 L172.5,197.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="father" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#9B9B9B">
<tspan x="35" y="127">father</tspan>
</text>
<text id="husband" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#9B9B9B">
<tspan x="136" y="181">husband</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-delete-refs@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-no-family.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

57
1-js/04-object-basics/02-garbage-collection/family-no-family.svg Normal file
View file

@ -0,0 +1,57 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="420px" height="279px" viewBox="0 0 420 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family-no-family.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-no-family.svg">
<path id="Line" d="M211.5,234.5 L257.5,234.5 L257.5,236.5 L211.5,236.5 L211.5,242.5 L197.5,235.5 L211.5,228.5 L211.5,234.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="153" y="25" width="153" height="48"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="199" y="43">&lt;global&gt;</tspan>
</text>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="187" y="123" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="203" y="139">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="69" y="193" width="118" height="48"></rect>
<text id="Object-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="103" y="210">Object</tspan>
</text>
<text id="father" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="99" y="170">father</tspan>
</text>
<text id="wife" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="211" y="193">wife</tspan>
</text>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="83" y="230">name: "John"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="278" y="193" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="294" y="230">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="306" y="170">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="308" y="210">Object</tspan>
</text>
<path id="Line-2" d="M143.421608,178.684192 L178.749841,154.10803 L179.89197,155.749841 L144.563737,180.326002 L147.990124,185.251434 L132.5,187.5 L139.995221,173.758761 L143.421608,178.684192 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M244.5,202.5 L196.5,202.5 L196.5,200.5 L244.5,200.5 L244.5,194.5 L258.5,201.5 L244.5,208.5 L244.5,202.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="husband" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="200" y="226">husband</tspan>
</text>
<path id="Line" d="M307.36482,180.447526 L271.11061,155.763808 L272.236192,154.11061 L308.490402,178.794327 L311.867147,173.834732 L319.5,187.5 L303.988074,185.407121 L307.36482,180.447526 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-5" stroke="#D0021B" stroke-width="2" x="48" y="112" width="364" height="150"></rect>
<text id="family:-null" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="183" y="66">family: null</tspan>
</text>
<g id="noun_48910_cc" transform="translate(8.000000, 110.000000)">
<path d="M17.5030263,1.75054945 L12.4969737,1.75054945 C12.3098684,1.75054945 12.1571053,1.90364835 12.1571053,2.09156044 L12.1571053,3.21745055 L17.8432895,3.21745055 L17.8432895,2.09156044 C17.8432895,1.90364835 17.6905263,1.75054945 17.5030263,1.75054945 L17.5030263,1.75054945 Z" id="Shape"></path>
<path d="M28.3638158,3.21745055 L19.5896053,3.21745055 L19.5896053,2.09156044 C19.5896053,0.937978022 18.6540789,4.4408921e-16 17.5030263,4.4408921e-16 L12.4969737,4.4408921e-16 C11.3463158,4.4408921e-16 10.4103947,0.937978022 10.4103947,2.09156044 L10.4103947,3.21745055 L1.63657895,3.21745055 C0.9375,3.21745055 0.370657895,3.78514286 0.370657895,4.48575824 L0.370657895,4.57516484 C0.370657895,5.27578022 0.9375,5.84347253 1.63657895,5.84347253 L28.3638158,5.84347253 C29.0628947,5.84347253 29.6297368,5.27578022 29.6297368,4.57516484 L29.6297368,4.48575824 C29.6297368,3.78514286 29.0625,3.21745055 28.3638158,3.21745055 L28.3638158,3.21745055 Z M17.8432895,3.21745055 L12.1571053,3.21745055 L12.1571053,2.09156044 C12.1571053,1.90364835 12.3098684,1.75054945 12.4969737,1.75054945 L17.5034211,1.75054945 C17.6909211,1.75054945 17.8432895,1.90364835 17.8432895,2.09156044 L17.8432895,3.21745055 L17.8432895,3.21745055 Z" id="Shape" fill="#D0021B"></path>
<path d="M26.0542105,6.28101099 L3.7275,6.28101099 C2.42960526,6.28101099 1.37723684,6.0567033 1.37723684,7.35784615 L3.13973684,33.195956 C3.13973684,34.4959121 4.1925,35.6047912 5.49039474,35.6047912 L24.2921053,35.6047912 C25.59,35.6047912 26.6423684,34.4959121 26.6423684,33.195956 L28.4048684,7.35784615 C28.4044737,6.0567033 27.3521053,6.28101099 26.0542105,6.28101099 L26.0542105,6.28101099 Z M9.63710526,32.1927033 C9.26013158,32.2053626 8.94552632,31.932 8.93289474,31.5807033 L8.23894737,11.664 C8.22671053,11.3127033 8.52236842,11.0171868 8.89815789,11.0041319 C9.27513158,10.9910769 9.58973684,11.2652308 9.60236842,11.6165275 L10.2963158,31.5332308 C10.3085526,31.8841319 10.0132895,32.180044 9.63710526,32.1927033 L9.63710526,32.1927033 Z M15.6809211,31.5632967 C15.6809211,31.9145934 15.3753947,32.1998242 14.9988158,32.1998242 C14.6222368,32.1998242 14.3167105,31.9141978 14.3167105,31.5632967 L14.3167105,11.6343297 C14.3167105,11.2826374 14.6222368,10.9978022 14.9988158,10.9978022 C15.3753947,10.9978022 15.6809211,11.2826374 15.6809211,11.6343297 L15.6809211,31.5632967 L15.6809211,31.5632967 Z M21.0651316,31.5810989 C21.0528947,31.9323956 20.7378947,32.2057582 20.3609211,32.1930989 C19.9847368,32.1804396 19.6894737,31.8845275 19.7017105,31.5332308 L20.3956579,11.6165275 C20.4078947,11.2652308 20.7225,10.9910769 21.0994737,11.0041319 C21.4756579,11.0175824 21.7713158,11.3127033 21.7590789,11.664 L21.0651316,31.5810989 L21.0651316,31.5810989 Z" id="Shape" fill="#D0021B"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-no-family@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 38 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-no-father-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.6 KiB

33
1-js/04-object-basics/02-garbage-collection/family-no-father-2.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="144px" height="225px" viewBox="0 0 144 225" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family-no-father-2.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-no-father-2.svg">
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="34" y="91" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="50" y="107">Object</tspan>
</text>
<text id="family" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="15" y="67">family</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="16" y="166" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="34" y="203">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="16" y="142">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="48" y="183">Object</tspan>
</text>
<path id="Line" d="M73.5,65.5 L73.5,47.5 L75.5,47.5 L75.5,65.5 L81.5,65.5 L74.5,79.5 L67.5,65.5 L73.5,65.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M72.5,141.5 L72.5,122.5 L74.5,122.5 L74.5,141.5 L80.5,141.5 L73.5,155.5 L66.5,141.5 L72.5,141.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="27" y="16" width="93" height="26"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="43" y="33">&lt;global&gt;</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-no-father-2@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-no-father.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

50
1-js/04-object-basics/02-garbage-collection/family-no-father.svg Normal file
View file

@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="399px" height="225px" viewBox="0 0 399 225" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family-no-father.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-no-father.svg">
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="187" y="78" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="203" y="94">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="69" y="146" width="118" height="48"></rect>
<text id="Object-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="103" y="163">Object</tspan>
</text>
<text id="wife" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="211" y="146">wife</tspan>
</text>
<text id="family" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="171" y="61">family</tspan>
</text>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="83" y="183">name: "John"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="278" y="146" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="299" y="183">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="306" y="125">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="308" y="163">Object</tspan>
</text>
<path id="Line" d="M226.5,59.5 L226.5,41.5 L228.5,41.5 L228.5,59.5 L234.5,59.5 L227.5,73.5 L220.5,59.5 L226.5,59.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M244.5,155.5 L196.5,155.5 L196.5,153.5 L244.5,153.5 L244.5,147.5 L258.5,154.5 L244.5,161.5 L244.5,155.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M307.36482,135.447526 L271.11061,110.763808 L272.236192,109.11061 L308.490402,133.794327 L311.867147,128.834732 L319.5,142.5 L303.988074,140.407121 L307.36482,135.447526 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-5" stroke="#D0021B" stroke-width="2" x="48" y="117" width="217" height="99"></rect>
<g id="noun_48910_cc" transform="translate(7.000000, 114.000000)">
<path d="M17.5030263,1.75054945 L12.4969737,1.75054945 C12.3098684,1.75054945 12.1571053,1.90364835 12.1571053,2.09156044 L12.1571053,3.21745055 L17.8432895,3.21745055 L17.8432895,2.09156044 C17.8432895,1.90364835 17.6905263,1.75054945 17.5030263,1.75054945 L17.5030263,1.75054945 Z" id="Shape"></path>
<path d="M28.3638158,3.21745055 L19.5896053,3.21745055 L19.5896053,2.09156044 C19.5896053,0.937978022 18.6540789,-4.4408921e-16 17.5030263,-4.4408921e-16 L12.4969737,-4.4408921e-16 C11.3463158,-4.4408921e-16 10.4103947,0.937978022 10.4103947,2.09156044 L10.4103947,3.21745055 L1.63657895,3.21745055 C0.9375,3.21745055 0.370657895,3.78514286 0.370657895,4.48575824 L0.370657895,4.57516484 C0.370657895,5.27578022 0.9375,5.84347253 1.63657895,5.84347253 L28.3638158,5.84347253 C29.0628947,5.84347253 29.6297368,5.27578022 29.6297368,4.57516484 L29.6297368,4.48575824 C29.6297368,3.78514286 29.0625,3.21745055 28.3638158,3.21745055 L28.3638158,3.21745055 Z M17.8432895,3.21745055 L12.1571053,3.21745055 L12.1571053,2.09156044 C12.1571053,1.90364835 12.3098684,1.75054945 12.4969737,1.75054945 L17.5034211,1.75054945 C17.6909211,1.75054945 17.8432895,1.90364835 17.8432895,2.09156044 L17.8432895,3.21745055 L17.8432895,3.21745055 Z" id="Shape" fill="#D0021B"></path>
<path d="M26.0542105,6.28101099 L3.7275,6.28101099 C2.42960526,6.28101099 1.37723684,6.0567033 1.37723684,7.35784615 L3.13973684,33.195956 C3.13973684,34.4959121 4.1925,35.6047912 5.49039474,35.6047912 L24.2921053,35.6047912 C25.59,35.6047912 26.6423684,34.4959121 26.6423684,33.195956 L28.4048684,7.35784615 C28.4044737,6.0567033 27.3521053,6.28101099 26.0542105,6.28101099 L26.0542105,6.28101099 Z M9.63710526,32.1927033 C9.26013158,32.2053626 8.94552632,31.932 8.93289474,31.5807033 L8.23894737,11.664 C8.22671053,11.3127033 8.52236842,11.0171868 8.89815789,11.0041319 C9.27513158,10.9910769 9.58973684,11.2652308 9.60236842,11.6165275 L10.2963158,31.5332308 C10.3085526,31.8841319 10.0132895,32.180044 9.63710526,32.1927033 L9.63710526,32.1927033 Z M15.6809211,31.5632967 C15.6809211,31.9145934 15.3753947,32.1998242 14.9988158,32.1998242 C14.6222368,32.1998242 14.3167105,31.9141978 14.3167105,31.5632967 L14.3167105,11.6343297 C14.3167105,11.2826374 14.6222368,10.9978022 14.9988158,10.9978022 C15.3753947,10.9978022 15.6809211,11.2826374 15.6809211,11.6343297 L15.6809211,31.5632967 L15.6809211,31.5632967 Z M21.0651316,31.5810989 C21.0528947,31.9323956 20.7378947,32.2057582 20.3609211,32.1930989 C19.9847368,32.1804396 19.6894737,31.8845275 19.7017105,31.5332308 L20.3956579,11.6165275 C20.4078947,11.2652308 20.7225,10.9910769 21.0994737,11.0041319 C21.4756579,11.0175824 21.7713158,11.3127033 21.7590789,11.664 L21.0651316,31.5810989 L21.0651316,31.5810989 Z" id="Shape" fill="#D0021B"></path>
</g>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="181" y="13" width="93" height="26"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="197" y="30">&lt;global&gt;</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-no-father@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 31 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

52
1-js/04-object-basics/02-garbage-collection/family.svg Normal file
View file

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="337px" height="204px" viewBox="0 0 337 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family.svg">
<path id="Line" d="M147.5,189.5 L193.5,189.5 L193.5,191.5 L147.5,191.5 L147.5,197.5 L133.5,190.5 L147.5,183.5 L147.5,189.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="123" y="80" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="139" y="96">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="5" y="148" width="118" height="48"></rect>
<text id="Object-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="39" y="165">Object</tspan>
</text>
<text id="father" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="35" y="127">father</tspan>
</text>
<text id="wife" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="147" y="148">wife</tspan>
</text>
<text id="family" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="107" y="63">family</tspan>
</text>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="19" y="185">name: "John"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="214" y="148" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="230" y="185">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="242" y="127">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="244" y="165">Object</tspan>
</text>
<path id="Line" d="M162.5,61.5 L162.5,43.5 L164.5,43.5 L164.5,61.5 L170.5,61.5 L163.5,75.5 L156.5,61.5 L162.5,61.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M79.4216083,135.684192 L114.749841,111.10803 L115.89197,112.749841 L80.5637373,137.326002 L83.9901242,142.251434 L68.5,144.5 L75.9952214,130.758761 L79.4216083,135.684192 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M180.5,157.5 L132.5,157.5 L132.5,155.5 L180.5,155.5 L180.5,149.5 L194.5,156.5 L180.5,163.5 L180.5,157.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="husband" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="136" y="181">husband</tspan>
</text>
<path id="Line" d="M243.36482,137.447526 L207.11061,112.763808 L208.236192,111.11061 L244.490402,135.794327 L247.867147,130.834732 L255.5,144.5 L239.988074,142.407121 L243.36482,137.447526 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="88" y="13" width="151" height="26"></rect>
<text id="&lt;global-variable&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="92" y="30">&lt;global variable&gt;</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

162
1-js/04-object-basics/02-garbage-collection/garbage-collection-1.svg Normal file
View file

@ -0,0 +1,162 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="463px" height="204px" viewBox="0 0 463 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>garbage-collection-1.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
<rect id="path-23" x="0" y="0" width="40" height="20"></rect>
</defs>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="garbage-collection-1.svg">
<g id="Rectangle-1-Clipped" transform="translate(106.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path-1"></g>
<g id="Rectangle-1" mask="url(#mask-2)" fill="#FFF9EB" stroke="#E8C48E" stroke-width="4">
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
</g>
</g>
<text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="115" y="26">&lt;global&gt;</tspan>
</text>
<g id="Rectangle-2-Clipped" transform="translate(360.000000, 99.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="path-3"></g>
<g id="Rectangle-2" mask="url(#mask-4)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(267.000000, 99.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<g id="path-5"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-6)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(126.000000, 79.000000)">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<g id="path-7"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-8)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-Clipped" transform="translate(313.000000, 53.000000)">
<mask id="mask-10" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<g id="path-9"></g>
<g id="Rectangle-2-Copy" mask="url(#mask-10)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-3-Clipped" transform="translate(176.000000, 129.000000)">
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<g id="path-11"></g>
<g id="Rectangle-2-Copy-3" mask="url(#mask-12)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-8-Clipped" transform="translate(196.000000, 69.000000)">
<mask id="mask-14" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<g id="path-13"></g>
<g id="Rectangle-2-Copy-8" mask="url(#mask-14)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-4-Clipped" transform="translate(128.000000, 139.000000)">
<mask id="mask-16" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<g id="path-15"></g>
<g id="Rectangle-2-Copy-4" mask="url(#mask-16)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-5-Clipped" transform="translate(76.000000, 131.000000)">
<mask id="mask-18" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<g id="path-17"></g>
<g id="Rectangle-2-Copy-5" mask="url(#mask-18)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-6-Clipped" transform="translate(76.000000, 71.000000)">
<mask id="mask-20" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<g id="path-19"></g>
<g id="Rectangle-2-Copy-6" mask="url(#mask-20)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-7-Clipped" transform="translate(27.000000, 57.000000)">
<mask id="mask-22" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<g id="path-21"></g>
<g id="Rectangle-2-Copy-7" mask="url(#mask-22)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<path d="M148.5,40.5 L148.5,71.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 71.5 151.5 60.7 145.5 60.7"></polygon>
<path d="M148.5,105.5 L148.5,129.5" id="Line-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 129.5 151.5 118.7 145.5 118.7"></polygon>
<path d="M319.5,77.5 L300.5,93.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47" points="300.5 93.5 310.693448 88.8380675 306.828634 84.2486004"></polygon>
<path d="M127.5,47.5 L108.5,63.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="108.5 63.5 118.693448 58.8380675 114.828634 54.2486004"></polygon>
<path d="M97.5,42.5 L74.5,51.5" id="Line-2-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="74.5 51.5 85.6506201 50.3582154 83.464224 44.7707587"></polygon>
<path d="M133.5,107.5 L114.5,123.5" id="Line-2-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="114.5 123.5 124.693448 118.838068 120.828634 114.2486"></polygon>
<path d="M313.070628,109.5 L352.425466,109.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="352.425466 109.5 341.625466 106.5 341.625466 112.5"></polygon>
<path d="M170.5,107.5 L188.5,122.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="188.5 122.5 182.123763 113.281345 178.282657 117.890672"></polygon>
<path d="M202.5,154.5 L220.5,169.5" id="Line-Copy-6" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-6-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="220.5 169.5 214.123763 160.281345 210.282657 164.890672"></polygon>
<path d="M170.5,87.5 L190.5,80.5" id="Line-Copy-5" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-5-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="190.5 80.5 179.315278 81.2362095 181.297381 86.8993597"></polygon>
<path d="M209.5,120.5 L223.5,98.5" id="Line-Copy-4" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-4-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="223.5 98.5 215.17076 106.000918 220.232729 109.222171"></polygon>
<path d="M46.5,82.5 L78.5,122.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-3-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="78.5 122.5 74.0958999 112.192532 69.4106871 115.940702"></polygon>
<g id="Rectangle-2-Copy-9-Clipped" transform="translate(219.000000, 177.000000)">
<mask id="mask-24" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<g id="path-25"></g>
<g id="Rectangle-2-Copy-9" mask="url(#mask-24)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-25" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<path d="M187.5,41.5 L208.5,62.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="208.5 62.5 202.984567 52.7419264 198.741926 56.9845671"></polygon>
<path id="Line-Copy" d="M367.026599,89.8074683 L370.905564,94.6561738 L369.343826,95.9055639 L365.464862,91.0568584 L360.779649,94.8050287 L357.5,79.5 L371.711812,86.059298 L367.026599,89.8074683 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-1@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

178
1-js/04-object-basics/02-garbage-collection/garbage-collection-2.svg Normal file
View file

@ -0,0 +1,178 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="463px" height="204px" viewBox="0 0 463 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>garbage-collection-2.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
<rect id="path-23" x="0" y="0" width="40" height="20"></rect>
</defs>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="garbage-collection-2.svg">
<g id="Rectangle-1-Clipped" transform="translate(106.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path-1"></g>
<g id="Rectangle-1" mask="url(#mask-2)" fill="#FFF9EB" stroke="#E8C48E" stroke-width="4">
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
</g>
</g>
<text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="115" y="26">&lt;global&gt;</tspan>
</text>
<g id="Rectangle-2-Clipped" transform="translate(360.000000, 99.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="path-3"></g>
<g id="Rectangle-2" mask="url(#mask-4)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(267.000000, 99.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<g id="path-5"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-6)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(126.000000, 79.000000)">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<g id="path-7"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-8)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-Clipped" transform="translate(313.000000, 53.000000)">
<mask id="mask-10" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<g id="path-9"></g>
<g id="Rectangle-2-Copy" mask="url(#mask-10)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-3-Clipped" transform="translate(176.000000, 129.000000)">
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<g id="path-11"></g>
<g id="Rectangle-2-Copy-3" mask="url(#mask-12)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-8-Clipped" transform="translate(196.000000, 69.000000)">
<mask id="mask-14" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<g id="path-13"></g>
<g id="Rectangle-2-Copy-8" mask="url(#mask-14)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-4-Clipped" transform="translate(128.000000, 139.000000)">
<mask id="mask-16" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<g id="path-15"></g>
<g id="Rectangle-2-Copy-4" mask="url(#mask-16)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-5-Clipped" transform="translate(76.000000, 131.000000)">
<mask id="mask-18" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<g id="path-17"></g>
<g id="Rectangle-2-Copy-5" mask="url(#mask-18)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-6-Clipped" transform="translate(76.000000, 71.000000)">
<mask id="mask-20" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<g id="path-19"></g>
<g id="Rectangle-2-Copy-6" mask="url(#mask-20)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-7-Clipped" transform="translate(27.000000, 57.000000)">
<mask id="mask-22" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<g id="path-21"></g>
<g id="Rectangle-2-Copy-7" mask="url(#mask-22)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<path d="M148.5,40.5 L148.5,71.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 71.5 151.5 60.7 145.5 60.7"></polygon>
<path d="M148.5,105.5 L148.5,129.5" id="Line-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 129.5 151.5 118.7 145.5 118.7"></polygon>
<path d="M319.5,77.5 L300.5,93.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47" points="300.5 93.5 310.693448 88.8380675 306.828634 84.2486004"></polygon>
<path d="M127.5,47.5 L108.5,63.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="108.5 63.5 118.693448 58.8380675 114.828634 54.2486004"></polygon>
<path d="M97.5,42.5 L74.5,51.5" id="Line-2-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="74.5 51.5 85.6506201 50.3582154 83.464224 44.7707587"></polygon>
<path d="M133.5,107.5 L114.5,123.5" id="Line-2-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="114.5 123.5 124.693448 118.838068 120.828634 114.2486"></polygon>
<path d="M313.070628,109.5 L352.425466,109.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="352.425466 109.5 341.625466 106.5 341.625466 112.5"></polygon>
<path d="M170.5,107.5 L188.5,122.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="188.5 122.5 182.123763 113.281345 178.282657 117.890672"></polygon>
<path d="M202.5,154.5 L220.5,169.5" id="Line-Copy-6" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-6-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="220.5 169.5 214.123763 160.281345 210.282657 164.890672"></polygon>
<path d="M170.5,87.5 L190.5,80.5" id="Line-Copy-5" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-5-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="190.5 80.5 179.315278 81.2362095 181.297381 86.8993597"></polygon>
<path d="M209.5,120.5 L223.5,98.5" id="Line-Copy-4" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-4-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="223.5 98.5 215.17076 106.000918 220.232729 109.222171"></polygon>
<path d="M46.5,82.5 L78.5,122.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-3-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="78.5 122.5 74.0958999 112.192532 69.4106871 115.940702"></polygon>
<g id="Group" transform="translate(83.500000, 78.500000) rotate(270.000000) translate(-83.500000, -78.500000) translate(79.000000, 74.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy" transform="translate(34.500000, 64.500000) rotate(270.000000) translate(-34.500000, -64.500000) translate(30.000000, 60.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,-8.8817842e-16 4.5,-8.8817842e-16 C6.98126358,-8.8817842e-16 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-4" transform="translate(133.500000, 86.500000) rotate(270.000000) translate(-133.500000, -86.500000) translate(129.000000, 82.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Rectangle-2-Copy-9-Clipped" transform="translate(219.000000, 177.000000)">
<mask id="mask-24" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<g id="path-25"></g>
<g id="Rectangle-2-Copy-9" mask="url(#mask-24)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-25" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Group-Copy-6" transform="translate(203.500000, 76.500000) rotate(270.000000) translate(-203.500000, -76.500000) translate(199.000000, 72.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<path d="M187.5,41.5 L208.5,62.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="208.5 62.5 202.984567 52.7419264 198.741926 56.9845671"></polygon>
<path id="Line-Copy" d="M367.026599,89.8074683 L370.905564,94.6561738 L369.343826,95.9055639 L365.464862,91.0568584 L360.779649,94.8050287 L357.5,79.5 L371.711812,86.059298 L367.026599,89.8074683 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-2@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-3.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

190
1-js/04-object-basics/02-garbage-collection/garbage-collection-3.svg Normal file
View file

@ -0,0 +1,190 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="463px" height="204px" viewBox="0 0 463 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>garbage-collection-3.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
<rect id="path-23" x="0" y="0" width="40" height="20"></rect>
</defs>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="garbage-collection-3.svg">
<g id="Rectangle-1-Clipped" transform="translate(106.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path-1"></g>
<g id="Rectangle-1" mask="url(#mask-2)" fill="#FFF9EB" stroke="#E8C48E" stroke-width="4">
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
</g>
</g>
<text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="115" y="26">&lt;global&gt;</tspan>
</text>
<g id="Rectangle-2-Clipped" transform="translate(360.000000, 99.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="path-3"></g>
<g id="Rectangle-2" mask="url(#mask-4)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(267.000000, 99.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<g id="path-5"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-6)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(126.000000, 79.000000)">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<g id="path-7"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-8)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-Clipped" transform="translate(313.000000, 53.000000)">
<mask id="mask-10" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<g id="path-9"></g>
<g id="Rectangle-2-Copy" mask="url(#mask-10)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-3-Clipped" transform="translate(176.000000, 129.000000)">
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<g id="path-11"></g>
<g id="Rectangle-2-Copy-3" mask="url(#mask-12)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-8-Clipped" transform="translate(196.000000, 69.000000)">
<mask id="mask-14" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<g id="path-13"></g>
<g id="Rectangle-2-Copy-8" mask="url(#mask-14)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-4-Clipped" transform="translate(128.000000, 139.000000)">
<mask id="mask-16" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<g id="path-15"></g>
<g id="Rectangle-2-Copy-4" mask="url(#mask-16)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-5-Clipped" transform="translate(76.000000, 131.000000)">
<mask id="mask-18" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<g id="path-17"></g>
<g id="Rectangle-2-Copy-5" mask="url(#mask-18)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-6-Clipped" transform="translate(76.000000, 71.000000)">
<mask id="mask-20" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<g id="path-19"></g>
<g id="Rectangle-2-Copy-6" mask="url(#mask-20)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-7-Clipped" transform="translate(27.000000, 57.000000)">
<mask id="mask-22" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<g id="path-21"></g>
<g id="Rectangle-2-Copy-7" mask="url(#mask-22)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<path d="M148.5,40.5 L148.5,71.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 71.5 151.5 60.7 145.5 60.7"></polygon>
<path d="M148.5,105.5 L148.5,129.5" id="Line-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 129.5 151.5 118.7 145.5 118.7"></polygon>
<path d="M319.5,77.5 L300.5,93.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47" points="300.5 93.5 310.693448 88.8380675 306.828634 84.2486004"></polygon>
<path d="M127.5,47.5 L108.5,63.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="108.5 63.5 118.693448 58.8380675 114.828634 54.2486004"></polygon>
<path d="M97.5,42.5 L74.5,51.5" id="Line-2-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="74.5 51.5 85.6506201 50.3582154 83.464224 44.7707587"></polygon>
<path d="M133.5,107.5 L114.5,123.5" id="Line-2-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="114.5 123.5 124.693448 118.838068 120.828634 114.2486"></polygon>
<path d="M313.070628,109.5 L352.425466,109.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="352.425466 109.5 341.625466 106.5 341.625466 112.5"></polygon>
<path d="M170.5,107.5 L188.5,122.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="188.5 122.5 182.123763 113.281345 178.282657 117.890672"></polygon>
<path d="M202.5,154.5 L220.5,169.5" id="Line-Copy-6" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-6-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="220.5 169.5 214.123763 160.281345 210.282657 164.890672"></polygon>
<path d="M170.5,87.5 L190.5,80.5" id="Line-Copy-5" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-5-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="190.5 80.5 179.315278 81.2362095 181.297381 86.8993597"></polygon>
<path d="M209.5,120.5 L223.5,98.5" id="Line-Copy-4" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-4-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="223.5 98.5 215.17076 106.000918 220.232729 109.222171"></polygon>
<path d="M46.5,82.5 L78.5,122.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-3-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="78.5 122.5 74.0958999 112.192532 69.4106871 115.940702"></polygon>
<g id="Group" transform="translate(83.500000, 78.500000) rotate(270.000000) translate(-83.500000, -78.500000) translate(79.000000, 74.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy" transform="translate(34.500000, 64.500000) rotate(270.000000) translate(-34.500000, -64.500000) translate(30.000000, 60.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,-8.8817842e-16 4.5,-8.8817842e-16 C6.98126358,-8.8817842e-16 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-2" transform="translate(83.500000, 139.500000) rotate(270.000000) translate(-83.500000, -139.500000) translate(79.000000, 135.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-3" transform="translate(135.500000, 146.500000) rotate(270.000000) translate(-135.500000, -146.500000) translate(131.000000, 142.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-4" transform="translate(133.500000, 86.500000) rotate(270.000000) translate(-133.500000, -86.500000) translate(129.000000, 82.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-5" transform="translate(183.500000, 136.500000) rotate(270.000000) translate(-183.500000, -136.500000) translate(179.000000, 132.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 -1.26217745e-29,6.98144808 -1.26217745e-29,4.5 C-1.26217745e-29,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Rectangle-2-Copy-9-Clipped" transform="translate(219.000000, 177.000000)">
<mask id="mask-24" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<g id="path-25"></g>
<g id="Rectangle-2-Copy-9" mask="url(#mask-24)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-25" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Group-Copy-6" transform="translate(203.500000, 76.500000) rotate(270.000000) translate(-203.500000, -76.500000) translate(199.000000, 72.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<path d="M187.5,41.5 L208.5,62.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="208.5 62.5 202.984567 52.7419264 198.741926 56.9845671"></polygon>
<path id="Line-Copy" d="M367.026599,89.8074683 L370.905564,94.6561738 L369.343826,95.9055639 L365.464862,91.0568584 L360.779649,94.8050287 L357.5,79.5 L371.711812,86.059298 L367.026599,89.8074683 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-3@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-4.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

194
1-js/04-object-basics/02-garbage-collection/garbage-collection-4.svg Normal file
View file

@ -0,0 +1,194 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="463px" height="204px" viewBox="0 0 463 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>garbage-collection-4.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
<rect id="path-23" x="0" y="0" width="40" height="20"></rect>
</defs>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="garbage-collection-4.svg">
<g id="Rectangle-1-Clipped" transform="translate(106.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path-1"></g>
<g id="Rectangle-1" mask="url(#mask-2)" fill="#FFF9EB" stroke="#E8C48E" stroke-width="4">
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
</g>
</g>
<text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="115" y="26">&lt;global&gt;</tspan>
</text>
<g id="Rectangle-2-Clipped" transform="translate(360.000000, 99.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="path-3"></g>
<g id="Rectangle-2" mask="url(#mask-4)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(267.000000, 99.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<g id="path-5"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-6)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(126.000000, 79.000000)">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<g id="path-7"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-8)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-Clipped" transform="translate(313.000000, 53.000000)">
<mask id="mask-10" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<g id="path-9"></g>
<g id="Rectangle-2-Copy" mask="url(#mask-10)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-3-Clipped" transform="translate(176.000000, 129.000000)">
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<g id="path-11"></g>
<g id="Rectangle-2-Copy-3" mask="url(#mask-12)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-8-Clipped" transform="translate(196.000000, 69.000000)">
<mask id="mask-14" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<g id="path-13"></g>
<g id="Rectangle-2-Copy-8" mask="url(#mask-14)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-4-Clipped" transform="translate(128.000000, 139.000000)">
<mask id="mask-16" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<g id="path-15"></g>
<g id="Rectangle-2-Copy-4" mask="url(#mask-16)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-5-Clipped" transform="translate(76.000000, 131.000000)">
<mask id="mask-18" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<g id="path-17"></g>
<g id="Rectangle-2-Copy-5" mask="url(#mask-18)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-6-Clipped" transform="translate(76.000000, 71.000000)">
<mask id="mask-20" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<g id="path-19"></g>
<g id="Rectangle-2-Copy-6" mask="url(#mask-20)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-7-Clipped" transform="translate(27.000000, 57.000000)">
<mask id="mask-22" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<g id="path-21"></g>
<g id="Rectangle-2-Copy-7" mask="url(#mask-22)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<path d="M148.5,40.5 L148.5,71.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 71.5 151.5 60.7 145.5 60.7"></polygon>
<path d="M148.5,105.5 L148.5,129.5" id="Line-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 129.5 151.5 118.7 145.5 118.7"></polygon>
<path d="M319.5,77.5 L300.5,93.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47" points="300.5 93.5 310.693448 88.8380675 306.828634 84.2486004"></polygon>
<path d="M127.5,47.5 L108.5,63.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="108.5 63.5 118.693448 58.8380675 114.828634 54.2486004"></polygon>
<path d="M97.5,42.5 L74.5,51.5" id="Line-2-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="74.5 51.5 85.6506201 50.3582154 83.464224 44.7707587"></polygon>
<path d="M133.5,107.5 L114.5,123.5" id="Line-2-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="114.5 123.5 124.693448 118.838068 120.828634 114.2486"></polygon>
<path d="M313.070628,109.5 L352.425466,109.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="352.425466 109.5 341.625466 106.5 341.625466 112.5"></polygon>
<path d="M170.5,107.5 L188.5,122.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="188.5 122.5 182.123763 113.281345 178.282657 117.890672"></polygon>
<path d="M202.5,154.5 L220.5,169.5" id="Line-Copy-6" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-6-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="220.5 169.5 214.123763 160.281345 210.282657 164.890672"></polygon>
<path d="M170.5,87.5 L190.5,80.5" id="Line-Copy-5" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-5-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="190.5 80.5 179.315278 81.2362095 181.297381 86.8993597"></polygon>
<path d="M209.5,120.5 L223.5,98.5" id="Line-Copy-4" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-4-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="223.5 98.5 215.17076 106.000918 220.232729 109.222171"></polygon>
<path d="M46.5,82.5 L78.5,122.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-3-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="78.5 122.5 74.0958999 112.192532 69.4106871 115.940702"></polygon>
<g id="Group" transform="translate(83.500000, 78.500000) rotate(270.000000) translate(-83.500000, -78.500000) translate(79.000000, 74.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy" transform="translate(34.500000, 64.500000) rotate(270.000000) translate(-34.500000, -64.500000) translate(30.000000, 60.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,-8.8817842e-16 4.5,-8.8817842e-16 C6.98126358,-8.8817842e-16 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-2" transform="translate(83.500000, 139.500000) rotate(270.000000) translate(-83.500000, -139.500000) translate(79.000000, 135.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-3" transform="translate(135.500000, 146.500000) rotate(270.000000) translate(-135.500000, -146.500000) translate(131.000000, 142.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-4" transform="translate(133.500000, 86.500000) rotate(270.000000) translate(-133.500000, -86.500000) translate(129.000000, 82.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-5" transform="translate(183.500000, 136.500000) rotate(270.000000) translate(-183.500000, -136.500000) translate(179.000000, 132.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 -1.26217745e-29,6.98144808 -1.26217745e-29,4.5 C-1.26217745e-29,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Rectangle-2-Copy-9-Clipped" transform="translate(219.000000, 177.000000)">
<mask id="mask-24" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<g id="path-25"></g>
<g id="Rectangle-2-Copy-9" mask="url(#mask-24)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-25" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Group-Copy-7" transform="translate(226.500000, 184.500000) rotate(270.000000) translate(-226.500000, -184.500000) translate(222.000000, 180.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 -1.26217745e-29,6.98144808 -1.26217745e-29,4.5 C-1.26217745e-29,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-6" transform="translate(203.500000, 76.500000) rotate(270.000000) translate(-203.500000, -76.500000) translate(199.000000, 72.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<path d="M187.5,41.5 L208.5,62.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="208.5 62.5 202.984567 52.7419264 198.741926 56.9845671"></polygon>
<path id="Line-Copy" d="M367.026599,89.8074683 L370.905564,94.6561738 L369.343826,95.9055639 L365.464862,91.0568584 L360.779649,94.8050287 L357.5,79.5 L371.711812,86.059298 L367.026599,89.8074683 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-4@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 29 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-5.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

212
1-js/04-object-basics/02-garbage-collection/garbage-collection-5.svg Normal file
View file

@ -0,0 +1,212 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="463px" height="204px" viewBox="0 0 463 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>garbage-collection-5.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="146" height="88"></rect>
<rect id="path-3" x="0" y="0" width="80" height="28"></rect>
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
<rect id="path-23" x="0" y="0" width="40" height="20"></rect>
<rect id="path-25" x="0" y="0" width="40" height="20"></rect>
</defs>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="garbage-collection-5.svg">
<g id="Rectangle-5-Clipped" transform="translate(260.000000, 46.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path-23"></g>
<g id="Rectangle-5" mask="url(#mask-2)" stroke="#D0011B" stroke-width="4">
<rect id="path-23" x="0" y="0" width="146" height="88"></rect>
</g>
</g>
<g id="Rectangle-1-Clipped" transform="translate(106.000000, 8.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="path-1"></g>
<g id="Rectangle-1" mask="url(#mask-4)" fill="#FFF9EB" stroke="#E8C48E" stroke-width="4">
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
</g>
</g>
<text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="115" y="26">&lt;global&gt;</tspan>
</text>
<g id="Rectangle-2-Clipped" transform="translate(360.000000, 99.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<g id="path-3"></g>
<g id="Rectangle-2" mask="url(#mask-6)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(267.000000, 99.000000)">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<g id="path-5"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-8)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(126.000000, 79.000000)">
<mask id="mask-10" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<g id="path-7"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-10)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-Clipped" transform="translate(313.000000, 53.000000)">
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<g id="path-9"></g>
<g id="Rectangle-2-Copy" mask="url(#mask-12)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-3-Clipped" transform="translate(176.000000, 129.000000)">
<mask id="mask-14" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<g id="path-11"></g>
<g id="Rectangle-2-Copy-3" mask="url(#mask-14)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-8-Clipped" transform="translate(196.000000, 69.000000)">
<mask id="mask-16" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<g id="path-13"></g>
<g id="Rectangle-2-Copy-8" mask="url(#mask-16)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-4-Clipped" transform="translate(128.000000, 139.000000)">
<mask id="mask-18" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<g id="path-15"></g>
<g id="Rectangle-2-Copy-4" mask="url(#mask-18)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-5-Clipped" transform="translate(76.000000, 131.000000)">
<mask id="mask-20" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<g id="path-17"></g>
<g id="Rectangle-2-Copy-5" mask="url(#mask-20)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-6-Clipped" transform="translate(76.000000, 71.000000)">
<mask id="mask-22" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<g id="path-19"></g>
<g id="Rectangle-2-Copy-6" mask="url(#mask-22)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-7-Clipped" transform="translate(27.000000, 57.000000)">
<mask id="mask-24" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<g id="path-21"></g>
<g id="Rectangle-2-Copy-7" mask="url(#mask-24)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<path d="M148.5,40.5 L148.5,71.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 71.5 151.5 60.7 145.5 60.7"></polygon>
<path d="M148.5,105.5 L148.5,129.5" id="Line-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 129.5 151.5 118.7 145.5 118.7"></polygon>
<path d="M319.5,77.5 L300.5,93.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47" points="300.5 93.5 310.693448 88.8380675 306.828634 84.2486004"></polygon>
<path d="M127.5,47.5 L108.5,63.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="108.5 63.5 118.693448 58.8380675 114.828634 54.2486004"></polygon>
<path d="M97.5,42.5 L74.5,51.5" id="Line-2-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="74.5 51.5 85.6506201 50.3582154 83.464224 44.7707587"></polygon>
<path d="M133.5,107.5 L114.5,123.5" id="Line-2-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="114.5 123.5 124.693448 118.838068 120.828634 114.2486"></polygon>
<path d="M313.070628,109.5 L352.425466,109.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="352.425466 109.5 341.625466 106.5 341.625466 112.5"></polygon>
<path d="M170.5,107.5 L188.5,122.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="188.5 122.5 182.123763 113.281345 178.282657 117.890672"></polygon>
<path d="M202.5,154.5 L220.5,169.5" id="Line-Copy-6" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-6-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="220.5 169.5 214.123763 160.281345 210.282657 164.890672"></polygon>
<path d="M170.5,87.5 L190.5,80.5" id="Line-Copy-5" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-5-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="190.5 80.5 179.315278 81.2362095 181.297381 86.8993597"></polygon>
<path d="M209.5,120.5 L223.5,98.5" id="Line-Copy-4" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-4-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="223.5 98.5 215.17076 106.000918 220.232729 109.222171"></polygon>
<path d="M46.5,82.5 L78.5,122.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-3-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="78.5 122.5 74.0958999 112.192532 69.4106871 115.940702"></polygon>
<g id="noun_48910_cc" transform="translate(261.000000, 5.000000)">
<path d="M17.5030263,1.75054945 L12.4969737,1.75054945 C12.3098684,1.75054945 12.1571053,1.90364835 12.1571053,2.09156044 L12.1571053,3.21745055 L17.8432895,3.21745055 L17.8432895,2.09156044 C17.8432895,1.90364835 17.6905263,1.75054945 17.5030263,1.75054945 L17.5030263,1.75054945 L17.5030263,1.75054945 Z" id="Shape"></path>
<path d="M28.3638158,3.21745055 L19.5896053,3.21745055 L19.5896053,2.09156044 C19.5896053,0.937978022 18.6540789,0 17.5030263,0 L12.4969737,0 C11.3463158,0 10.4103947,0.937978022 10.4103947,2.09156044 L10.4103947,3.21745055 L1.63657895,3.21745055 C0.9375,3.21745055 0.370657895,3.78514286 0.370657895,4.48575824 L0.370657895,4.57516484 C0.370657895,5.27578022 0.9375,5.84347253 1.63657895,5.84347253 L28.3638158,5.84347253 C29.0628947,5.84347253 29.6297368,5.27578022 29.6297368,4.57516484 L29.6297368,4.48575824 C29.6297368,3.78514286 29.0625,3.21745055 28.3638158,3.21745055 L28.3638158,3.21745055 L28.3638158,3.21745055 Z M17.8432895,3.21745055 L12.1571053,3.21745055 L12.1571053,2.09156044 C12.1571053,1.90364835 12.3098684,1.75054945 12.4969737,1.75054945 L17.5034211,1.75054945 C17.6909211,1.75054945 17.8432895,1.90364835 17.8432895,2.09156044 L17.8432895,3.21745055 L17.8432895,3.21745055 L17.8432895,3.21745055 Z" id="Shape" fill="#D0021B"></path>
<path d="M26.0542105,6.28101099 L3.7275,6.28101099 C2.42960526,6.28101099 1.37723684,6.0567033 1.37723684,7.35784615 L3.13973684,33.195956 C3.13973684,34.4959121 4.1925,35.6047912 5.49039474,35.6047912 L24.2921053,35.6047912 C25.59,35.6047912 26.6423684,34.4959121 26.6423684,33.195956 L28.4048684,7.35784615 C28.4044737,6.0567033 27.3521053,6.28101099 26.0542105,6.28101099 L26.0542105,6.28101099 L26.0542105,6.28101099 Z M9.63710526,32.1927033 C9.26013158,32.2053626 8.94552632,31.932 8.93289474,31.5807033 L8.23894737,11.664 C8.22671053,11.3127033 8.52236842,11.0171868 8.89815789,11.0041319 C9.27513158,10.9910769 9.58973684,11.2652308 9.60236842,11.6165275 L10.2963158,31.5332308 C10.3085526,31.8841319 10.0132895,32.180044 9.63710526,32.1927033 L9.63710526,32.1927033 L9.63710526,32.1927033 Z M15.6809211,31.5632967 C15.6809211,31.9145934 15.3753947,32.1998242 14.9988158,32.1998242 C14.6222368,32.1998242 14.3167105,31.9141978 14.3167105,31.5632967 L14.3167105,11.6343297 C14.3167105,11.2826374 14.6222368,10.9978022 14.9988158,10.9978022 C15.3753947,10.9978022 15.6809211,11.2826374 15.6809211,11.6343297 L15.6809211,31.5632967 L15.6809211,31.5632967 L15.6809211,31.5632967 Z M21.0651316,31.5810989 C21.0528947,31.9323956 20.7378947,32.2057582 20.3609211,32.1930989 C19.9847368,32.1804396 19.6894737,31.8845275 19.7017105,31.5332308 L20.3956579,11.6165275 C20.4078947,11.2652308 20.7225,10.9910769 21.0994737,11.0041319 C21.4756579,11.0175824 21.7713158,11.3127033 21.7590789,11.664 L21.0651316,31.5810989 L21.0651316,31.5810989 L21.0651316,31.5810989 Z" id="Shape" fill="#D0021B"></path>
</g>
<text id="unreachables" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="296" y="29">unreachables</tspan>
</text>
<g id="Group" transform="translate(83.500000, 78.500000) rotate(270.000000) translate(-83.500000, -78.500000) translate(79.000000, 74.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy" transform="translate(34.500000, 64.500000) rotate(270.000000) translate(-34.500000, -64.500000) translate(30.000000, 60.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,-8.8817842e-16 4.5,-8.8817842e-16 C6.98126358,-8.8817842e-16 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-2" transform="translate(83.500000, 139.500000) rotate(270.000000) translate(-83.500000, -139.500000) translate(79.000000, 135.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-3" transform="translate(135.500000, 146.500000) rotate(270.000000) translate(-135.500000, -146.500000) translate(131.000000, 142.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-4" transform="translate(133.500000, 86.500000) rotate(270.000000) translate(-133.500000, -86.500000) translate(129.000000, 82.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-5" transform="translate(183.500000, 136.500000) rotate(270.000000) translate(-183.500000, -136.500000) translate(179.000000, 132.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 -1.26217745e-29,6.98144808 -1.26217745e-29,4.5 C-1.26217745e-29,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Rectangle-2-Copy-9-Clipped" transform="translate(219.000000, 177.000000)">
<mask id="mask-26" fill="white">
<use xlink:href="#path-25"></use>
</mask>
<g id="path-25"></g>
<g id="Rectangle-2-Copy-9" mask="url(#mask-26)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-25" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Group-Copy-7" transform="translate(226.500000, 184.500000) rotate(270.000000) translate(-226.500000, -184.500000) translate(222.000000, 180.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 -1.26217745e-29,6.98144808 -1.26217745e-29,4.5 C-1.26217745e-29,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-6" transform="translate(203.500000, 76.500000) rotate(270.000000) translate(-203.500000, -76.500000) translate(199.000000, 72.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<path d="M187.5,41.5 L208.5,62.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="208.5 62.5 202.984567 52.7419264 198.741926 56.9845671"></polygon>
<path id="Line" d="M367.026599,89.8074683 L370.905564,94.6561738 L369.343826,95.9055639 L365.464862,91.0568584 L360.779649,94.8050287 L357.5,79.5 L371.711812,86.059298 L367.026599,89.8074683 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-5@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.6 KiB

29
1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="144px" height="159px" viewBox="0 0 144 159" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>memory-user-john-admin.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="memory-user-john-admin.svg">
<text id="user" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="12" y="67">user</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="16" y="93" width="118" height="48"></rect>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="30" y="130">name: "John"</tspan>
</text>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="44" y="110">Object</tspan>
</text>
<path id="Line" d="M53.5,65.5 L53.5,47.5 L55.5,47.5 L55.5,65.5 L61.5,65.5 L54.5,79.5 L47.5,65.5 L53.5,65.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="admin" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="92" y="67">admin</tspan>
</text>
<path id="Line-Copy" d="M81.5,65.5 L81.5,47.5 L83.5,47.5 L83.5,65.5 L89.5,65.5 L82.5,79.5 L75.5,65.5 L81.5,65.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="27" y="16" width="93" height="26"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="43" y="33">&lt;global&gt;</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
1-js/04-object-basics/02-garbage-collection/memory-user-john-admin@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.5 KiB

30
1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.svg Normal file
View file

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="225px" height="159px" viewBox="0 0 225 159" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>memory-user-john-lost.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="memory-user-john-lost.svg">
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="61" y="89" width="118" height="48"></rect>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="83" y="126">name: "John"</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="97" y="106">Object</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="65" y="4" width="104" height="42"></rect>
<text id="user:-null" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="79" y="40">user: null</tspan>
</text>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="86" y="23">&lt;global&gt;</tspan>
</text>
<rect id="Rectangle-5" stroke="#D0021B" stroke-width="2" x="47" y="69" width="154" height="86"></rect>
<g id="noun_48910_cc" transform="translate(8.000000, 65.000000)">
<path d="M17.5030263,1.75054945 L12.4969737,1.75054945 C12.3098684,1.75054945 12.1571053,1.90364835 12.1571053,2.09156044 L12.1571053,3.21745055 L17.8432895,3.21745055 L17.8432895,2.09156044 C17.8432895,1.90364835 17.6905263,1.75054945 17.5030263,1.75054945 L17.5030263,1.75054945 Z" id="Shape"></path>
<path d="M28.3638158,3.21745055 L19.5896053,3.21745055 L19.5896053,2.09156044 C19.5896053,0.937978022 18.6540789,4.4408921e-16 17.5030263,4.4408921e-16 L12.4969737,4.4408921e-16 C11.3463158,4.4408921e-16 10.4103947,0.937978022 10.4103947,2.09156044 L10.4103947,3.21745055 L1.63657895,3.21745055 C0.9375,3.21745055 0.370657895,3.78514286 0.370657895,4.48575824 L0.370657895,4.57516484 C0.370657895,5.27578022 0.9375,5.84347253 1.63657895,5.84347253 L28.3638158,5.84347253 C29.0628947,5.84347253 29.6297368,5.27578022 29.6297368,4.57516484 L29.6297368,4.48575824 C29.6297368,3.78514286 29.0625,3.21745055 28.3638158,3.21745055 L28.3638158,3.21745055 Z M17.8432895,3.21745055 L12.1571053,3.21745055 L12.1571053,2.09156044 C12.1571053,1.90364835 12.3098684,1.75054945 12.4969737,1.75054945 L17.5034211,1.75054945 C17.6909211,1.75054945 17.8432895,1.90364835 17.8432895,2.09156044 L17.8432895,3.21745055 L17.8432895,3.21745055 Z" id="Shape" fill="#D0021B"></path>
<path d="M26.0542105,6.28101099 L3.7275,6.28101099 C2.42960526,6.28101099 1.37723684,6.0567033 1.37723684,7.35784615 L3.13973684,33.195956 C3.13973684,34.4959121 4.1925,35.6047912 5.49039474,35.6047912 L24.2921053,35.6047912 C25.59,35.6047912 26.6423684,34.4959121 26.6423684,33.195956 L28.4048684,7.35784615 C28.4044737,6.0567033 27.3521053,6.28101099 26.0542105,6.28101099 L26.0542105,6.28101099 Z M9.63710526,32.1927033 C9.26013158,32.2053626 8.94552632,31.932 8.93289474,31.5807033 L8.23894737,11.664 C8.22671053,11.3127033 8.52236842,11.0171868 8.89815789,11.0041319 C9.27513158,10.9910769 9.58973684,11.2652308 9.60236842,11.6165275 L10.2963158,31.5332308 C10.3085526,31.8841319 10.0132895,32.180044 9.63710526,32.1927033 L9.63710526,32.1927033 Z M15.6809211,31.5632967 C15.6809211,31.9145934 15.3753947,32.1998242 14.9988158,32.1998242 C14.6222368,32.1998242 14.3167105,31.9141978 14.3167105,31.5632967 L14.3167105,11.6343297 C14.3167105,11.2826374 14.6222368,10.9978022 14.9988158,10.9978022 C15.3753947,10.9978022 15.6809211,11.2826374 15.6809211,11.6343297 L15.6809211,31.5632967 L15.6809211,31.5632967 Z M21.0651316,31.5810989 C21.0528947,31.9323956 20.7378947,32.2057582 20.3609211,32.1930989 C19.9847368,32.1804396 19.6894737,31.8845275 19.7017105,31.5332308 L20.3956579,11.6165275 C20.4078947,11.2652308 20.7225,10.9910769 21.0994737,11.0041319 C21.4756579,11.0175824 21.7713158,11.3127033 21.7590789,11.664 L21.0651316,31.5810989 L21.0651316,31.5810989 Z" id="Shape" fill="#D0021B"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
1-js/04-object-basics/02-garbage-collection/memory-user-john-lost@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
1-js/04-object-basics/02-garbage-collection/memory-user-john.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.9 KiB

25
1-js/04-object-basics/02-garbage-collection/memory-user-john.svg Normal file
View file

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="144px" height="150px" viewBox="0 0 144 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>memory-user-john.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="memory-user-john.svg">
<text id="user" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="31" y="69">user</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="16" y="95" width="118" height="48"></rect>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="32" y="132">name: "John"</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="46" y="112">Object</tspan>
</text>
<path id="Line" d="M73.5,67.5 L73.5,49.5 L75.5,49.5 L75.5,67.5 L81.5,67.5 L74.5,81.5 L67.5,67.5 L73.5,67.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="27" y="12" width="93" height="26"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="43" y="29">&lt;global&gt;</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
1-js/04-object-basics/02-garbage-collection/memory-user-john@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
1-js/05-data-types/04-array/array-pop.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

69
1-js/05-data-types/04-array/array-pop.svg Normal file
View file

@ -0,0 +1,69 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="479px" height="148px" viewBox="0 0 479 148" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>array-pop.svg</title>
<desc>Created with sketchtool.</desc>
<g id="array" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="array-pop.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="103" y="82" width="35" height="52"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="139" y="82" width="35" height="52"></rect>
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="117" y="112">0</tspan>
</text>
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="154" y="112">1</tspan>
</text>
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="175" y="82" width="35" height="52"></rect>
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="190" y="112">2</tspan>
</text>
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="211" y="82" width="35" height="52"></rect>
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="226" y="112">3</tspan>
</text>
<text id="&quot;Apple&quot;" transform="translate(114.044088, 48.948024) rotate(-89.000000) translate(-114.044088, -48.948024) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="84.5440879" y="53.4480235">"Apple"</tspan>
</text>
<text id="&quot;Orange&quot;" transform="translate(151.052814, 44.448100) rotate(-89.000000) translate(-151.052814, -44.448100) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="117.052814" y="48.9480997">"Orange"</tspan>
</text>
<text id="&quot;Pear&quot;" transform="translate(187.535362, 52.447947) rotate(-89.000000) translate(-187.535362, -52.447947) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="162.035362" y="56.9479474">"Pear"</tspan>
</text>
<text id="&quot;Lemon&quot;" transform="translate(229.044088, 48.948024) rotate(-89.000000) translate(-229.044088, -48.948024) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="199.544088" y="53.4480235">"Lemon"</tspan>
</text>
<text id="length-=-4" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="8" y="59">length = 4</tspan>
</text>
<polygon id="Shape" fill="#EE6B47" transform="translate(306.000000, 107.500000) rotate(-90.000000) translate(-306.000000, -107.500000) " points="306 137 315 120.393834 309 120.393834 309 78 303 78 303 120.393834 297 120.393834"></polygon>
<text id="clear" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="285" y="96">clear</tspan>
</text>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="363" y="82" width="35" height="52"></rect>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="399" y="82" width="35" height="52"></rect>
<text id="-1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="377" y="112">0</tspan>
</text>
<text id="-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="414" y="112">1</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="435" y="82" width="35" height="52"></rect>
<text id="-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="450" y="112">2</tspan>
</text>
<text id="&quot;Apple&quot;" transform="translate(374.044088, 48.948024) rotate(-89.000000) translate(-374.044088, -48.948024) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="344.544088" y="53.4480235">"Apple"</tspan>
</text>
<text id="&quot;Orange&quot;" transform="translate(411.052814, 44.448100) rotate(-89.000000) translate(-411.052814, -44.448100) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="377.052814" y="48.9480997">"Orange"</tspan>
</text>
<text id="&quot;Pear&quot;" transform="translate(447.535362, 52.447947) rotate(-89.000000) translate(-447.535362, -52.447947) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="422.035362" y="56.9479474">"Pear"</tspan>
</text>
<text id="length-=-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="263" y="59">length = 3</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
1-js/05-data-types/04-array/array-pop@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
1-js/05-data-types/04-array/array-shift.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

101
1-js/05-data-types/04-array/array-shift.svg Normal file
View file

@ -0,0 +1,101 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="610px" height="175px" viewBox="0 0 610 175" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>array-shift.svg</title>
<desc>Created with sketchtool.</desc>
<g id="array" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="array-shift.svg">
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="63" y="116.973154">1</tspan>
</text>
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="84" y="86.973154" width="35" height="52"></rect>
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="99" y="116.973154">2</tspan>
</text>
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="120" y="86.973154" width="35" height="52"></rect>
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="135" y="116.973154">3</tspan>
</text>
<text id="&quot;Orange&quot;" transform="translate(60.052814, 49.448100) rotate(-89.000000) translate(-60.052814, -49.448100) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="26.0528141" y="53.9480997">"Orange"</tspan>
</text>
<text id="&quot;Pear&quot;" transform="translate(96.535362, 57.447947) rotate(-89.000000) translate(-96.535362, -57.447947) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="71.0353617" y="61.9479474">"Pear"</tspan>
</text>
<text id="&quot;Lemon&quot;" transform="translate(138.044088, 53.948024) rotate(-89.000000) translate(-138.044088, -53.948024) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="108.544088" y="58.4480235">"Lemon"</tspan>
</text>
<text id="length-=-4" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="172" y="63.973154">length = 4</tspan>
</text>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="230" y="86.973154" width="35" height="52"></rect>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="266" y="86.973154" width="35" height="52"></rect>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="302" y="86.973154" width="35" height="52"></rect>
<text id="-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="317" y="116.973154">2</tspan>
</text>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="338" y="86.973154" width="35" height="52"></rect>
<text id="-4" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="353" y="116.973154">3</tspan>
</text>
<text id="&quot;Orange&quot;" transform="translate(278.052814, 49.448100) rotate(-89.000000) translate(-278.052814, -49.448100) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="244.052814" y="53.9480997">"Orange"</tspan>
</text>
<text id="&quot;Pear&quot;" transform="translate(314.535362, 57.447947) rotate(-89.000000) translate(-314.535362, -57.447947) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="289.035362" y="61.9479474">"Pear"</tspan>
</text>
<text id="&quot;Lemon&quot;" transform="translate(356.044088, 53.948024) rotate(-89.000000) translate(-356.044088, -53.948024) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="326.544088" y="58.4480235">"Lemon"</tspan>
</text>
<text id="length-=-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="390" y="63.973154">length = 3</tspan>
</text>
<polygon id="Shape" fill="#EE6B47" transform="translate(195.000000, 112.473154) rotate(-90.000000) translate(-195.000000, -112.473154) " points="195 141.973154 204 125.366988 198 125.366988 198 82.973154 192 82.973154 192 125.366988 186 125.366988"></polygon>
<text id="clear" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="173" y="100.973154">clear</tspan>
</text>
<text id="move" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="393" y="98.973154">move</tspan>
<tspan x="393" y="117.973154"></tspan>
<tspan x="393" y="136.973154">elements</tspan>
<tspan x="393" y="155.973154">to the left</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="12" y="87" width="35" height="52"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="48" y="86.973154" width="35" height="52"></rect>
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="26" y="116.973154">0</tspan>
</text>
<text id="&quot;Apple&quot;" transform="translate(23.044088, 53.948024) rotate(-89.000000) translate(-23.044088, -53.948024) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="-6.45591207" y="58.4480235">"Apple"</tspan>
</text>
<polygon id="Shape-2" fill="#EE6B47" transform="translate(437.000000, 114.246103) rotate(-90.000000) translate(-437.000000, -114.246103) " points="437 158.519052 446 141.912886 440 141.912886 440 69.973154 433.442871 69.973154 434 141.912886 428 141.912886"></polygon>
<rect id="Rectangle-12" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="496" y="86.973154" width="35" height="52"></rect>
<rect id="Rectangle-9" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="532" y="86.973154" width="35" height="52"></rect>
<text id="-5" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="510" y="116.973154">0</tspan>
</text>
<text id="-6" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="547" y="116.973154">1</tspan>
</text>
<rect id="Rectangle-10" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="568" y="86.973154" width="35" height="52"></rect>
<text id="-7" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="583" y="116.973154">2</tspan>
</text>
<text id="&quot;Orange&quot;" transform="translate(506.052814, 49.448100) rotate(-89.000000) translate(-506.052814, -49.448100) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="472.052814" y="53.9480997">"Orange"</tspan>
</text>
<text id="&quot;Pear&quot;" transform="translate(542.535362, 57.447947) rotate(-89.000000) translate(-542.535362, -57.447947) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="517.035362" y="61.9479474">"Pear"</tspan>
</text>
<text id="&quot;Lemon&quot;" transform="translate(584.044088, 53.948024) rotate(-89.000000) translate(-584.044088, -53.948024) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="554.544088" y="58.4480235">"Lemon"</tspan>
</text>
<text id="-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="61" y="116.973154">1</tspan>
</text>
<text id="-2-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="280" y="116.973154">1</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
1-js/05-data-types/04-array/array-shift@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
1-js/05-data-types/04-array/array-speed.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.8 KiB

48
1-js/05-data-types/04-array/array-speed.svg Normal file
View file

@ -0,0 +1,48 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="354px" height="173px" viewBox="0 0 354 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>array-speed.svg</title>
<desc>Created with sketchtool.</desc>
<g id="array" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="array-speed.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="109" y="93" width="35" height="62"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="145" y="93" width="35" height="62"></rect>
<text id="0" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="122.5" y="128.5">0</tspan>
</text>
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="159.5" y="128.5">1</tspan>
</text>
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="181" y="93" width="35" height="62"></rect>
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="195.5" y="128.5">2</tspan>
</text>
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="217" y="93" width="35" height="62"></rect>
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="231.5" y="128.5">3</tspan>
</text>
<polygon id="Shape-5" fill="#EE6B47" transform="translate(326.500000, 106.500000) rotate(-90.000000) translate(-326.500000, -106.500000) " points="326.5 117.5 331 111.30787 328 111.30787 328 95.5 325 95.5 325 111.30787 322 111.30787"></polygon>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="264" y="95" width="46" height="22"></rect>
<text id="pop" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="273.806641" y="110">pop</tspan>
</text>
<polygon id="Shape-2" fill="#EE6B47" transform="translate(94.500000, 106.500000) rotate(-90.000000) translate(-94.500000, -106.500000) " points="94.5 117.5 99 111.30787 96 111.30787 96 95.5 93 95.5 93 111.30787 90 111.30787"></polygon>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="19" y="96" width="61" height="22"></rect>
<text id="unshift" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="23.8334961" y="112">unshift</tspan>
</text>
<polygon id="Shape-3" fill="#EE6B47" transform="translate(326.500000, 141.500000) scale(-1, 1) rotate(-90.000000) translate(-326.500000, -141.500000) " points="326.5 152.5 331 146.30787 328 146.30787 328 130.5 325 130.5 325 146.30787 322 146.30787"></polygon>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" transform="translate(287.000000, 141.000000) scale(-1, 1) translate(-287.000000, -141.000000) " x="264" y="130" width="46" height="22"></rect>
<text id="push" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="269.889648" y="146">push</tspan>
</text>
<polygon id="Shape-4" fill="#EE6B47" transform="translate(93.500000, 141.500000) scale(-1, 1) rotate(-90.000000) translate(-93.500000, -141.500000) " points="93.5 152.5 98 146.30787 95 146.30787 95 130.5 92 130.5 92 146.30787 89 146.30787"></polygon>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" transform="translate(48.500000, 142.000000) scale(-1, 1) translate(-48.500000, -142.000000) " x="18" y="131" width="61" height="22"></rect>
<text id="shift" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="32.534668" y="147">shift</tspan>
</text>
<path d="M329.692702,35.9208538 C328.741159,33.4418996 322.380448,25.276771 321.06325,24.8393085 C319.747733,24.402684 316.967917,24.5476668 316.967917,24.5476668 C315.724691,10.6226153 312.654031,9.09233456 310.534075,7.5612158 C308.413277,6.0309351 308.631829,12.0824997 308.631829,12.0824997 C307.90052,9.53063511 304.170841,5.37474135 301.611258,6.0309351 C299.051675,6.68712885 300.442004,15.0718268 300.807658,17.403284 C301.174994,19.7372554 304.464206,23.0894585 305.705751,24.9122189 C306.948977,26.7341413 306.291639,28.3381704 306.291639,28.3381704 C305.267806,29.7972168 305.414068,33.4662031 305.414068,33.4662031 C302.856166,33.052206 300.369713,35.9937642 300.369713,35.9937642 C294.591528,33.5164861 291.284664,33.4662031 291.284664,33.4662031 C273.750048,33.6405177 271.518293,50.2808537 271.260234,55.8002561 C270.633997,55.5287276 269.763991,55.5362701 268.640969,56.4178995 C266.05953,58.4451443 267.901253,60.9291268 267.901253,60.9291268 C267.174147,60.7296707 266.453765,57.3883623 266.453765,57.3883623 C264.803696,60.9064994 267.803746,63.3091909 267.803746,63.3091909 C266.685767,63.5480354 264.836478,62.2985017 264.836478,62.2985017 C265.01132,62.533994 266.168807,64.3316129 268.417373,66.6789931 C271.25519,69.6389884 275.440466,69.0012318 277.504104,68.9216169 C277.578075,68.9367018 277.641119,68.9299974 277.69996,68.9132364 C277.718453,68.9132364 277.741149,68.9115603 277.759642,68.9115603 L277.769729,68.8864188 C278.094195,68.7422741 278.351414,68.2838603 279.698873,68.7338936 L281.430479,69.8200074 C281.430479,69.8200074 296.731659,69.9616379 299.127328,69.8200074 C300.426873,69.7429067 297.810971,66.0295037 297.810971,66.0295037 C302.563642,65.737024 305.123225,63.987174 305.123225,63.987174 L312.46574,69.9616379 L320.168867,69.9616379 C321.682762,69.9616379 320.754755,68.3442 320.754755,68.3442 L313.531603,61.7998615 L314.335203,60.4154016 C317.114179,59.8321183 319.088714,57.1344329 319.379557,56.624898 C319.673762,56.1145251 319.454369,52.3240215 319.454369,52.3240215 C319.454369,52.3240215 319.747733,52.6885736 320.989278,51.1566168 C322.233345,49.625498 320.843857,47.2202923 320.479043,46.7090813 C320.114229,46.2003845 319.382079,42.989812 319.382079,42.989812 C319.382079,42.989812 324.280171,42.6981704 325.451107,42.114887 C326.61868,41.5341178 330.642564,38.3989699 329.692702,35.9208538 L329.692702,35.9208538 Z" id="Shape" fill="#E8C48F"></path>
<path d="M85.866,34.289 C81.305,36.924 81.449,43.361 70.284,51.976 C67.566,54.073 73.161,65.079 70.738,67.532 C68.27,70.031 58.388,70.155 55.999,68.792 C52.482,66.785 55.239,61.549 56.026,53.906 C48.82,54.641 46.485,54.521 39.243,54.219 C40.347,60.018 41.962,66.465 39.62,68.589 C37.711,70.32 28.422,70.508 25.517,68.611 C21.882,66.237 28.151,52.736 26.026,52.518 C23.581,52.268 8.673,52.852 11.31,36.676 C14.099,40.752 18.87,44.588 24.342,42.864 C25.088,29.141 33.413,16.796 46.7,16.796 C59.987,16.796 69.384,27.103 69.454,39.875 C77.321,33.967 71.538,19.449 80.968,14.018 C87.68,10.152 95.531,12.149 99.275,18.275 C101.23,21.474 101.84,27.115 99.416,30.213 C95.809,34.823 88.995,32.481 85.866,34.289 L85.866,34.289 Z" id="Shape" fill="#E8C48F"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
1-js/05-data-types/04-array/array-speed@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 22 KiB

10
1-js/05-data-types/04-array/article.md
View file

@ -100,7 +100,7 @@ A [queue](https://en.wikipedia.org/wiki/Queue_(abstract_data_type)) is one of th
- `push` appends an element to the end. - `push` appends an element to the end.
- `shift` get an element from the beginning, advancing the queue, so that the 2nd element becomes the 1st. - `shift` get an element from the beginning, advancing the queue, so that the 2nd element becomes the 1st.
![](queue.png) ![](queue.svg)
Arrays support both operations. Arrays support both operations.
@ -117,7 +117,7 @@ So new elements are added or taken always from the "end".
A stack is usually illustrated as a pack of cards: new cards are added to the top or taken from the top: A stack is usually illustrated as a pack of cards: new cards are added to the top or taken from the top:
![](stack.png) ![](stack.svg)
For stacks, the latest pushed item is received first, that's also called LIFO (Last-In-First-Out) principle. For queues, we have FIFO (First-In-First-Out). For stacks, the latest pushed item is received first, that's also called LIFO (Last-In-First-Out) principle. For queues, we have FIFO (First-In-First-Out).
@ -239,7 +239,7 @@ Please think of arrays as special structures to work with the *ordered data*. Th
Methods `push/pop` run fast, while `shift/unshift` are slow. Methods `push/pop` run fast, while `shift/unshift` are slow.
![](array-speed.png) ![](array-speed.svg)
Why is it faster to work with the end of an array than with its beginning? Let's see what happens during the execution: Why is it faster to work with the end of an array than with its beginning? Let's see what happens during the execution:
@ -255,7 +255,7 @@ The `shift` operation must do 3 things:
2. Move all elements to the left, renumber them from the index `1` to `0`, from `2` to `1` and so on. 2. Move all elements to the left, renumber them from the index `1` to `0`, from `2` to `1` and so on.
3. Update the `length` property. 3. Update the `length` property.
![](array-shift.png) ![](array-shift.svg)
**The more elements in the array, the more time to move them, more in-memory operations.** **The more elements in the array, the more time to move them, more in-memory operations.**
@ -269,7 +269,7 @@ The actions for the `pop` operation:
fruits.pop(); // take 1 element from the end fruits.pop(); // take 1 element from the end
``` ```
![](array-pop.png) ![](array-pop.svg)
**The `pop` method does not need to move anything, because other elements keep their indexes. That's why it's blazingly fast.** **The `pop` method does not need to move anything, because other elements keep their indexes. That's why it's blazingly fast.**

Some files were not shown because too many files have changed in this diff Show more