Speaking in Code

Intro to JavaScriptLoops!

Brian Lee

Professor Liel Leibovitz

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);

};

Speaking in Code

Review – Functions: Name

• The name of the function that will execute

• Run the function by calling its name

var divideByThree = function (number) {var val = number / 3;console.log(val);

};

divideByThree(9);

Speaking in Code

Review – Functions: Parameters

• Parameters are passed in for the function to use

• Similar to a variable in math

• Calling function with x = 3

f(x) = x2 + 2

f(3) = 32 + 2>> 11

Speaking in Code

Review – Functions: Parameters

• In JavaScript passing in 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);

};

myFunc(3);

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

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”

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

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

Speaking in Code

Functions in other languages

• JavaScript

• Ruby (method)

var square = function (number) {return number * number;

};

def square(number)return number * number

end

Speaking in Code

Intro: Loops

• Execute same line(s) of code over and over

• Fundamental concept in programming

• Can be trickier with JavaScript

Speaking in Code

Intro: For Loops

• Basic Syntax

• 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

for(var i = 0; i < 10; i++) {console.log(i);

}

Speaking in Code

Intro: Loop Mechanics

• In what order does this loop think?

1. Initialization

2. Check Conditional: Stop loop if false

3. Run Code

4. Run Increment: i++ i = i + 1

5. Step 2

for(var i = 0; i < 10; i++) {console.log(i);

}

Speaking in Code

Infinite Loops

• Loops with no exit strategy

• Will continue to execute until crashing

Speaking in Code

Infinite Loops

• Why would this loop not work?

for(var i = 0; i < 10; i--) {console.log(i);

}`

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

Speaking in Code

Arrays

Speaking in Code

Arrays

• Collection of items

• Like a box (even looks like it)

• Each item has a designated spot

[ ]

var doughnuts= [ , , , ]

Speaking in Code

Arrays: Accessing Elements

• Elements: items in arrays

• Index: location of element in array

– Starts from 0 not 1

• How to access the value “Boston Creme”

var doughnuts= [‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ ]

Speaking in Code

Arrays: Accessing Elements

• Elements: items in arrays

• Index: location of element in array

– Starts from 0 not 1

• How to access the value “Boston Creme”

var doughnuts= [‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ ]

doughnuts[0]

0 1 2

Speaking in Code

Loops and Arrays

• Use loops to write less codevar 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”

Speaking in Code

Try it yourself!

http://bit.ly/jsloops

http://jsbin.com

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();

}}