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

BIN
1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

72
1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.svg Normal file
View file

@ -0,0 +1,72 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="640px" height="225px" viewBox="0 0 640 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>fibonacci-recursion-tree.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="fibonacci-recursion-tree.svg">
<text id="fib(5)" font-family="Consolas" font-size="14" font-weight="normal">
<tspan x="355" y="11" fill="#000000">fib</tspan>
<tspan x="378.091797" y="11" fill="#999999">(</tspan>
<tspan x="385.789062" y="11" fill="#000000">5</tspan>
<tspan x="393.486328" y="11" fill="#999999">)</tspan>
</text>
<path id="Line-Copy-4" d="M494.818022,45.3689512 L412.251608,20.1644669 L412.835533,18.2516076 L495.401947,43.4560918 L497.153724,37.7175137 L508.5,48.5 L493.066245,51.1075294 L494.818022,45.3689512 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-18" d="M266.510054,43.2332664 L343.643062,18.2404482 L344.259552,20.1430623 L267.126544,45.1358805 L268.976012,50.843723 L253.5,48.5 L264.660586,37.5254238 L266.510054,43.2332664 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-13" d="M170.047093,139.386374 L152.092534,124.637987 L153.362013,123.092534 L171.316572,137.840922 L175.125008,133.204564 L181.5,147.5 L166.238656,144.022732 L170.047093,139.386374 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-14" d="M512.047093,139.386374 L494.092534,124.637987 L495.362013,123.092534 L513.316572,137.840922 L517.125008,133.204564 L523.5,147.5 L508.238656,144.022732 L512.047093,139.386374 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-17" d="M443.359568,137.290627 L458.022445,123.085965 L459.414035,124.522445 L444.751158,138.727107 L448.92593,143.036549 L434,147.75 L439.184797,132.981185 L443.359568,137.290627 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-20" d="M265.359568,137.290627 L280.022445,123.085965 L281.414035,124.522445 L266.751158,138.727107 L270.92593,143.036549 L256,147.75 L261.184797,132.981185 L265.359568,137.290627 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-21" d="M95.3595679,137.290627 L110.022445,123.085965 L111.414035,124.522445 L96.7511583,138.727107 L100.92593,143.036549 L86,147.75 L91.1847966,132.981185 L95.3595679,137.290627 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-15" d="M337.047093,139.386374 L319.092534,124.637987 L320.362013,123.092534 L338.316572,137.840922 L342.125008,133.204564 L348.5,147.5 L333.238656,144.022732 L337.047093,139.386374 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-16" d="M107.047093,190.386374 L89.0925343,175.637987 L90.3620132,174.092534 L108.316572,188.840922 L112.125008,184.204564 L118.5,198.5 L103.238656,195.022732 L107.047093,190.386374 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-22" d="M40.6834281,188.840922 L58.6379868,174.092534 L59.9074657,175.637987 L41.952907,190.386374 L45.7613435,195.022732 L30.5,198.5 L36.8749916,184.204564 L40.6834281,188.840922 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-8" d="M277.442455,93.3521335 L241.166064,75.9696958 L242.030304,74.1660638 L278.306696,91.5485014 L280.899417,86.1376053 L290.5,98.5 L274.849734,98.7630297 L277.442455,93.3521335 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-9" d="M581.442455,93.3521335 L545.166064,75.9696958 L546.030304,74.1660638 L582.306696,91.5485014 L584.899417,86.1376053 L594.5,98.5 L578.849734,98.7630297 L581.442455,93.3521335 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-7" d="M498.336665,90.9572304 L529.403523,74.1445778 L530.355422,75.9035227 L499.288564,92.7161753 L502.144263,97.99301 L486.5,98.5 L495.480966,85.6803957 L498.336665,90.9572304 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-19" d="M164.336665,90.9572304 L195.403523,74.1445778 L196.355422,75.9035227 L165.288564,92.7161753 L168.144263,97.99301 L152.5,98.5 L161.480966,85.6803957 L164.336665,90.9572304 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="fib(4)" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="198" y="68">fib(4)</tspan>
</text>
<text id="fib(3)" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="518" y="68">fib(3)</tspan>
</text>
<text id="fib(3)" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="111" y="117">fib(3)</tspan>
</text>
<text id="fib(2)" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="277" y="117">fib(2)</tspan>
</text>
<text id="fib(0)" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="328" y="164">fib(0)</tspan>
</text>
<text id="fib(1)" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="239" y="164">fib(1)</tspan>
</text>
<text id="fib(1)" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="164" y="164">fib(1)</tspan>
</text>
<text id="fib(2)-copy-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="456" y="117">fib(2)</tspan>
</text>
<text id="fib(0)-copy-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="514" y="164">fib(0)</tspan>
</text>
<text id="fib(1)-copy-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="409" y="164">fib(1)</tspan>
</text>
<text id="fib(1)-copy-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="580" y="117">fib(1)</tspan>
</text>
<text id="fib(2)-copy" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="54" y="164">fib(2)</tspan>
</text>
<text id="fib(0)-copy" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="102" y="218">fib(0)</tspan>
</text>
<text id="fib(1)-copy" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
<tspan x="5" y="219">fib(1)</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 39 KiB

