-
Notifications
You must be signed in to change notification settings - Fork 1.7k
/
conditionals.html
117 lines (101 loc) · 2.83 KB
/
conditionals.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!doctype html>
<html lang="en">
<head>
<title>JavaScript Patterns</title>
<meta charset="utf-8">
</head>
<body>
<script>
/* Title: Conditionals
* Description: pattern and antipattern of using if else
*/
/* NOTE: Paul Irish states that the first statement (normal pattern) is only an antipattern when optimizing for
* low-bandwidth source (such as for a bookmarklet).
* Using the normal pattern will generally outperform the regex (alternative method 1) in a loop,
* and is faster than the object literal (alternative method 2) for lower numbers of conditions,
* they generally even out around 10 conditions.
* See http://jsperf.com/if-this-or-that
*/
// normal pattern
if (type === 'foo' || type === 'bar') {
}
// alternative method 1 - regex test
if (/^(foo|bar)$/.test(type)) {
}
// alternative method 2 - object literal lookup (smaller if < 5 items)
if (({foo:1, bar:1})[type]) {
}
/* alternative method 3 - binary-search-like approach
* This approach is best when there are ranges of values for which to test
*/
if (value < 6) {
if (value < 3) {
if (value == 0) {
return result0;
} else if (value == 1) {
return result1;
} else {
return result2;
}
} else {
if (value == 3) {
return result3;
} else if (value == 4) {
return result4;
} else {
return result5;
}
}
} else {
if (value < 8) {
if (value == 6) {
return result6;
} else {
return result7;
}
} else {
if (value == 8) {
return result8;
} else if (value == 9) {
return result9;
} else {
return result10;
}
}
}
/* alternative method 4 - object/array lookup tables
* Most useful when there is logical mapping between a single key and a single value
*/
if (value == 0) {
return result0;
} else if (value == 1) {
return result1;
} else if (value == 2) {
return result2;
}
// define the array of results
var results = [result0, result1, result2];
// return the correct result
return results[value];
/* alternative method 5 - only using logical operators
* Shorter way to use simple statements
*/
var
type = 'foo',
type2 = 'bar',
result = 0;
type == 'foo' && result++;
console.log(result); // 1
!type == 'foo' || result++;
console.log(result); // 2
type == 'foo' && type2 == 'bar' && result++;
console.log(result); //3
type == 'foo' && type2 == 'bar' && result == 3 && (result=0); //parentheses avoid "invalid assignment left-hand side" error
console.log(result); //0
type == 'OOF' || result++; //equivalent: type != 'OOF' && result++;
console.log(result); //1
// References
// http://paulirish.com/2009/perf/
</script>
</body>
</html>