JavaScript Fundamentals:
Slides:
https://slides.com/hrjr/telegraphPrepWeek3
Classwork:
https://github.com/RebootJeff/jsFunctions
https://github.com/telegraphPrep/week3
Curriculum by:
Bianca Gandolfo, Jeff Lee, Preston Parry
Intro
Expectations
Google/ StackOverflow
Success Metrics
1. Experiment. Try new things like crazy. See what you get.
2. Sit down and explain things super methodically once you have the right answer.
Success, Revisited
WE HOPE YOU CHOOSE TO JOIN US ON THIS JOURNEY!
Basics of Functions
and Hoisting
var spitASickRhyme = function() {
console.log('I\'m in the pursuit of Princess Peach and I know');
console.log('When I think I\'ve won, she\'s in another castle');
};
// function EXPRESSION <(•_•^) and (v•_•)> function DECLARATION
function spitASickRhyme() {
console.log('I\'m in the pursuit of Princess Peach and I know');
console.log('When I think I\'ve won, she\'s in another castle');
}
// function expression
var haveFun = function() {};
// function declaration
function learnJS() {}
// variable declaration
// and assignment
var greeting = 'hello, world';
if(false) {
var jeffIsAmazing = 'duh';
}
// declarations
var haveFun;
function learnJS() {}
var greeting;
var jeffIsAmazing;
Your code:
How the computer reads it:
// definitions
// and assignments
haveFun = function() {};
greeting = 'hello, world';
if(false) {
jeffIsAmazing = 'duh';
}
console.log(jeffIsAmazing);
// will log `undefined`
Key Takeaway:
Don't try to access a variable before you've assigned it!
Things don't exist in the way you expect them to before you've actually written out the code for them.
Let's create a link to my favorite webpage:
You'd probably expect them all to take us to the exact same webpage. And you'd be right!
Let's imagine, for the sake of example, that they keep a live tally of members on their site, and that right now they have 12,000 members.
Let's create a link to my favorite webpage:
Since you're a good and involved citizen, and want to support the freedom and capability people gain when they bike, you join the SFBC!
(yay!!)
obviously, I'm not exactly a neutral source here :)
Let's create a link to my favorite webpage:
When we go to check out the membership count after this update, would we expect to see 12,001 members listed on the site no matter which link we click?
Of course!
And you'd be right, again.
Let's create a link to my favorite webpage:
Now let's say you're a data geek and decide that having data on your cycling sounds fun. So let's change the link we currently have for "them" to point to strava.com (an awesome bike tracking app).
Let's click the link just to see the change.
Let's create a link to my favorite webpage:
After changing the link saved in "them", do we expect our other links to still take us to the Bike Coalition?
Of course!
And would we expect to be able to make changes to the strava.com website without impacting the Bike Coalition's website?
Of course again!
"This is obvious. Why do we need so many slides on something we all know so well already?"
Because this is exactly how Arrays and Objects work in JS.
When you save an array or object into a variable, what that variable actually gets is a link to a position on our computer's memory that stores the array.
In the case of our webpage, the link takes us to a web address. In the case of our array, the link takes us to a hard drive address*.
*technically, a memory address, but that's way more specific than we need to care about now.
Let's go through and turn our SF Bike Coalition example into code so you can see just how effective this analogy is.
Let's create a link to my favorite webpage:
You'd probably expect them all to take us to the exact same webpage. And you'd be right!
Let's imagine, for the sake of example, that they keep a live tally of members on their site, and that right now they have 12,000 members.
var sfbc = {members: 12000};
var them = sfbc;
var several = sfbc;
var samePage = sfbc;
console.log(them); //{members: 12000}
console.log(several); //{members: 12000}
console.log(samePage); //{members: 12000}
Let's create a link to my favorite webpage:
Since you're a good and involved citizen, and want to support the freedom and capability people gain when they bike, you join the SFBC!
var sfbc = {members: 12000};
var them = sfbc;
var several = sfbc;
var samePage = sfbc;
sfbc.members += 1; // smiley :)
Let's create a link to my favorite webpage:
When we go to check out the membership count after this update, would we expect to see 12,001 members listed on the site?
Of course!
No matter which link we clicked?
var sfbc = {members: 12000};
var them = sfbc;
var several = sfbc;
var samePage = sfbc;
sfbc.members += 1;
console.log(sfbc); //{members: 12001}
console.log(them); //{members: 12001}
console.log(several); //{members: 12001}
console.log(samePage); //{members: 12001}
Remember each of these variables is nothing more than a link pointing to the same webpage, or the same position in memory.
Let's create a link to my favorite webpage:
Now let's say you're a data geek and decide that having data on your cycling sounds fun. So let's change the link we currently have for "them" to point to strava.com (an awesome bike tracking app).
Let's click the link just to see the change.
var sfbc = {members: 12000};
var them = sfbc;
var several = sfbc;
var samePage = sfbc;
them = {name: 'Strava'};
console.log(them); //{name: 'Strava'}
Let's create a link to my favorite webpage:
After changing the link saved in "them", do we expect our other links to still take us to the Bike Coalition?
Of course!
And would we expect to be able to make changes to the strava.com website without impacting the Bike Coalition's website?
Of course!
var sfbc = {members: 12000};
var them = sfbc;
var several = sfbc;
var samePage = sfbc;
console.log(sfbc); //{members: 12001}
console.log(several); //{members: 12001}
console.log(samePage); //{members: 12001}
them.friends = 15;
console.log(them);
//{name: 'Strava',
// friends: 15}
console.log(sfbc); //{members: 12001}
console.log(several); //{members: 12001}
console.log(samePage); //{members: 12001}
"This is obvious. Why do we need so many slides on something we all know so well already?"
Because this is exactly how Arrays and Objects work in JS.
When you save an array or object into a variable, what that variable actually gets is a link to a position on our computer's memory that stores the array.
In the case of our webpage, the link takes us to a web address. In the case of our array, the link takes us to a hard drive address.
var func = function(){
var local = true;
};
console.log(local);
ReferenceError: local is not defined
var global;
var func = function(){
var local = true;
};
console.log(local);
console.log(global); //undefined
var x = 'global!';
//inside a function
function addToGlobalScope(){
y = 'global here, too!';
}
//inside a function
function addToGlobalScope(){
y = 'global here, too!';
}
REMEMBER: y is not declared until addToGlobalScope is called.
var x = 'global!';
//inside a function
function addToGlobalScope(){
y = 'global here, too!';
var z = 'using var inside a
function body makes this local';
}
//inside a function
function addToGlobalScope(){
y = 'global here, too!';
}
//inside a function
function addToGlobalScope(){
y = 'global here!';
window.a = 'window is an object
in the global scope.';
}
var aliensExist = false; //global scope
console.log(aliensExist); //false
var secretClearance = function() {
var aliensExist = 'only sort of...';
console.log(aliensExist); //'only sort of...'
};
secretClearance();
var superTopSecretClerance = function() {
var aliensExist = 'They totally do';
console.log(aliensExist) //'They totally do'
};
superTopSecretClearance();
var globalRequirement = 'pies';
var cookingBonanza = function(ingredient) {
console.log('I am cooking ' + globalRequirement + ' with ' + ingredient);
};
cookingBonanza('collard greens');
//'I am cooking pies with guacamole'
Don't worry, I don't get to do much of the cooking in my house.
var globalRequirement = 'pies';
var cookingBonanza = function(ingredient) {
var obstinateChef = function() {
var ingredient = 'guacamole'; //we are 'masking' ingredient here
//we can still access the global globalRequirement variable
console.log('I am cooking ' + globalRequirement + ' with ' + ingredient);
};
console.log('I am cooking ' + globalRequirement + ' with ' + ingredient);
};
cookingBonanza('collard greens');
var globalRequirement = 'pies';
var cookingBonanza = function(ingredient) {
var obstinateChef = function() {
var ingredient = 'guacamole'; //we are 'masking' ingredient here
//we can still access the global globalRequirement variable
console.log('I am cooking ' + globalRequirement + ' with ' + ingredient);
};
obstinateChef();
//notice that our change to ingredient (using the var keyword!) doesn't
//ever have to leave it's scope. the ingredient variable
//inside obstinateChef exists only in that scope.
console.log('I am cooking ' + globalRequirement + ' with ' + ingredient);
};
cookingBonanza('collard greens');
//'I am cooking pies with guacamole'
//'I am cooking pies with collard greens'
When are scopes actually created?
var message = 'yes';
for(var i = 0; i < 5; i++){
var message = 'NO!';
};
console.log('Is there block scope? ' + message);
//'Is there block scope? NO!'
JavaScript only has LEXICAL scoping
Lexical Scoping = Function Scope with Nesting
https://github.com/telegraphPrep/week3
Closures
An ambassador (Jenny, from Kenya)
Closures
A function always maintains access to the execution scope it was born in
var closureAlert = function(){
var x = 'Help! I\'m a variable '+
'stuck in a closure!';
var alerter = function(){
alert(x);
};
alerter();
};
closureAlert();
var closureAlert = function(){
var x = 0;
var alerter = function(){
x++;
alert(x);
};
return alerter;
};
var alerter1 = closureAlert();
var alerter2 = closureAlert();
alerter1();
alerter2();
var add = function(num){
var num1 = num;
var addToNum1 = function(num2){
return num1 + num2;
};
return addToNum1;
};
var addEleven = add(11);
var result = addEleven(22);
console.log(result);
function counter() {
var n = 0;
return {
count: function() { n++; return n; },
reset: function() { n = 0; }
};
}
var c = counter();
var d = counter();
c.count();
d.count();
c.reset();
c.count();
d.count();
1. Create your parent function.
2. Define some variables in the parent's local scope.
(they can be accessed by the child function)
3. Define a function inside the parent function.
(aka defining a "child" function or "nested" function)
4. Return that child from inside the parent.
function outerFunc() { var parentVar = "local to parent"; function innerFunc() { return parentVar + ' but accessed by child!'; }; return innerFunc; }
1. 2. 3. 4.
function outerFunc() {
var parentVar = "local to parent";
function innerFunc() {
return parentVar + ' but accessed by child!';
};
return innerFunc;
}
// STEP 1 - Run the parent function.
var example = outerFunc();
console.log(example);
// We see example now stores the child.
// STEP 2 - Run the child function.
var result = example();
console.log(result);
// What's the end result?
var sayAlice = function(){
var makeLog = function() {
console.log(alice);
};
var alice = 'Why hello there, Alice!';
return makeLog;
};
var log = sayAlice();
log();
var makeStopwatch = function(){
var elapsed = 0;
var stopwatch = function(){
return elapsed;
};
var increase = function(){ elapsed++; };
setInterval(increase, 1000);
return stopwatch;
};
var x = makeStopwatch();
var Module = function(){
var privateProperty = 'I like big fonts,' +
' and I cannot lie';
function privateMethod(params){
// do something
};
return {
publicProperty: 'JS rulez!!',
publicMethod: function(params){
// do something
},
privilegedMethod: function(params){
privateMethod(args);
}
};
};
var makeNewCar = function(){
var brakeLightsOn = false, seatbeltLocked = false;
function useABS(pressure) {
// 1. Use Electronic Brakeforce Distribution.
// 2. If necessary, activate Stability Control.
// 3. Check if wheels are locking up.
// 4. If necessary, release and re-apply EBD.
}
return {
color: 'blue',
honkHorn: function() {
console.log('HONK!!!');
},
hitBrakes: function(pressure){
brakeLightsOn = true;
seatbeltLocked = true;
useABS(pressure);
}
};
};
Different format & new partners!
Quick Tip: When talking with your partner and TAs, practice using technical terminology. Be specific! Be precise!
var hello;
hello = 'hiiii!';
function foo() { }
var foo = function() {};
foo;
foo();
var woohoo = [1, 2, 3];
woohoo[i]
woohoo[0]
var yay = {
kool: 'aid'
};
kool
'aid'
kool: 'aid'
variable declaration (undefined variable)
assignment (value assigned to variable)
function definition/declaration
function definition/expression
function, function reference
function call/invocation
element of woohoo, woohoo-sub-i
first element, woohoo-sub-0
key, property name
value, property value
key-value pair, property of yay
E.g., never say "thing";
specify which element of an array;
mention line numbers.
and Callbacks
What is a function?
1. A block of code
2. We get to determine when this code is run (invoked)
3. Directions for doing something we have created but not executed yet (figuring out driving directions vs. actually driving there; writing down a recipe vs. actually cooking it).
This seems super basic, but thinking of functions this way will make higher order functions a lot easier.
A function is just a block of code, and we get to decide when it is run.
1. Take a function as an input (argument)
var count = 1;
setInterval(function(){
console.log('I am', count++, 'seconds old now');
}, 1000);
2. Return a function as the output
var add = function(num){
var num1 = num;
var addToNum1 = function(num2){
return num1 + num2;
};
return addToNum1;
};
If a function does at least one of the following two things, then it is a baller higher-order function.
In JavaScript...
"higher-order" functions can exist because
JS treats functions as "first-class objects".
In other words...
functions can be:
...just like any other object in JS
(just like numbers, strings, booleans, arrays, etc).
var ifElse = function(condition, isTrue, isFalse){
if(condition){
isTrue();
} else {
isFalse();
}
};
var logTrue = function(){ console.log(true); };
var logFalse = function(){ console.log(false); };
ifElse(true, logTrue, logFalse);
Remember from Week 1 that we had two main ways of creating a function?
//Anonymous function saved into a variable
var nameImprover = function (name, adj) {
return 'Col ' + name + ' Mc' + adj + ' pants';
};
//named function
function nameImprover(name, adj) {
return 'Col ' + name + ' Mc' + adj + ' pants';
}
//both work!
What if we didn't store the anonymous function into a variable? What if we just left it as is, a set of instructions we've created but not executed yet?
//Anonymous function
function (name, adj) {
return 'Col ' + name + ' Mc' + adj + ' pants';
};
var ifElse = function(condition, isTrue, isFalse){
if(condition){
isTrue();
} else {
isFalse();
}
};
ifElse(true,
function(){ console.log(true); },
function(){ console.log(false); }
);
var ifElse = function(condition, isTrue, isFalse){
if(condition){
isTrue();
} else {
isFalse();
}
};
var logTrue = function(){ console.log(true); };
var logFalse = function(){ console.log(false); };
ifElse(true, logTrue, logFalse);
Let's refactor our code to just use anonymous functions, instead of declaring them in a separate part of our code and saving them into variables.
var ifElse = function(condition, isTrue, isFalse){
if(condition){
isTrue();
} else {
isFalse();
}
};
ifElse(true,
function(){ console.log(true); },
function(){ console.log(false); }
);
This is a super common pattern in functional programming: to declare anonymous functions in-line as arguments.
Remember, a function is just a block of code we've defined but not run yet. If we're not using this code elsewhere in our program, there's no need to give it a name.
var ifElse = function(condition, isTrue, isFalse){
if(condition){
isTrue(); // no arguments
} else {
isFalse(); // no arguments
}
};
var ifElse = function(condition, isTrue, isFalse, arg){
if(condition){
isTrue(arg); // Look! An argument! Whoa.
} else {
isFalse(arg); // <(^.^<) OMG it's another one.
}
};
Or, if our higher order function will be giving us the arguments, we can just include those as parameters for our anonymous functions.
When would this happen? You can think of a higher-order function that might iterate through an array, and pass each item in the array to the callback function we pass in. In this case, we're not directly specifying the argument, we're letting the higher-order function give it to us each time.
var increment = function(n){
return n + 1;
};
var square = function(n){
return n*n;
};
var doMathSoIDontHaveTo = function(n, func){
return func(n);
};
doMathSoIDontHaveTo(5, square);
doMathSoIDontHaveTo(4, increment);
1. API requests (Get data from Yelp, and once you have that data some number of milliseconds later, invoke this function which is the code I've programmed to play with the Yelp data).
2. Event handlers- Whenever a user clicks on this square, do these things.
3. Functional programming! Tomorrow, I promise :)
github.com/telegraphPrep/week3
New partners!
(again)
What is it?
A popular library with many useful functional programming methods built in.
Where is it?
http://underscorejs.org
Annotated Source:
http://underscorejs.org/docs/underscore.html
//_ is just an empty object that we put methods on
var _ = {};
//_.each is just a property of that object
//that property is set equal to a function
//that function has two parameters
_.each = function(list, callback) {
//function body here
};
//when you load up the underscorejs library
//all you're doing is loading an enormous object
//that has 200+ properties that are functions
What is this _ object that I'm invoking methods on?
var pocketmons = ['Charisaur', 'Bulbazard', 'Twomew'];
var logger = function(val){
console.log(val);
};
_.each(pocketmons, logger);
//'Charisaur'
//'Bulbazard'
//'Twomew'
//_.each(list, iterator)
We're going to write this out ourselves!
var each = function(list, iterator) {
//function body here to make each work
};
//Example invocation:
_.each(pocketmons, logger);
//'Charisaur'
//'Bulbazard'
//'Twomew'
http://underscorejs.org/#each
//PSEUDOCODE!!
//declare a function that has two parameters
//determine if collection is an array or an object
//loop through the collection
//invoke the callback on each element in the collection
http://underscorejs.org/#each
var _ = {};
//declare a function that has two parameters
_.each = function(list, callback) {
//determine if collection is an array or an object
//loop through the collection
//invoke the callback on each element in the collection
};
http://underscorejs.org/#each
var _ = {};
_.each = function(list, callback) {
//determine if list is an array or an object
if(Array.isArray(list)) {
//use array for loop
//invoke the callback on each element in the list
} else {
//use object for loop
//invoke the callback on each element in the list
}
};
http://underscorejs.org/#each
var _ = {};
_.each = function(list, callback) {
if(Array.isArray(list)) {
for (var i = 0; i < list.length; i++) {
//invoke the callback on each element in the list
}
} else {
for (var key in list) {
//invoke the callback on each element in the list
}
}
};
http://underscorejs.org/#each
var _ = {};
_.each = function(list, callback) {
if(Array.isArray(list)) {
for (var i = 0; i < list.length; i++) {
callback(list[i], i, list);
}
} else {
for (var key in list) {
callback(list[key], key, list);
}
}
};
function AnimalMaker(name) {
return {
speak: function () {
console.log("my name is ", name);
}
};
};
var animalNames = ['Frog', 'Falcon', 'Fox'];
var farm = [];
for(var i = 0; i < animalNames.length; i++){
farm.push(AnimalMaker(animalNames[i]));
}
function AnimalMaker(name) {
return {
speak: function () {
console.log("my name is ", name);
}
};
};
var animalNames = ['Frog', 'Falcon', 'Fox'];
var farm = [];
_.each(animalNames, function (name) {
farm.push(AnimalMaker(name));
});
Simplicity vs Flexibility
var arr = ['a', 'b', 'c'];
for(var i = arr.length - 1; i >= 0; i--) {
// do stuff with elements in reverse order
}
for(var i = 0; i < arr.length; i += 2) {
// do stuff with even-indexed elements
}
each
for
For Loops
Each Loops
The callback gets the index and array as well, but don't use them to access the current element.
var names = ['Jeff', 'Preston', 'Bianca'];
function logTwice(name, index, names) {
var currentName = names[index]; // correct
console.log(currentName);
currentName = name; // correct AND easier
console.log(currentName);
}
_.each(names, logTwice);
For-In Loops
Each Loops
The callback gets the key and object as well, but don't use them to access the current property value.
var superheroes = {
batman : 'human',
superman : 'alien',
ironman : 'human',
groot : 'alien',
wolverine : 'mutant'
};
function logNameIfHuman(type, heroName, superheroes) {
var currentType = superheroes[heroName]; // correct
currentType = type; // correct AND easier
if(currentType === 'human') {
console.log(heroName);
}
}
_.each(superheroes, logNameIfHuman);
var studentA = {
firstName: 'Ryan',
lastName: 'Gosling'
};
var classA = {
subject: 'JavaScript',
teacher: '@RebootJeff',
students: [ /* studentA, studentB, etc... */ ]
};
var classes = [ /* classA, classB, etc... */ ];
for(var i = 0; i < classes.length; i++) {
for(var j = 0; j < classes[i].students.length; j++) {
var fullName = classes[i].students[j].firstName +
' ' + classes[i].students[j].lastname;
console.log(fullName);
}
}
_.each(classes, function(class) {
_.each(class.students, function(student) {
var fullName = student.firstName + ' ' + student.lastName;
console.log(fullName);
});
});
How do we print all the names
of all the students
of all the classes?
for(var i = 0; i < classes.length; i++) {
var students = classes[i].students; // This improves readability
for(var j = 0; j < students.length; j++) {
var fullName = students[j].firstName + ' ' + students[j].lastname;
console.log(fullName);
}
}
MUCH easier to read:
var pocketmon = ['Charisaur', 'Bulbazard', 'Twomew'];
var stokedFunc = function(val){
return val + '!!!';
};
var stokedPocketmon = _.map(pocketmon, stokedFunc);
//_.map(list, iterator)
console.log(stokedPocketmon);
//['Charisaur!!!','Bulbazard!!!','Twomew!!!']
var _ = { each: function(/*...*/) { /*...*/ } };
_.map = function(list, iterator) {
var result = []; // make a new array
_.each(list, function(item, index, list) {
result.push(iterator(item, index, list));
});
return result;
};
function AnimalMaker(name) {
return {
speak: function () {
console.log("my name is ", name);
}
};
};
var animalNames = ['Frog', 'Falcon', 'Fox'];
var farm = [];
_.each(animalNames, function (name) {
farm.push(AnimalMaker(name));
});
function AnimalMaker(name) {
return {
speak: function () {
console.log("my name is ", name);
}
};
};
var animalNames = ['Frog', 'Falcon', 'Fox'];
var farm = _.map(animalNames, function (name) {
return AnimalMaker(name);
});
function AnimalMaker(name) {
return {
speak: function () {
console.log("my name is ", name);
}
};
};
var animalNames = ['Frog', 'Falcon', 'Fox'];
// Remember coding WITHOUT Underscore?
var farm = [];
for(var i = 0; i < animalNames.length; i++){
farm.push(AnimalMaker(animalNames[i]));
}
function AnimalMaker(name) {
return {
speak: function () {
console.log("my name is ", name);
}
};
};
var animalNames = ['Frog', 'Falcon', 'Fox'];
// Mapping builds up an array and returns it.
var farm = _.map(animalNames, function (name) {
return AnimalMaker(name);
});
// An each loop returns nothing.
// Just use it to iterate over an array.
_.each(farm, function (animal) {
animal.speak();
});
I want to simply loop through an array or object.
I want a new array based on an existing one.
New partners!
(of course)
https://github.com/TelegraphPrep/week3
Follow @RebootJeff
Read words on RebootJeff.com
(for coding + career advice)
then we can discuss other topics such as...
BUT... there are no slides or prepared materials for these topics.
(Treat this like a Q&A session)