2
1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/solution.md
View file

@ -29,7 +29,7 @@ Here we can see that the value of `fib(3)` is needed for both `fib(5)` and `fib(
Here's the full recursion tree:
![fibonacci recursion tree](fibonacci-recursion-tree.png)
![fibonacci recursion tree](fibonacci-recursion-tree.svg)
We can clearly notice that `fib(3)` is evaluated two times and `fib(2)` is evaluated three times. The total amount of computations grows much faster than `n`, making it enormous even for `n=77`.

10
1-js/06-advanced-functions/01-recursion/article.md
View file

@ -373,7 +373,7 @@ The code is short and easy to understand (hopefully?). That's the power of recur
Here's the diagram of calls:
![recursive salaries](recursive-salaries.png)
![recursive salaries](recursive-salaries.svg)
We can easily see the principle: for an object `{...}` subcalls are made, while arrays `[...]` are the "leaves" of the recursion tree, they give immediate result.
@ -444,7 +444,7 @@ let list = {
Graphical representation of the list:
![linked list](linked-list.png)
![linked list](linked-list.svg)
An alternative code for creation:
@ -464,7 +464,7 @@ let secondList = list.next.next;
list.next.next = null;
```
![linked list split](linked-list-split.png)
![linked list split](linked-list-split.svg)
To join:
@ -488,7 +488,7 @@ list = { value: "new item", next: list };
*/!*
```
![linked list](linked-list-0.png)
![linked list](linked-list-0.svg)
To remove a value from the middle, change `next` of the previous one:
@ -496,7 +496,7 @@ To remove a value from the middle, change `next` of the previous one:
list.next = list.next.next;
```
![linked list](linked-list-remove-1.png)
![linked list](linked-list-remove-1.svg)
We made `list.next` jump over `1` to value `2`. The value `1` is now excluded from the chain. If it's not stored anywhere else, it will be automatically removed from the memory.

BIN
1-js/06-advanced-functions/01-recursion/linked-list-0.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.6 KiB

71
1-js/06-advanced-functions/01-recursion/linked-list-0.svg Normal file
View file

