Skip to content

Correct code tabbing in conditional-code.md #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 30, 2011
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 54 additions & 55 deletions content/javascript-101/conditional-code.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,23 @@ attribution: jQuery Fundamentals
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.

<javascript caption="Flow control">
var foo = true;
var bar = false;

if (bar) {
// this code will never run
console.log('hello!');
}

if (bar) {
// this code won't run
var foo = true;
var bar = false;

if (bar) {
// this code will never run
console.log('hello!');
}

if (bar) {
// this code won't run
} else {
if (foo) {
// this code will run
} else {
if (foo) {
// this code will run
} else {
// this code would run if foo and bar were both false
}
// this code would run if foo and bar were both false
}
}
</javascript>

<div class="note" markdown="1">
Expand All @@ -42,18 +42,18 @@ kinds of values are "truthy" and which kinds of values are "falsy." Sometimes,
values that seem like they should evaluate one way actually evaluate another.

<javascript caption="Values that evaluate to true">
'0';
'any string';
[]; // an empty array
{}; // an empty object
1; // any non-zero number
'0';
'any string';
[]; // an empty array
{}; // an empty object
1; // any non-zero number
</javascript>

<javascript caption="Values that evaluate to false">
''; // an empty string
NaN; // JavaScript's "not-a-number" variable
null;
undefined; // be careful -- undefined can be redefined!
''; // an empty string
NaN; // JavaScript's "not-a-number" variable
null;
undefined; // be careful -- undefined can be redefined!
</javascript>

## Conditional Variable Assignment with The Ternary Operator
Expand All @@ -65,9 +65,9 @@ condition is true, it returns a certain value, otherwise it returns a different
value.

<javascript caption="The ternary operator">
// set foo to 1 if bar is true;
// otherwise, set foo to 0
var foo = bar ? 1 : 0;
// set foo to 1 if bar is true;
// otherwise, set foo to 0
var foo = bar ? 1 : 0;
</javascript>

While the ternary operator can be used without assigning the return value to a
Expand All @@ -81,48 +81,47 @@ at the value of a variable or expression, and run different blocks of code
depending on the value.

<javascript caption="A switch statement">
switch (foo) {
switch (foo) {

case 'bar':
alert('the value was bar -- yay!');
break;
case 'bar':
alert('the value was bar -- yay!');
break;

case 'baz':
alert('boo baz :(');
break;
case 'baz':
alert('boo baz :(');
break;

default:
alert('everything else is just ok');
break;
default:
alert('everything else is just ok');
break;

}
}
</javascript>

Switch statements have somewhat fallen out of favor in JavaScript, because
often the same behavior can be accomplished by creating an object that has more
potential for reuse, testing, etc. For example:

<javascript>
var stuffToDo = {
'bar' : function() {
alert('the value was bar -- yay!');
},

var stuffToDo = {
'bar' : function() {
alert('the value was bar -- yay!');
},
'baz' : function() {
alert('boo baz :(');
},

'baz' : function() {
alert('boo baz :(');
},

'default' : function() {
alert('everything else is just ok');
}
};

if (stuffToDo[foo]) {
stuffToDo[foo]();
} else {
stuffToDo['default']();
'default' : function() {
alert('everything else is just ok');
}
};

if (stuffToDo[foo]) {
stuffToDo[foo]();
} else {
stuffToDo['default']();
}
</javascript>

We'll look at objects in greater depth later in this chapter.