Context

What is Control Flow?

Context

control flow

There are a few programming constructs that impact the order in which our code is run. 

We'll cover:

• for loops
  • "for-i" loop (arrays)
  • "for-in" loop (objects)
• if statements
• functions

iteration (loops)

What for?

Types of Loops

Arrays and Objects each get their own special for-loop.

for( var i = 0; i < arr.length; i++) {
  //do things...
};

for(var key in obj) {
  //do things...
};

Arrays

Objects

Array For-loops

Arrays are numerically indexed. 

This means you can access the values stored in an array by accessing a numbered position in that array. 

var arr = ['pirate','dragon','unicorn'];

for( var i = 0; i < arr.length; i++) {
  //this is the body of the loop
   //the code in here gets executed once
    //for each iteration
};

Index 

0

2

1

The code in between the curly braces is called the body of the for loop. 

Array For-loops

Let's break down the signature of the for-loop the part in between the parens.

var arr = ['pirate','dragon','unicorn'];

for( var i = 0; i < arr.length; i++) {
  //this is the body of the loop
  //the code in here gets executed once
    //for each iteration
}

Array For-loops

INITIALIZATION

i is just a number.

The index that we want to start at 

(often 0)

var arr = ['pirate','dragon','unicorn'];

for( var i = 0; i < arr.length; i++) {
  //this is the body of the loop
  //the code in here gets executed once
    //for each iteration
}

Array For-loops

CONDITION

As long as this is true, we continue with the loop.

Once it is no longer true, the loop ends.

var arr = ['pirate','dragon','unicorn'];

for( var i = 0; i < arr.length; i++) {
  //this is the body of the loop
  //the code in here gets executed once
    //for each iteration
}

Array For-loops

FINAL EXPRESSION

This is the amount by which 'i' changes each time the body of the loop is run. 

Often we simply increment by 1

var arr = ['pirate','dragon','unicorn'];

for( var i = 0; i < arr.length; i++ )  {
  //this is the body of the loop
  //the code in here gets executed once
    //for each iteration
}

Array For-loops

All together: we instantiate a new variable i and set it equal to 0, while i is less than the length of the array, we execute the code in the loop body, and then increment i by 1.

for( var i = 0; i < arr.length; i++) {
  //body
}

Array For-loops

Each iteration of the for loop just executes the code inside the loop body, no matter what that code is. 

var arr = ['pirate','unicorn','dragon'];

for( var i = 0; i < arr.length; i++) {
  console.log('hi from inside the for loop!');
}
//'hi from inside the for loop!'
//'hi from inside the for loop!'
//'hi from inside the for loop!'

Array For loops

i is just a number, starting at 0 and increasing up to one less than the length of the array.

Remember: arrays are 0 indexed, so the length = max index+1

var arr = ['pirate','unicorn','dragon'];

for( var i = 0; i < arr.length; i++) {
  console.log('i: ' + i + ', arr.length: ' + arr.length);
}
//'i: 0, arr.length: 3'
//'i: 1, arr.length: 3'
//'i: 2, arr.length: 3'

Array For-loops

How do we use the number stored in the variable i to access the values in the array?

var arr = ['pirate','unicorn','dragon'];

for( var i = 0; i < arr.length; i++) {
  var element = arr[i];
  console.log(element);
}
//'pirate'
//'unicorn'
//'dragon'

Array For loops

How do we use the number stored in the variable i to access the values in the array?

var arr = ['pirate','unicorn','dragon'];

for( var i = 0; i < arr.length; i++) {
  console.log('the valued stored at 
    the ' + i + 'th position of the array
    is: ' + arr[i]
  );
}
//'the value stored at the 0th position of the array is pirate'
//'the value stored at the 1th position of the array is unicorn'
//'the value stored at the 2th position of the array is dragon'

Yay for arrays!!

Object For-loops

Objects are key indexed. 

This means you can access the values stored in an object by accessing a key in that object. 

var obj = {
  occupation: 'pirate',
  steed: 'dragon',
  bestFriend: 'unicorn'
};

for( var key in obj ) {
  //do things...
}

Object For-loops

The syntax of object for loops isn't like anything else you'll see in JavaScript. 

You just have to memorize it. 

for( var key in obj ) {
  //this is the loop body
}

Object For-loops

var obj = {
  occupation: 'pirate',
  steed: 'dragon',
  bestFriend: 'unicorn'
};

for( var key in obj ) {
  //body
}

Let's break down the pieces.

Specify the object to loop through

Object For-loops

Create a new variable called key.

For each loop iteration, this variable will hold the value of a property name.

var obj = {
  occupation: 'pirate',
  steed: 'dragon',
  bestFriend: 'unicorn'
};

for( var key in obj ) {
  //key will be assigned all of the keys in the object
  // that is: 'occupation', 'steed', 'bestFriend'
}

Object For-loops

for(var key in obj) {
  //body
}

All together now: we declare a new variable called key, and tell it which object we're iterating through, then it runs the body of the loop once for each iteration.

var obj = {
  occupation: 'pirate',
  steed: 'dragon', 
  bestFriend: 'unicorn'
};

for(var key in obj) {
  console.log('hi from inside obj loop!');
}
//'hi from inside obj loop!'
//'hi from inside obj loop!'
//'hi from inside obj loop!'

The body of the for loop is executed once for each of the keys in the object we're iterating through. 

Object For-loops

var obj = {occupation: 'pirate',
  steed: 'dragon',  bestFriend: 'unicorn'};

for( var key in obj ) {
  console.log(key);
}
//'occupation'
//'steed'
//'bestFriend'

