Skip to content

Commit d760f67

Browse files
committed
Automatic merge from master.
1 parent 8f83603 commit d760f67

File tree

1 file changed

+40
-26
lines changed

1 file changed

+40
-26
lines changed

index.html

Lines changed: 40 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ <h1>JavaScript Garden</h1>
3333
<li><a href="#instanceof">The <code>instanceof</code> operator</a></li>
3434
<li><a href="#casting">Type casting</a></li>
3535
<li><a href="#undefined"><code>undefined</code> and <code>null</code></a></li>
36-
<li><a href="#eval">The evil <code>eval</code></a></li>
36+
<li><a href="#eval">Reasons against <code>eval</code></a></li>
3737
<li><a href="#timeouts"><code>setTimeout</code> and <code>setInterval</code></a></li>
3838
<li><a href="#semicolon">Automatic semicolon insertion</a></li>
3939
</ul></section>
@@ -188,15 +188,16 @@ <h1>JavaScript Garden</h1>
188188
Bar.prototype [instance of Foo]
189189
{ foo: 'Hello World' }
190190
Foo.prototype
191-
{method: ...};
191+
{ method: ... }
192192
Object.prototype
193-
{toString: ... /* etc. */};
193+
{ toString: ... /* etc. */ }
194194
</code></pre>
195195
<p>In the above, the object <code>test</code> will inherit from both <code>Bar.prototype</code> and
196196
<code>Foo.prototype</code>; hence, it will have access to the function <code>method</code> that was
197-
defined on <code>Foo</code>. But it will not have access to the property <code>value</code> of a
198-
<code>Foo</code> instance, since that property gets defined in the <a href="#constructor">constructor</a>
199-
of <code>Foo</code>. But this constructor has to be called explicitly.</p>
197+
defined on <code>Foo</code>. It will also have access to the property <code>value</code> of the
198+
<strong>one</strong> <code>Foo</code> instance that is its prototype. It is important to note that <code>new
199+
Bar()</code> does <strong>not</strong> create a new <code>Foo</code> instance, but reuses the one assigned to
200+
its prototype; thus, all <code>Bar</code> instances will share the <strong>same</strong> <code>value</code> property.</p>
200201
<aside>
201202
<p><strong>Note:</strong> Do <strong>not</strong> use <code>Bar.prototype = Foo</code>, since it will not point to
202203
the prototype of <code>Foo</code> but rather to the function object <code>Foo</code>. So the
@@ -235,8 +236,8 @@ <h1>JavaScript Garden</h1>
235236
<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach"><code>Array.forEach</code></a>.</p>
236237
</section><section><header><h3>In conclusion</h3></header>
237238
<p>It is a <strong>must</strong> to understand the prototypical inheritance model completely
238-
before writing complex code which makes use of it. Also, watching the length of
239-
the prototype chains and breaking them up if necessary can avoid possible
239+
before writing complex code which makes use of it. Also, watch the length of
240+
the prototype chains and break them up if necessary to avoid possible
240241
performance issues. Further, the native prototypes should <strong>never</strong> be extended
241242
unless it is for the sake of compatibility with newer JavaScript features.</p></section></article>
242243

@@ -545,7 +546,7 @@ <h1>JavaScript Garden</h1>
545546
Function.call.apply(Foo.prototype.method, arguments);
546547
};
547548
</code></pre>
548-
</section><section><header><h3>Modification "magic"</h3></header>
549+
</section><section><header><h3>Formal parameters and arguments indexes</h3></header>
549550
<p>The <code>arguments</code> object creates <em>getter</em> and <em>setter</em> functions for both its
550551
properties as well as the function's formal parameters.</p>
551552
<p>As a result, changing the value of a formal parameter will also change the value
@@ -1021,14 +1022,21 @@ <h1>JavaScript Garden</h1>
10211022
new Array(1, 2, 3); // Result: [1, 2, 3]
10221023

10231024
[3]; // Result: [3]
1024-
new Array(3); // Result: [undefined, undefined, undefined]
1025+
new Array(3); // Result: []
10251026
new Array('3') // Result: ['3']
10261027
</code></pre>
10271028
<p>In cases when there is only one argument passed to the <code>Array</code> constructor,
1028-
and that argument is a <code>Number</code>, the constructor will use that number as the
1029-
<em>length</em> of the new array to be created.</p>
1030-
<p>This behavior only comes in handy in a few cases, like repeating a string, in
1031-
which it avoids the use of a <code>for loop</code> code.</p>
1029+
and that argument is a <code>Number</code>, the constructor will return a new <em>sparse</em>
1030+
array with the <code>length</code> property set to the value of the argument. It should be
1031+
noted that <strong>only</strong> the <code>length</code> property of the new array will be set this way,
1032+
the actual indexes of the array will not be initialized. </p>
1033+
<pre><code>var arr = new Array(3);
1034+
arr[1]; // undefined
1035+
1 in arr; // false, the index was not set
1036+
</code></pre>
1037+
<p>The behavior of being able to set the length of the array upfront only comes in
1038+
handy in a few cases, like repeating a string, in which it avoids the use of a
1039+
<code>for loop</code> code.</p>
10321040
<pre><code>new Array(count + 1).join(stringToRepeat);
10331041
</code></pre>
10341042
</section><section><header><h3>In conclusion</h3></header>
@@ -1302,7 +1310,7 @@ <h1>JavaScript Garden</h1>
13021310
prototype chain by setting <code>Foo.prototype = null</code>), but in almost all cases it
13031311
can be replaced by <code>undefined</code>.</p></section></article>
13041312

