-
Notifications
You must be signed in to change notification settings - Fork 1.7k
/
for-in-loops.html
91 lines (85 loc) · 2.05 KB
/
for-in-loops.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!doctype html>
<html lang="en">
<head>
<title>JavaScript Patterns</title>
<meta charset="utf-8">
</head>
<body>
<script>
/* Title: for-in loops
* Description: optimized for-in loops
*/
// the object
var man = {
hands:2,
legs:2,
heads:1
};
// somewhere else in the code
// a method was added to all objects
if (typeof Object.prototype.clone === 'undefined') {
Object.prototype.clone = function () {
};
}
// antipattern
// for-in loop without checking hasOwnProperty()
for (var i in man) {
console.log(i, ":", man[i]);
}
/*
* result in the console
* hands : 2
* legs : 2
* heads : 1
* clone: function()
*/
// preferred 1
for (var i in man) {
if (man.hasOwnProperty(i)) { // filter
console.log(i, ":", man[i]);
}
}
/*
* result in the console
* hands : 2
* legs : 2
* heads : 1
*/
// preferred 2
// benefit is you can avoid naming collisions in case the `man` object has redefined `hasOwnProperty`
for (var i in man) {
if (Object.prototype.hasOwnProperty.call(man, i)) { // filter
console.log(i, ":", man[i]);
}
}
// preferred 3
// use a local variable to "cache" `Object.prototype.hasOwnProperty`
var i,
hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
if (hasOwn.call(man, i)) { // filter
console.log(i, ":", man[i]);
}
}
//Preferred 4
/* Check if object has properties before print output
* using Object.keys(obj) and length built ins. A good method for
* not wasting resources and avoiding errors with larger objects
*/
if (Object.keys(man).length > 0){
for (var item in man)
console.log(item,':',man[item]);
} else {
console.log('Empty Object');}
/*
* hands : 2
* legs : 2
* heads : 1
* clone : function() {
* }
*/
// References
// http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/
</script>
</body>
</html>