@@ -33,7 +33,7 @@ <h1>JavaScript Garden</h1>
33
33
< li > < a href ="#instanceof "> The < code > instanceof</ code > operator</ a > </ li >
34
34
< li > < a href ="#casting "> Type casting</ a > </ li >
35
35
< 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 >
37
37
< li > < a href ="#timeouts "> < code > setTimeout</ code > and < code > setInterval</ code > </ a > </ li >
38
38
< li > < a href ="#semicolon "> Automatic semicolon insertion</ a > </ li >
39
39
</ ul > </ section >
@@ -188,15 +188,16 @@ <h1>JavaScript Garden</h1>
188
188
Bar.prototype [instance of Foo]
189
189
{ foo: 'Hello World' }
190
190
Foo.prototype
191
- {method: ...};
191
+ { method: ... }
192
192
Object.prototype
193
- {toString: ... /* etc. */};
193
+ { toString: ... /* etc. */ }
194
194
</ code > </ pre >
195
195
< p > In the above, the object < code > test</ code > will inherit from both < code > Bar.prototype</ code > and
196
196
< 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 >
200
201
< aside >
201
202
< p > < strong > Note:</ strong > Do < strong > not</ strong > use < code > Bar.prototype = Foo</ code > , since it will not point to
202
203
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>
235
236
< a href ="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach "> < code > Array.forEach</ code > </ a > .</ p >
236
237
</ section > < section > < header > < h3 > In conclusion</ h3 > </ header >
237
238
< 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
240
241
performance issues. Further, the native prototypes should < strong > never</ strong > be extended
241
242
unless it is for the sake of compatibility with newer JavaScript features.</ p > </ section > </ article >
242
243
@@ -545,7 +546,7 @@ <h1>JavaScript Garden</h1>
545
546
Function.call.apply(Foo.prototype.method, arguments);
546
547
};
547
548
</ code > </ pre >
548
- </ section > < section > < header > < h3 > Modification "magic" </ h3 > </ header >
549
+ </ section > < section > < header > < h3 > Formal parameters and arguments indexes </ h3 > </ header >
549
550
< p > The < code > arguments</ code > object creates < em > getter</ em > and < em > setter</ em > functions for both its
550
551
properties as well as the function's formal parameters.</ p >
551
552
< p > As a result, changing the value of a formal parameter will also change the value
@@ -1021,14 +1022,21 @@ <h1>JavaScript Garden</h1>
1021
1022
new Array(1, 2, 3); // Result: [1, 2, 3]
1022
1023
1023
1024
[3]; // Result: [3]
1024
- new Array(3); // Result: [undefined, undefined, undefined]
1025
+ new Array(3); // Result: []
1025
1026
new Array('3') // Result: ['3']
1026
1027
</ code > </ pre >
1027
1028
< 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 >
1032
1040
< pre > < code > new Array(count + 1).join(stringToRepeat);
1033
1041
</ code > </ pre >
1034
1042
</ section > < section > < header > < h3 > In conclusion</ h3 > </ header >
@@ -1302,7 +1310,7 @@ <h1>JavaScript Garden</h1>
1302
1310
prototype chain by setting < code > Foo.prototype = null</ code > ), but in almost all cases it
1303
1311
can be replaced by < code > undefined</ code > .</ p > </ section > </ article >
1304
1312
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 >
1306
1314
< p > The < code > eval</ code > function will execute a string of JavaScript code in the local scope.</ p >
1307
1315
< pre > < code > var foo = 1;
1308
1316
function test() {
@@ -1328,18 +1336,18 @@ <h1>JavaScript Garden</h1>
1328
1336
< p > The use of < code > eval</ code > should be avoided at < strong > all costs</ strong > . 99.9% of its "uses" can be
1329
1337
achieved < strong > without</ strong > it.</ p >
1330
1338
</ 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 >
1334
1342
</ section > < section > < header > < h3 > Security issues</ h3 > </ header >
1335
1343
< p > < code > eval</ code > also is a security problem as it executes < strong > any</ strong > code given to it,
1336
1344
it should < strong > never</ strong > be used with strings of unknown or untrusted origins.</ p >
1337
1345
</ 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 >
1343
1351
1344
1352
< article > < section > < header > < h2 id ="timeouts "> < code > setTimeout</ code > and < code > setInterval</ code > < a href ="#intro "> #top</ a > </ h2 > </ header >
1345
1353
< p > Since JavaScript is asynchronous, it is possible to schedule the execution of a
@@ -1424,9 +1432,15 @@ <h1>JavaScript Garden</h1>
1424
1432
< p > There might still be timeouts that are unaffected by this arbitrary number;
1425
1433
therefore, is is instead recommended to keep track of all the timeout IDs, so
1426
1434
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 >
1428
1436
< p > < code > setTimeout</ code > and < code > setInterval</ code > can also take a string as their first parameter.
1429
1437
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 >
1430
1444
< pre > < code > function foo() {
1431
1445
// will get called
1432
1446
}
@@ -1529,7 +1543,7 @@ <h1>JavaScript Garden</h1>
1529
1543
'and another long string to pass'
1530
1544
); // <- inserted
1531
1545
1532
- return; <- inserted, breaks the return statement
1546
+ return; // <- inserted, breaks the return statement
1533
1547
{ // treated as a block
1534
1548
1535
1549
// a label and a single expression statement
@@ -1540,7 +1554,7 @@ <h1>JavaScript Garden</h1>
1540
1554
1541
1555
// The lines got merged again
1542
1556
})(window)(function(window) {
1543
- window.someLibrary = {}; //<- inserted
1557
+ window.someLibrary = {}; // <- inserted
1544
1558
1545
1559
})(window); //<- inserted
1546
1560
</ code > </ pre >
0 commit comments