So what is key on each iteration?

Object For-loops

var obj = {
  occupation: 'pirate',
  steed: 'dragon',
  bestFriend: 'unicorn'
};

for( var key in obj ) {
  console.log(key);
}
//'bestFriend'
//'steed'
//'occupation'

Note: we can't assume that the keys in objects are in any certain order. 

Object For-loops

Note: we can use any name we want for the variable that will get set equal to all the keys. 

var obj = {
  occupation: 'pirate',
  steed: 'dragon',
  bestFriend: 'unicorn'
};

for( var propertyName in obj ) {
  console.log(propertyName);
}
//'bestFriend'
//'steed'
//'occupation'

Object For-loops

var unitedStatesObj = {rhodeIsland: 'tiny',
  alaska: 'untamed',  ohio: 'electorally relevant',
  california: 'heck yes!'};

for( var state in unitedStateObj ) {
  console.log(state);
}
//'rhodeIsland'
//'alaska'
//'ohio'
//'california'

You can use this to be clear about what each property name is.

Generally though, just stick with var key in obj. That's the default and is easy to understand until things get super complex. 

Object For-loops

var obj = {occupation: 'pirate',
  steed: 'dragon',  bestFriend: 'unicorn'};

for( var key in obj ) {
  var value = obj[key];
  console.log(value);
}
//'pirate'
//'dragon'
//'unicorn'

So how do we use these property names to access the values in an object?

Object For-loops

var obj = {occupation: 'pirate',
  steed: 'dragon',  bestFriend: 'unicorn'};

for( var key in obj ) {
  console.log('the value stored at ' + key
   + ' is: ' + obj[key]);
}
//'the value stored at occupation is: pirate'
//'the value stored at steed is: dragon'
//'the value stored at bestFriend is: unicorn'

So how do we use these property names to access the values in an object?

Object For-loops

Yay for Object loops!!

key takeaways

LOOPS

• Use loops when you need to access all of the properties in a collection

• For arrays always use the for-with-semicolons loop

  • for (var i=startIndex; i<arr.length; i=i+increment) { ... }

  • Order is guaranteed because you are explicitly specifying the indices to check

• For objects always use the for-in loop
  • ​for (var key in obj) { ... }
  • Order is not guaranteed

If statements

if('something that will evaluate to true or false') {
  //body of the if statement
  //this code is only executed 
    //if the condition is true
}

Also called conditional statements

If statements

var alwaysFalse = false;
if(alwaysFalse) {
  console.log('code was executed');
  console.log('if true');
} else {
  console.log('code was executed');
  console.log('if false')
}
//'code was executed'
//'if false'

no matter what, one of the two blocks of code is executed because, the thing inside the if parenthesis will be evaluated to be either true or false

If statements

var temperature = 79;

if(temperature > 80) {
  console.log('too hot inside, 
    party in the streets!');
} else if(temperature < 32) {
  console.log('stay indoors you fools!');
} else {
  console.log('good biking temperature');
}
//'good biking temperature'

if can also be followed by else if. This lets you chain together multiple conditions. 

If statements

'preston' === 'albrey' // ??

8 > 5 // ??

6*2 === 12 // ??

The code inside the parentheses next to if must evaluate to true or false. 

Things that evaluate to true or false

var arr = [6,7,8,9,10];

3 < arr.length // ??
arr[2] === 8 // ??

If statements

Threequals!!

===

If statements

'hi there' //true
"" //false
undefined //false
[1,2,3] //true
0 //false
-1 //true
1 //true

When evaluating a boolean expression (true or false), JavaScript converts everything to be a true or false value. 

These are called 'truthy' and 'falsy'.

If statements

var alwaysTrue = true;
var alwaysFalse = false;

alwaysTrue && alwaysFalse //false
alwaysTrue || alwaysFalse //true

// && means both sides must be true
// || means just one side must be true

We can also chain boolean expressions together using && (and) as well as || (or).

If statements

var alwaysTrue = true;
var alwaysFalse = false;

!alwaysTrue //false
!alwaysFalse //true
//we can apply the negation operator 
//directly to a truthy/falsy value

8 !== 5 //true
'preston' !== 'preston' //false

We can also negate an operator. We can use !== to mean "is not equal to". 

object recap

{

  "name": "Julia",

  "location": "Oakland, CA",

  "twitter": "@julia"

}

// Object literal  
var student = { name: 'Julia'};  
// Dot notation 
student.location = 'Oakland, CA'; 
// Bracket notation
student['twitter'] = '@julia';    

Objects store information (properties) about a given entity

in memory representation:

Array recap

{

  "0": "Julia",

  "1": "Johnny",

  "length": "2"

}

// Array literal  
var students = [ 'Julia' ];  
// Bracket notation for access/assignment
students[0]; //'Julia'
students[1] = 'Johnny';
// Dot notation for native properties
students.length; //2

Arrays store collections of values

in memory representation:

Array are objects!

{

  "0": "Julia",

  "1": "Johnny",

  "length": "2"

}

Arrays are special objects 

• numeric indexes
• native length property
• native methods (push, pop)

in memory representation:

Functions are Objects too!

var treasureChest = function(){
  return "you can't get nothin' from me!"; 
};

treasureChest.treasureMap = 'twirl three times';
console.log(treasureChest.treasureMap); 
//'twirl three times'

They're all objects

Anything we can do with an object, we can do with an array and function. 

Examples:

Add a property to it (not super useful)

Assign a variable to point to it

Overwrite a variable with it

Pass it in as an argument to a function 

Return it as a value from a function