You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: page/javascript-101/conditional-code.md
+18-13
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,8 @@ attribution: jQuery Fundamentals
4
4
---
5
5
Sometimes you only want to run a block of code under certain conditions. Flow control — via if and else blocks — lets you run code only under certain conditions.
6
6
7
-
<javascriptcaption="Flow control">
7
+
```js
8
+
// Flow control
8
9
var foo =true;
9
10
var bar =false;
10
11
@@ -22,9 +23,9 @@ if (bar) {
22
23
// this code would run if foo and bar were both false
23
24
}
24
25
}
25
-
</javascript>
26
+
```
26
27
27
-
<divclass="note"markdown="1">
28
+
<divclass="note">
28
29
While curly braces aren't strictly required around single-line if statements,
29
30
using them consistently, even when they aren't strictly required, makes for
30
31
vastly more readable code.
@@ -39,20 +40,22 @@ In order to use flow control successfully, it's important to understand which
39
40
kinds of values are "truthy" and which kinds of values are "falsy." Sometimes,
40
41
values that seem like they should evaluate one way actually evaluate another.
41
42
42
-
<javascriptcaption="Values that evaluate to true">
43
+
```js
44
+
// Values that evaluate to true
43
45
'0';
44
46
'any string';
45
47
[]; // an empty array
46
48
{}; // an empty object
47
49
1; // any non-zero number
48
-
</javascript>
50
+
```
49
51
50
-
<javascriptcaption="Values that evaluate to false">
52
+
```js
53
+
// Values that evaluate to false
51
54
''; // an empty string
52
55
NaN; // JavaScript's "not-a-number" variable
53
56
null;
54
57
undefined; // be careful -- undefined can be redefined!
55
-
</javascript>
58
+
```
56
59
57
60
## Conditional Variable Assignment with The Ternary Operator
58
61
@@ -62,11 +65,12 @@ more convenient. The ternary operator tests a condition; if the
62
65
condition is true, it returns a certain value, otherwise it returns a different
63
66
value.
64
67
65
-
<javascriptcaption="The ternary operator">
68
+
```js
69
+
The ternary operator
66
70
// set foo to 1 if bar is true;
67
71
// otherwise, set foo to 0
68
72
var foo = bar ?1:0;
69
-
</javascript>
73
+
```
70
74
71
75
While the ternary operator can be used without assigning the return value to a
72
76
variable, this is generally discouraged.
@@ -78,7 +82,8 @@ useful to use a switch statement instead. Switch statements look
78
82
at the value of a variable or expression, and run different blocks of code
79
83
depending on the value.
80
84
81
-
<javascriptcaption="A switch statement">
85
+
```js
86
+
// A switch statement
82
87
switch (foo) {
83
88
84
89
case'bar':
@@ -94,13 +99,13 @@ switch (foo) {
94
99
break;
95
100
96
101
}
97
-
</javascript>
102
+
```
98
103
99
104
Switch statements have somewhat fallen out of favor in JavaScript, because
100
105
often the same behavior can be accomplished by creating an object that has more
101
106
potential for reuse, testing, etc. For example:
102
107
103
-
<javascript>
108
+
```js
104
109
var stuffToDo = {
105
110
'bar':function() {
106
111
alert('the value was bar -- yay!');
@@ -120,6 +125,6 @@ if (stuffToDo[foo]) {
120
125
} else {
121
126
stuffToDo['default']();
122
127
}
123
-
</javascript>
128
+
```
124
129
125
130
We'll look at objects in greater depth later in this chapter.
0 commit comments