@ -0,0 +1,71 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="816px" height="108px" viewBox="0 0 816 108" 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>linked-list-0.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="linked-list-0.svg">
<rect id="Rectangle-15" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="219" y="61" width="78" height="32"></rect>
<text id="value" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="221" y="51">value</tspan>
</text>
<text id="-8" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="253" y="81">1</tspan>
</text>
<path id="Line-21" d="M341.27,77 L282.73,77 L282.73,75 L341.27,75 L341.27,69 L355.27,76 L341.27,83 L341.27,77 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="307" y="65">next</tspan>
</text>
<rect id="Rectangle-15-Copy" stroke="#EE6B47" stroke-width="2" fill="#FFF9EB" x="48" y="61" width="93" height="32"></rect>
<text id="value-copy" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="50" y="51">value</tspan>
</text>
<text id="&quot;new-item&quot;" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="56" y="79">"new item"</tspan>
</text>
<path id="Line-21-Copy" d="M200.27,77 L141.73,77 L141.73,75 L200.27,75 L200.27,69 L214.27,76 L200.27,83 L200.27,77 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next-copy" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="166" y="65">next</tspan>
</text>
<rect id="Rectangle-11" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="359" y="61" width="78" height="32"></rect>
<text id="value-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="361" y="51">value</tspan>
</text>
<text id="-9" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="393" y="81">2</tspan>
</text>
<path id="Line-22" d="M481.27,77 L422.73,77 L422.73,75 L481.27,75 L481.27,69 L495.27,76 L481.27,83 L481.27,77 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="447" y="65">next</tspan>
</text>
<rect id="Rectangle-13" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="498" y="61" width="78" height="32"></rect>
<text id="value-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="500" y="51">value</tspan>
</text>
<text id="-10" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="532" y="81">3</tspan>
</text>
<path id="Line-23" d="M620.27,77 L561.73,77 L561.73,75 L620.27,75 L620.27,69 L634.27,76 L620.27,83 L620.27,77 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="586" y="65">next</tspan>
</text>
<rect id="Rectangle-14" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="638" y="61" width="78" height="32"></rect>
<text id="value-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="640" y="51">value</tspan>
</text>
<text id="4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="672" y="81">4</tspan>
</text>
<path id="Line-24" d="M760.27,77 L701.73,77 L701.73,75 L760.27,75 L760.27,69 L774.27,76 L760.27,83 L760.27,77 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="726" y="65">next</tspan>
</text>
<text id="null" font-family="Consolas-Italic, Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="782" y="80">null</tspan>
</text>
<text id="list" font-family="Consolas-Italic, Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="8" y="80">list</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
1-js/06-advanced-functions/01-recursion/linked-list-0@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
1-js/06-advanced-functions/01-recursion/linked-list-remove-1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

71
1-js/06-advanced-functions/01-recursion/linked-list-remove-1.svg Normal file
View file

@ -0,0 +1,71 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="670px" height="143px" viewBox="0 0 670 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>linked-list-remove-1.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="linked-list-remove-1.svg">
<rect id="Rectangle-15" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="47" y="30" width="90" height="32"></rect>
<text id="value" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="43" y="20">value</tspan>
</text>
<text id="&quot;new-item&quot;" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="54" y="48">"new item"</tspan>
</text>
<path id="Line-21" d="M190.27,46 L131.73,46 L131.73,44 L190.27,44 L190.27,38 L204.27,45 L190.27,52 L190.27,46 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="156" y="34">next</tspan>
</text>
<rect id="Rectangle-15-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" opacity="0.6" x="117" y="104" width="78" height="32"></rect>
<text id="value-copy" opacity="0.6" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="118" y="94">value</tspan>
</text>
<text id="1" opacity="0.6" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="149" y="124">1</tspan>
</text>
<path id="Line-21-Copy" d="M219.821975,85.6654238 L181.663909,120.412668 L180.317332,118.933909 L218.475398,84.1866647 L214.435664,79.7503875 L229.5,75.5 L223.861709,90.101701 L219.821975,85.6654238 Z" fill="#EE6B47" fill-rule="nonzero" opacity="0.6"></path>
<text id="next-copy" opacity="0.6" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="214" y="108">next</tspan>
</text>
<rect id="Rectangle-11" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="208" y="30" width="78" height="32"></rect>
<text id="value-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="210" y="20">value</tspan>
</text>
<text id="-9" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="242" y="50">2</tspan>
</text>
<path id="Line-22" d="M330.27,46 L271.73,46 L271.73,44 L330.27,44 L330.27,38 L344.27,45 L330.27,52 L330.27,46 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="296" y="34">next</tspan>
</text>
<rect id="Rectangle-13" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="347" y="30" width="78" height="32"></rect>
<text id="value-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="349" y="20">value</tspan>
</text>
<text id="-10" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="381" y="50">3</tspan>
</text>
<path id="Line-23" d="M469.27,46 L410.73,46 L410.73,44 L469.27,44 L469.27,38 L483.27,45 L469.27,52 L469.27,46 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="435" y="34">next</tspan>
</text>
<rect id="Rectangle-14" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="487" y="30" width="78" height="32"></rect>
<text id="value-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="489" y="20">value</tspan>
</text>
<text id="4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="521" y="50">4</tspan>
</text>
<path id="Line-24" d="M609.27,46 L550.73,46 L550.73,44 L609.27,44 L609.27,38 L623.27,45 L609.27,52 L609.27,46 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="575" y="34">next</tspan>
</text>
<text id="null" font-family="Consolas-Italic, Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="631" y="49">null</tspan>
</text>
<text id="list" font-family="Consolas-Italic, Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="8" y="49">list</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
1-js/06-advanced-functions/01-recursion/linked-list-remove-1@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
1-js/06-advanced-functions/01-recursion/linked-list-split.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.1 KiB

