Welcome to JS102

• {Objects}
• [Arrays]
• And Function(s){...}

Slides: bit.ly/JS102

Arrays

var coolTeachers = ["Pamela", "Bianca", "Brenda", "Aysegul"];

Access and Assignment

var classes = [];

classes[0] = 'HTML 101';						
classes[1] = 'JS 101';

classes.push('JS 102');
classes.pop();

var i = 0;
classes[i]; // ??

classes[1];

classes.pop(); //??

classes.length;

Iteration

var classes = ['HTML 101', 'JS 101', 'JS 102'];
//I took HTML 101...
for(initial counter; condition to stop; counter++){
						
	console.log(counter); //??
						
}

Iteration

var classes = ['HTML 101', 'JS 101', 'JS 102'];
<!-- initial counter; condition to stop; counter++ -->
for(var i = 0; i < classes.length; i++){

	console.log('I took ' + classes[i]); 
						
}

Exercise Time

Objects

{}

Assignment

var angelTheCat = {};

angelTheCat.furColor = "orange";

//OR

var angelTheCat = {"furColor" : "orange"};

Access w/dots

var angelTheCat = {};
						
angelTheCat.furColor = "orange";
						
var furVariable = angelTheCat.furColor;

furVariable; //??

angelTheCat.furColor = "grey";

furVariable; //??

Brackets

angelTheCat["fur color"] = "orange";
angelTheCat["fur-color"] = "orange";

var facebookFriends = {};
facebookFriends[12323] = angelTheCat;

Variables

var angelTheCat = {};
						
angelTheCat["furColor"] = "orange";
						
						
var keyVariable = "furColor";
						
angelTheCat[keyVariable]; //??

Object Literals

var angelTheCat = { 
	age: 5, 
	furColor: "orange"
};

Values

var angelTheCat = { 
	age: 5, 
	furColor: "orange", 
	isAngelic: true, 
	likes: ["catnip", "milk"], 
	birthday: {"month": 7, "day": 17, "year": 2009} 
};

Exercise Time

Arrays of Objects

var cuteCats = [

		{ name: "Angel", age: 18, furColor: "grey" },
		{ name: "Evil", age: 14, furColor: "red" },
		{ name: "Meh", age: 12, "Fur Color": "white" }

	]

cuteCats[0].name = ;//?

cuteCats[1].furColor;//?

cuteCats[2]["Fur Color"] = ;//?

Iterating Objects

var zoo = {
	birds : 3,
	bears: 5,
	cats: 12,
}

for(var key in zoo) {
	console.log(zoo[key] + ' ' + key);
}

Exercise Time

Nested Objects

var doll = { "innerDoll" : {} };

var doll = {
	size: "large",
	innerDoll: { size: "medium"}
};

doll.innerDoll.innerDoll = {size: "small"};

console.log(doll);

Exercise Time

Functions

var add = function(a, b) {
	return a + b;
};

add(5, 4);

Definition

var nameImprover = function (name, adj) {

	return 'Col ' + name + ' Mc' + adj + ' pants';

};

Definition vs. Call-time

var nameImprover = function (name, adj) {
	return 'Col ' + name + ' Mc' + adj + ' pants';
};	

nameImprover("Pamela", "fancy");

Naming Arguments

var nameImprover = function (name, adj) {
	return 'Col ' + name + ' Mc' + adj + ' pants';
};	

nameImprover("Pamela", "shiny");
nameImprover("Aysegul", "fancy");

Return/Side Effects

var nameImprover = function (name, adj) {
	return 'Col ' + name + ' Mc' + adj + ' pants';
};	

var nameLogger = function (name, adj) {
	var newName = 'Col ' + name + ' Mc' + adj + ' pants';
	console.log(newName); 
};

arguments Keyword

var addTwo = function(a, b) {
	console.log(arguments); // logs [3,10]
	return a + b; 
};

addTwo(3, 10); // 13

arguments Keyword

var addMany = function() {
	console.log(arguments);
	var sum = 0;
	for (var i = 0; i < arguments.length; i++) {
		sum += arguments[i];
	}
	return sum;
};

addMany(3, 10, 57,...);

Defaulting Arguments

var nameLogger = function(name, adj) {
	if(adj === undefined) adj = "Fancy";
	var newName = 'Col ' + name + ' Mc' + adj + ' pants';
	console.log(newName); 
};

Exercise Time

Scope

The context in which values and expressions are "visible," or can be referenced.

Local Scope

var mySecretFunction = function() {
  var meLoveChocolate = true;
  console.log(meLoveChocolate);
};

console.log(meLoveChocolate);

Global Scope

<!-- I'm available everywhere. -->
var momsCandies = ["Milky Way", "Cadbury eggs", "Twix"];

var keepMyCandy = function() {
  var myCandies = ["Kit-Kat", "Hershey Bar", "M&Ms", "Snickers"];
  console.log("I'm available inside the function ", momsCandies);
};

console.log(myCandies);

<!-- I'm available everywhere. -->
var momsCandies = ["Milky Way", "Cadbury eggs", "Twix"];

var shareMyCandies = function() {
  myCandies = ["Kit-Kat", "Hershey Bar", "M&Ms", "Snickers"];
};

console.log(myCandies);

Precedence

var g = "global";

function go() { 
  var l = "local";
  var g = "in here!";
  alert(g + " inside go");
}

go();
alert(g + " outside go");

Questions