This document discusses JavaScript loops and arrays. It begins with a review of functions, then introduces loops. For loops follow a pattern of initialization, condition checking, and incrementing. Arrays are collections of elements that can be accessed by index. Loops are useful for iterating through arrays and reducing duplicated code. An example shows how loops can select all checkboxes on a page.

1. Speaking in Code
Intro to JavaScript
Loops!
Brian Lee
Professor Liel Leibovitz

2. Speaking in Code
Review – Functions
• Easy way to reuse code
• Define a set of statements through one variable
var divideByThree = function (number) {
var val = number / 3;
console.log(val);
};

3. Speaking in Code
Review – Functions: Name
• The name of the function that will execute
var divideByThree = function (number) {
var val = number / 3;
console.log(val);
};
• Run the function by calling its name
divideByThree(9);

4. Speaking in Code
Review – Functions: Parameters
• Parameters are passed in for the function to use
• Similar to a variable in math
f(x) = x2 + 2
• Calling function with x = 3
f(3) = 32 + 2
>> 11

5. Speaking in Code
Review – Functions: Parameters
• In JavaScript passing in 3: myFunc(3);
var myFunc = function (number) {
var val = Math.pow(number, 2) + 2;
console.log(val);
};
var myFunc = function (3) {
var val = Math.pow(3, 2) + 2;
console.log(val);
};

6. Speaking in Code
Review – Functions: Return Values
• What good are functions if all you do is print
• A functions return value is similar to a variable
var addThree = function (number) {
return number + 3;
};
var count = addThree(4);
console.log(count)
>> 7

7. Speaking in Code
Review – Functions: Return Values
• You can assign to a variable or use it right away
if(addThree(4) > 10) {
console.log(“We’re over 10!”);
} else {
console.log(addThree(4) + “ is not over 10”);
}
>> “7 is not over 10”

8. Speaking in Code
Review – Functions: Scope (Local)
• Where you define your variables matter
• Variables defined inside a function ONLY exist there
var multiplyThree = function (number) {
var multiplier = 3;
return multiplier * number;
};
console.log(multiplier)
>> multiplier is not defined

9. Speaking in Code
Review – Functions: Scope (Global)
• Where you define your variables matter
• Variables defined outside a function exist globally
var multiplier = 3;
var multiplyThree = function (number) {
return multiplier * number;
};
console.log(multiplier)
>> 3

10. Speaking in Code
Functions in other languages
• JavaScript
var square = function (number) {
return number * number;
};
• Ruby (method)
def square(number)
return number * number
end

11. Speaking in Code
Intro: Loops
• Execute same line(s) of code over and over
• Fundamental concept in programming
• Can be trickier with JavaScript

12. Speaking in Code
Intro: For Loops
• Basic Syntax
for(var i = 0; i < 10; i++) {
console.log(i);
}
• Initialization: define variable useful to loop
• Conditional: keep looping while this is true
– is “i” currently less than 10?
• Increment: executed at the end of the loop

13. Speaking in Code
Intro: Loop Mechanics
• In what order does this loop think?
for(var i = 0; i < 10; i++) {
console.log(i);
}
1. Initialization
2. Check Conditional: Stop loop if false
3. Run Code
4. Run Increment: i++ i=i+1
5. Step 2

14. Speaking in Code
Infinite Loops
• Loops with no exit strategy
• Will continue to execute until crashing

15. Speaking in Code
Infinite Loops
• Why would this loop not work?
for(var i = 0; i < 10; i--) {
console.log(i);
}`

16. Speaking in Code
Infinite Loops
• Why would this loop not work?
for(var i = 0; i < 10; i--) {
console.log(i);
}`
>> -1
>> -2
>> -3
>> -4
…
>> -467389146129

17. Speaking in Code
Arrays

18. Speaking in Code
Arrays
• Collection of items
• Like a box (even looks like it)
[]
• Each item has a designated spot
var doughnuts= [ , , , ]

19. Speaking in Code
Arrays: Accessing Elements
• Elements: items in arrays
• Index: location of element in array
– Starts from 0 not 1
var doughnuts= *‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ +
• How to access the value “Boston Creme”

20. Speaking in Code
Arrays: Accessing Elements
• Elements: items in arrays
• Index: location of element in array
– Starts from 0 not 1
var doughnuts= *‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ +
0 1 2
• How to access the value “Boston Creme”
doughnuts[0]

21. Speaking in Code
Loops and Arrays
• Use loops to write less code
var doughnuts = *‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ ]
for(var i = 0; i < doughnuts.length; i++) {
console.log(“This box has “ + doughnuts*i])
}
>> “This box has Boston Crème”
>> “This box has Glazed”
>> “This box has Old Fashioned”

22. Speaking in Code
Try it yourself! 
http://bit.ly/jsloops
http://jsbin.com

23. Speaking in Code
Real World Example
• Facebook:
– Ever wanted to select all friends when sending out invites?
var elms = document.getElementsByName("checkableitems[]");
for (i = 0; i < elms.length; i++) {
if (elms[i].type === "checkbox”) ,
elms[i].click();
}
}