66
1-js/06-advanced-functions/01-recursion/linked-list-split.svg Normal file
View file

@ -0,0 +1,66 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="409px" height="150px" viewBox="0 0 409 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>linked-list-split.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="linked-list-split.svg">
<rect id="Rectangle-15" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="88" y="30" width="78" height="32"></rect>
<text id="value" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="90" y="20">value</tspan>
</text>
<text id="-8" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="122" y="50">1</tspan>
</text>
<path id="Line-21" d="M210.27,46 L151.73,46 L151.73,44 L210.27,44 L210.27,38 L224.27,45 L210.27,52 L210.27,46 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="176" y="34">next</tspan>
</text>
<rect id="Rectangle-11" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="228" y="30" width="78" height="32"></rect>
<text id="value-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="230" y="20">value</tspan>
</text>
<text id="-9" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="262" y="50">2</tspan>
</text>
<path id="Line-22" d="M350.27,46 L291.73,46 L291.73,44 L350.27,44 L350.27,38 L364.27,45 L350.27,52 L350.27,46 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="316" y="34">next</tspan>
</text>
<rect id="Rectangle-13" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="87" y="95" width="78" height="32"></rect>
<text id="value-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="89" y="85">value</tspan>
</text>
<text id="-10" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="121" y="115">3</tspan>
</text>
<path id="Line-23" d="M209.27,111 L150.73,111 L150.73,109 L209.27,109 L209.27,103 L223.27,110 L209.27,117 L209.27,111 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="175" y="99">next</tspan>
</text>
<rect id="Rectangle-14" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="227" y="95" width="78" height="32"></rect>
<text id="value-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="229" y="85">value</tspan>
</text>
<text id="4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="261" y="115">4</tspan>
</text>
<path id="Line-24" d="M349.27,111 L290.73,111 L290.73,109 L349.27,109 L349.27,103 L363.27,110 L349.27,117 L349.27,111 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="315" y="99">next</tspan>
</text>
<text id="null" font-family="Consolas-Italic, Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="371" y="114">null</tspan>
</text>
<text id="null-copy" font-family="Consolas-Italic, Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="371" y="49">null</tspan>
</text>
<text id="secondList" font-family="Consolas-Italic, Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="5" y="114">secondList</tspan>
</text>
<text id="list" font-family="Consolas-Italic, Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="50" y="49">list</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
1-js/06-advanced-functions/01-recursion/linked-list-split@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
1-js/06-advanced-functions/01-recursion/linked-list.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.1 KiB

60
1-js/06-advanced-functions/01-recursion/linked-list.svg Normal file
View file