1305-
<article><section><header><h2 id="eval">The evil <code>eval</code> <a href="#intro">#top</a></h2></header>
1313+
<article><section><header><h2 id="eval">Reasons against <code>eval</code> <a href="#intro">#top</a></h2></header>
13061314
<p>The <code>eval</code> function will execute a string of JavaScript code in the local scope.</p>
13071315
<pre><code>var foo = 1;
13081316
function test() {
@@ -1328,18 +1336,18 @@ <h1>JavaScript Garden</h1>
13281336
<p>The use of <code>eval</code> should be avoided at <strong>all costs</strong>. 99.9% of its "uses" can be
13291337
achieved <strong>without</strong> it.</p>
13301338
</section><section><header><h3><code>eval</code> in disguise</h3></header>
1331-
<p>The <a href="#timeouts">timeout functions</a> <code>setTimeout</code> and <code>setInterval</code> can both take a string as
1332-
their first argument. This string will <strong>always</strong> get executed in the global
1333-
scope since <code>eval</code> is not being called directly in that case.</p>
1339+
<p>The <a href="#timeouts">timeout functions</a> <code>setTimeout</code> and <code>setInterval</code> can both take a
1340+
string as their first argument. This string will <strong>always</strong> get executed in the
1341+
global scope since <code>eval</code> is not being called directly in that case.</p>
13341342
</section><section><header><h3>Security issues</h3></header>
13351343
<p><code>eval</code> also is a security problem as it executes <strong>any</strong> code given to it,
13361344
it should <strong>never</strong> be used with strings of unknown or untrusted origins.</p>
13371345
</section><section><header><h3>In conclusion</h3></header>
1338-
<p><code>eval</code> is <strong>evil</strong>. Never should it be used, any code that makes use of it is to
1339-
be questioned in both its workings and security. In case something requires <code>eval</code>
1340-
in order to work, its design is to be questioned and should <strong>not</strong> be used in
1341-
the first place, a <em>better design</em> should be used, that does not require the use
1342-
of <code>eval</code>.</p></section></article>
1346+
<p><code>eval</code> should never be used, any code that makes use of it is to be questioned in
1347+
its workings, performance and security. In case something requires <code>eval</code> in
1348+
order to work, its design is to be questioned and should <strong>not</strong> be used in the
1349+
first place, a <em>better design</em> should be used, that does not require the use of
1350+
<code>eval</code>.</p></section></article>
13431351

13441352
<article><section><header><h2 id="timeouts"><code>setTimeout</code> and <code>setInterval</code> <a href="#intro">#top</a></h2></header>
13451353
<p>Since JavaScript is asynchronous, it is possible to schedule the execution of a
@@ -1424,9 +1432,15 @@ <h1>JavaScript Garden</h1>
14241432
<p>There might still be timeouts that are unaffected by this arbitrary number;
14251433
therefore, is is instead recommended to keep track of all the timeout IDs, so
14261434
they can be cleared specifically.</p>
1427-
</section><section><header><h3>Hidden <code>eval</code> magic</h3></header>
1435+
</section><section><header><h3>Hidden use of <code>eval</code></h3></header>
14281436
<p><code>setTimeout</code> and <code>setInterval</code> can also take a string as their first parameter.
14291437
This feature should <strong>never</strong> be used, since it internally makes use of <code>eval</code>.</p>
1438+
<aside>
1439+
<p><strong>Note:</strong> Since the timeout functions are <strong>not</strong> specified by the ECMAScript
1440+
standard, the exact workings when a string is passed to them might differ in
1441+
various JavaScript implementations. As a fact, Microsoft's JScript makes use of
1442+
the <code>Function</code> constructor in place of <code>eval</code>.</p>
1443+
</aside>
14301444
<pre><code>function foo() {
14311445
// will get called
14321446
}
@@ -1529,7 +1543,7 @@ <h1>JavaScript Garden</h1>
15291543
'and another long string to pass'
15301544
); // &lt;- inserted
15311545

1532-
return; &lt;- inserted, breaks the return statement
1546+
return; // &lt;- inserted, breaks the return statement
15331547
{ // treated as a block
15341548

15351549
// a label and a single expression statement
@@ -1540,7 +1554,7 @@ <h1>JavaScript Garden</h1>
15401554

15411555
// The lines got merged again
15421556
})(window)(function(window) {
1543-
window.someLibrary = {}; //&lt;- inserted
1557+
window.someLibrary = {}; // &lt;- inserted
15441558

15451559
})(window); //&lt;- inserted
15461560
</code></pre>

0 commit comments

Comments
 (0)