@ -0,0 +1,60 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="652px" height="77px" viewBox="0 0 652 77" 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>linked-list.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="linked-list.svg">
<rect id="Rectangle-15" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="48" y="30" width="78" height="32"></rect>
<text id="value" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="50" y="20">value</tspan>
</text>
<text id="-8" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="82" y="50">1</tspan>
</text>
<path id="Line-21" d="M170.27,46 L111.73,46 L111.73,44 L170.27,44 L170.27,38 L184.27,45 L170.27,52 L170.27,46 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="136" y="34">next</tspan>
</text>
<rect id="Rectangle-11" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="188" y="30" width="78" height="32"></rect>
<text id="value-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="190" y="20">value</tspan>
</text>
<text id="-9" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="222" y="50">2</tspan>
</text>
<path id="Line-22" d="M310.27,46 L251.73,46 L251.73,44 L310.27,44 L310.27,38 L324.27,45 L310.27,52 L310.27,46 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="276" y="34">next</tspan>
</text>
<rect id="Rectangle-13" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="327" y="30" width="78" height="32"></rect>
<text id="value-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="329" y="20">value</tspan>
</text>
<text id="-10" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="361" y="50">3</tspan>
</text>
<path id="Line-23" d="M449.27,46 L390.73,46 L390.73,44 L449.27,44 L449.27,38 L463.27,45 L449.27,52 L449.27,46 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="415" y="34">next</tspan>
</text>
<rect id="Rectangle-14" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="467" y="30" width="78" height="32"></rect>
<text id="value-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="469" y="20">value</tspan>
</text>
<text id="4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="501" y="50">4</tspan>
</text>
<path id="Line-24" d="M589.27,46 L530.73,46 L530.73,44 L589.27,44 L589.27,38 L603.27,45 L589.27,52 L589.27,46 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="next-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="555" y="34">next</tspan>
</text>
<text id="null" font-family="Consolas-Italic, Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="610" y="49">null</tspan>
</text>
<text id="list" font-family="Consolas-Italic, Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="10" y="49">list</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
1-js/06-advanced-functions/01-recursion/linked-list@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
1-js/06-advanced-functions/01-recursion/recursive-salaries.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 28 KiB

90
1-js/06-advanced-functions/01-recursion/recursive-salaries.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 267 KiB

BIN
1-js/06-advanced-functions/01-recursion/recursive-salaries@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 67 KiB

BIN
1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

93
1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 116 KiB

BIN
1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 57 KiB

2
1-js/06-advanced-functions/03-closure/8-make-army/solution.md
View file

@ -84,7 +84,7 @@ Now it works correctly, because every time the code block in `for (let i=0...) {
So, the value of `i` now lives a little bit closer. Not in `makeArmy()` Lexical Environment, but in the Lexical Environment that corresponds the current loop iteration. That's why now it works.
![](lexenv-makearmy.png)
![](lexenv-makearmy.svg)
Here we rewrote `while` into `for`.

28
1-js/06-advanced-functions/03-closure/article.md
View file

@ -74,7 +74,7 @@ The Lexical Environment object consists of two parts:
For instance, in this simple code, there is only one Lexical Environment:
![lexical environment](lexical-environment-global.png)
![lexical environment](lexical-environment-global.svg)
This is a so-called global Lexical Environment, associated with the whole script.
@ -82,7 +82,7 @@ On the picture above, the rectangle means Environment Record (variable store) an
Here's the bigger picture of what happens when a `let` changes:
![lexical environment](lexical-environment-global-2.png)
![lexical environment](lexical-environment-global-2.svg)
Rectangles on the right-hand side demonstrate how the global Lexical Environment changes during the execution:
@ -110,7 +110,7 @@ That is why we can call a function declaration before it is defined.
The code below demonstrates that the Lexical Environment is non-empty from the beginning. It has `say`, because that's a Function Declaration. And later it gets `phrase`, declared with `let`:
![lexical environment](lexical-environment-global-3.png)
![lexical environment](lexical-environment-global-3.svg)
### Inner and outer Lexical Environment
@ -134,7 +134,7 @@ For instance, for `say("John")`, it looks like this (the execution is at the lin
say("John"); // Hello, John
```-->
![lexical environment](lexical-environment-simple.png)
![lexical environment](lexical-environment-simple.svg)
So, during the function call we have two Lexical Environments: the inner one (for the function call) and the outer one (global):
@ -156,7 +156,7 @@ Let's see how the search proceeds in our example:
- When the `alert` inside `say` wants to access `name`, it finds it immediately in the function Lexical Environment.
- When it wants to access `phrase`, then there is no `phrase` locally, so it follows the reference to the enclosing Lexical Environment and finds it there.
![lexical environment lookup](lexical-environment-simple-lookup.png)
![lexical environment lookup](lexical-environment-simple-lookup.svg)
Now we can give the answer to the first question from the beginning of the chapter.
@ -265,7 +265,7 @@ How does the counter work internally?
When the inner function runs, the variable in `count++` is searched from inside out. For the example above, the order will be:
![](lexical-search-order.png)
![](lexical-search-order.svg)
1. The locals of the nested function...
2. The variables of the outer function...
@ -319,7 +319,7 @@ Please note the additional `[[Environment]]` property is covered here. We didn't
1. When the script has just started, there is only global Lexical Environment:
![](lexenv-nested-makecounter-1.png)
![](lexenv-nested-makecounter-1.svg)
At that starting moment there is only `makeCounter` function, because it's a Function Declaration. It did not run yet.
@ -331,7 +331,7 @@ Please note the additional `[[Environment]]` property is covered here. We didn't
2. The code runs on, the new global variable `counter` is declared and for its value `makeCounter()` is called. Here's a snapshot of the moment when the execution is on the first line inside `makeCounter()`:
![](lexenv-nested-makecounter-2.png)
![](lexenv-nested-makecounter-2.svg)
At the moment of the call of `makeCounter()`, the Lexical Environment is created, to hold its variables and arguments.
@ -347,19 +347,19 @@ Please note the additional `[[Environment]]` property is covered here. We didn't
For our new nested function the value of `[[Environment]]` is the current Lexical Environment of `makeCounter()` (where it was born):
![](lexenv-nested-makecounter-3.png)
![](lexenv-nested-makecounter-3.svg)
Please note that on this step the inner function was created, but not yet called. The code inside `function() { return count++; }` is not running.
4. As the execution goes on, the call to `makeCounter()` finishes, and the result (the tiny nested function) is assigned to the global variable `counter`:
![](lexenv-nested-makecounter-4.png)
![](lexenv-nested-makecounter-4.svg)
That function has only one line: `return count++`, that will be executed when we run it.
5. When the `counter()` is called, an "empty" Lexical Environment is created for it. It has no local variables by itself. But the `[[Environment]]` of `counter` is used as the outer reference for it, so it has access to the variables of the former `makeCounter()` call where it was created:
![](lexenv-nested-makecounter-5.png)
![](lexenv-nested-makecounter-5.svg)
Now if it accesses a variable, it first searches its own Lexical Environment (empty), then the Lexical Environment of the former `makeCounter()` call, then the global one.
@ -371,7 +371,7 @@ Please note the additional `[[Environment]]` property is covered here. We didn't
6. The call to `counter()` not only returns the value of `count`, but also increases it. Note that the modification is done "in place". The value of `count` is modified exactly in the environment where it was found.
![](lexenv-nested-makecounter-6.png)
![](lexenv-nested-makecounter-6.svg)
So we return to the previous step with the only change -- the new value of `count`. The following calls all do the same.
@ -381,7 +381,7 @@ The answer to the second question from the beginning of the chapter should now b
The `work()` function in the code below uses the `name` from the place of its origin through the outer lexical environment reference:
![](lexenv-nested-work.png)
![](lexenv-nested-work.svg)
So, the result is `"Pete"` here.
@ -420,7 +420,7 @@ In the example below, the `user` variable exists only in the `if` block:
alert(user); // Error, can't see such variable!
```-->
![](lexenv-if.png)
![](lexenv-if.svg)
When the execution gets into the `if` block, the new "if-only" Lexical Environment is created for it.

BIN
1-js/06-advanced-functions/03-closure/lexenv-if.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 22 KiB

69
1-js/06-advanced-functions/03-closure/lexenv-if.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 131 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-if@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 17 KiB

39
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 77 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 27 KiB

69
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 107 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 64 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 23 KiB

71
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 107 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 56 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

86
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 128 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 60 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 28 KiB

95
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 129 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 67 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 30 KiB

85
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 149 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 70 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-work.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 26 KiB

90
1-js/06-advanced-functions/03-closure/lexenv-nested-work.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 132 KiB

BIN
1-js/06-advanced-functions/03-closure/lexenv-nested-work@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 66 KiB

BIN
1-js/06-advanced-functions/03-closure/lexical-environment-global-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

64
1-js/06-advanced-functions/03-closure/lexical-environment-global-2.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 49 KiB

BIN
1-js/06-advanced-functions/03-closure/lexical-environment-global-2@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 37 KiB

BIN
1-js/06-advanced-functions/03-closure/lexical-environment-global-3.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 17 KiB

61
1-js/06-advanced-functions/03-closure/lexical-environment-global-3.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 84 KiB

BIN
1-js/06-advanced-functions/03-closure/lexical-environment-global-3@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
1-js/06-advanced-functions/03-closure/lexical-environment-global.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9 KiB

40
1-js/06-advanced-functions/03-closure/lexical-environment-global.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 39 KiB

BIN
1-js/06-advanced-functions/03-closure/lexical-environment-global@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 26 KiB

73
1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 108 KiB

BIN
1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
1-js/06-advanced-functions/03-closure/lexical-environment-simple.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 23 KiB

67
1-js/06-advanced-functions/03-closure/lexical-environment-simple.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 107 KiB

BIN
1-js/06-advanced-functions/03-closure/lexical-environment-simple@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 56 KiB

BIN
1-js/06-advanced-functions/03-closure/lexical-search-order.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

48
1-js/06-advanced-functions/03-closure/lexical-search-order.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 76 KiB

BIN
1-js/06-advanced-functions/03-closure/lexical-search-order@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

4
1-js/06-advanced-functions/08-settimeout-setinterval/article.md
View file

@ -200,7 +200,7 @@ setTimeout(function run() {
For `setInterval` the internal scheduler will run `func(i)` every 100ms:
![](setinterval-interval.png)
![](setinterval-interval.svg)
Did you notice?
@ -216,7 +216,7 @@ In the edge case, if the function always executes longer than `delay` ms, then t
And here is the picture for the recursive `setTimeout`:
![](settimeout-interval.png)
![](settimeout-interval.svg)
**The recursive `setTimeout` guarantees the fixed delay (here 100ms).**

BIN
1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.7 KiB

40
1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.svg Normal file
View file

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="566px" height="173px" viewBox="0 0 566 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>setinterval-interval.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setinterval-interval.svg">
<path d="M10.5,104 L560.5,104" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="110" y="89" width="88" height="28"></rect>
<text id="func(1)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="131" y="107">func(1)</tspan>
</text>
<path d="M118.911364,26.4383562 L126.490909,10.2739726 L106.470455,31.0958904 L116.193182,34 L110.286364,49.890411 L128.581818,29.3424658 L118.911364,26.4383562 Z M123.302273,14.9315068 L117.604545,27.0410959 L126.856818,29.7808219 L112.9,45.6164384 L117.447727,33.3972603 L108.195455,30.6575342 L123.302273,14.9315068 Z" id="Shape" stroke="#EE6B47" stroke-width="3" fill="#EE6B47" stroke-linecap="square"></path>
<path d="M109,137.5 L109,67.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="253" y="89" width="88" height="28"></rect>
<text id="func(2)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="274" y="107">func(2)</tspan>
</text>
<path d="M271.581818,29.3424658 L261.911364,26.4383562 L269.490909,10.2739726 L249.470455,31.0958904 L259.193182,34 L253.286364,49.890411 L271.581818,29.3424658 L271.581818,29.3424658 Z M251.195455,30.6575342 L266.302273,14.9315068 L260.604545,27.0410959 L269.856818,29.7808219 L255.9,45.6164384 L260.447727,33.3972603 L251.195455,30.6575342 L251.195455,30.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="3" fill="#EE6B47" stroke-linecap="square"></path>
<path d="M252,137.5 L252,67.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="387" y="89" width="88" height="28"></rect>
<text id="func(3)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="408" y="107">func(3)</tspan>
</text>
<path d="M405.581818,29.3424658 L395.911364,26.4383562 L403.490909,10.2739726 L383.470455,31.0958904 L393.193182,34 L387.286364,49.890411 L405.581818,29.3424658 L405.581818,29.3424658 Z M385.195455,30.6575342 L400.302273,14.9315068 L394.604545,27.0410959 L403.856818,29.7808219 L389.9,45.6164384 L394.447727,33.3972603 L385.195455,30.6575342 L385.195455,30.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="3" fill="#EE6B47" stroke-linecap="square"></path>
<path d="M386,137.5 L386,67.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<text id="100" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="93" y="165">100</tspan>
</text>
<text id="200" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="237" y="165">200</tspan>
</text>
<text id="300" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="372" y="165">300</tspan>
</text>
<path d="M199.5,104.5 L249.5,104.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"></path>
<path d="M342.5,104.5 L383.5,104.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.4 KiB

39
1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg Normal file
View file

@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="566px" height="183px" viewBox="0 0 566 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>settimeout-interval.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="settimeout-interval.svg">
<path d="M11.5,102 L561.5,102" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="61" y="87" width="88" height="28"></rect>
<text id="func(1)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="82" y="105">func(1)</tspan>
</text>
<path d="M79.5818182,27.3424658 L69.9113636,24.4383562 L77.4909091,8.2739726 L57.4704545,29.0958904 L67.1931818,32 L61.2863636,47.890411 L79.5818182,27.3424658 L79.5818182,27.3424658 Z M59.1954545,28.6575342 L74.3022727,12.9315068 L68.6045455,25.0410959 L77.8568182,27.7808219 L63.9,43.6164384 L68.4477273,31.3972603 L59.1954545,28.6575342 L59.1954545,28.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="3" fill="#EE6B47" stroke-linecap="square"></path>
<path d="M60,135.5 L60,65.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="254" y="87" width="88" height="28"></rect>
<text id="func(2)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="275" y="105">func(2)</tspan>
</text>
<path d="M262.911364,24.4383562 L270.490909,8.2739726 L250.470455,29.0958904 L260.193182,32 L254.286364,47.890411 L272.581818,27.3424658 L262.911364,24.4383562 Z M267.302273,12.9315068 L261.604545,25.0410959 L270.856818,27.7808219 L256.9,43.6164384 L261.447727,31.3972603 L252.195455,28.6575342 L267.302273,12.9315068 Z" id="Shape" stroke="#EE6B47" stroke-width="3" fill="#EE6B47" stroke-linecap="square"></path>
<path d="M253,135.5 L253,65.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="447" y="87" width="88" height="28"></rect>
<text id="func(3)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="468" y="105">func(3)</tspan>
</text>
<path d="M465.581818,27.3424658 L455.911364,24.4383562 L463.490909,8.2739726 L443.470455,29.0958904 L453.193182,32 L447.286364,47.890411 L465.581818,27.3424658 L465.581818,27.3424658 Z M445.195455,28.6575342 L460.302273,12.9315068 L454.604545,25.0410959 L463.856818,27.7808219 L449.9,43.6164384 L454.447727,31.3972603 L445.195455,28.6575342 L445.195455,28.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="3" fill="#EE6B47" stroke-linecap="square"></path>
<path d="M446,135.5 L446,65.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<path d="M150.5,102.5 L250.5,102.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"></path>
<path d="M343.5,102.5 L443.5,102.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"></path>
<text id="100" font-family="Consolas" font-size="18" font-weight="normal" fill="#000000">
<tspan x="187" y="177">100</tspan>
</text>
<text id="100" font-family="Consolas" font-size="18" font-weight="normal" fill="#000000">
<tspan x="380" y="177">100</tspan>
</text>
<path id="Line-3" d="M165.5,151.5 L237.5,151.5 L237.5,145.5 L251.5,152.5 L237.5,159.5 L237.5,153.5 L165.5,153.5 L165.5,159.5 L151.5,152.5 L165.5,145.5 L165.5,151.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3-Copy" d="M355.5,151.5 L427.5,151.5 L427.5,145.5 L441.5,152.5 L427.5,159.5 L427.5,153.5 L355.5,153.5 L355.5,159.5 L341.5,152.5 L355.5,145.5 L355.5,151.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

2
1-js/06-advanced-functions/09-call-apply-decorators/article.md
View file

@ -53,7 +53,7 @@ Now let's get into details of how it works.
The result of `cachingDecorator(func)` is a "wrapper": `function(x)` that "wraps" the call of `func(x)` into caching logic:
![](decorator-makecaching-wrapper.png)
![](decorator-makecaching-wrapper.svg)
As we can see, the wrapper returns the result of `func(x)` "as is". From an outside code, the wrapped `slow` function still does the same. It just got a caching aspect added to its behavior.

BIN
1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 26 KiB

64
1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 203 KiB

BIN
1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 62 KiB