Object

Array

functions ES5

Objects

{}

OVERVIEW

Property Access
Bracket Notation
Dot Notation
Dot vs Bracket
Nested Objects
Object Literals
Iteration

var box = {};

Data

var box = {};
						
box.material = "cardboard";

Assignment w/ Dots

When are some other times you have seen dots in JS?

var box = 
{"material" : "cardboard"}

var box = {};
						
box.material = "cardboard";						
						
box.material; //??

Assignment w/ Dots

var box = 
{"material" : "cardboard"}

var box = {};
						
box.material = "cardboard";
						
var cb = box.material;

Access w/ Dots

var box = 
{"material" : "cardboard"}

Access w/ Dots

box = 
{"material" : "cardboard"}

var box = {};
    					
box.material = "cardboard";
						
var cb = box.material;

cb; //??

box.material = "titanium";

cb; //??

box = 
{"material" : "titanium"}

cb = "cardboard"

var box = {};
						
box.material = "cardboard";
						
box.material; //"cardboard"
						
box.size; //??

Access and Assignment

var box = 
{"material" : "cardboard"}

var box = {};
						
box["material"] = "cardboard";
						
box.material; //??

Brackets

var box = 
{"material" : "cardboard"}

var box = {};
						
box["material"] = "cardboard";
						
box["material"]; //??

Brackets

var box = 
{"material" : "cardboard"}

var box = {};
						
box["material"] = "cardboard";
						
						
var key = "material";
						
box[key]; //??

Variables

var box = {};
						
box["material"] = "cardboard";
						
var func = function(){
 return "material";
};
						
box[func()]; //??

Expressions

var box = {};
						
						
box['material'] = "cardboard";
						
var key = 'material';
						
						
box['key']; //??

var box = {};
						
						
box['material'] = "cardboard";
						
var key = 'material';
						
						
box['key']; //undefined
box.key; //??

var box = {};
						
						
box['material'] = "cardboard";
						
var key = 'material';
						
						
box['key']; //undefined
box.key; //undefined

var box = {};
						
						
box['material'] = "cardboard";
						
var key = 'material';
						
						
box['key']; //undefined
box.key; //undefined						
box[key]; //??

var box = {};
						
						
box['material'] = "cardboard";
						
var key = 'material';
						
						
box['key']; //undefined
box.key; //undefined						
box[key]; //"cardboard"

Do's && Don'ts

var box = {};
						
box['material'] = "cardboard";
box[0] = 'meow';
box['^&*'] = "testing 123";

var test = box['^&*'];

non-valid characters

box = 
{"material" : "cardboard",
 "0" : "meow",
 "^&*" : "testing 123"
}

THE RULES

DOTS

strings

Brackets

strings"

"quotes required

weird characters"

variables

numbers

numbers

quotations

weird characters

expressions

expressions

Storing Data

var box = {};
						
box["material"] = "cardboard";
						
box["size"] = {
  "height": 2,
  "width": 80
};

box.area = function(){
  return box.size.height * box.size.width;
};

Style: Bracket vs. Dots

var box = {};
						
box['size'] = 9;
						
box['~/ [."4'] = 'meow';
						
						
box['size']; // 9
						
box['~/ [."4']; // 'meow'

@BiancaGando

Object Literals

var box = {
						
box['size'] = 9;
						
box['~/ [."4'] = 'meow';};						box['size']; // 9
						
box['~/ [."4']; // 'meow'

var box = {
						
box['size'] = 9;
						
box['~/ [."4'] = 'meow';};						box['size']; // 9
						
box['~/ [."4']; // 'meow'

var box = {
						
    'size'  = 9;
						
    '~/ [."4'  = 'meow';};						box['size']; // 9
						
box['~/ [."4']; // 'meow'

var box = {
						
    'size'  : 9,
						
    '~/ [."4'  : 'meow';};						box['size']; // 9
						
box['~/ [."4']; // 'meow'

var box = {
						
    'size'  : 9,
						
    '~/ [."4'  : 'meow'};						box['size']; // 9
						
box['~/ [."4']; // 'meow'

@BiancaGando

Iteration

var box = {};
						
box['material'] = "cardboard";						
box[0] = 'meow';
box['^&*'] = "testing 123";


for(var key in box){
  console.log(key); //?? 
}

var box = {};
						
box['material'] = "cardboard";						
box[0] = 'meow';
box['^&*'] = "testing 123";


for(var key in box){
  console.log(box[key]); //?? 
}

@BiancaGando

Iteration

Exercise Time

@BiancaGando

Arrays

[]

Overview

Arrays vs Objects
Access && Assignment
Native Methods && Properties
Iteration

@BiancaGando

Arrays vs Objects

@BiancaGando

var box = [];
						
box[0] = true;						
box[1] = 'meow';
box.push({'hello' : 'goodbye'});
						
						
var i = 0;
						
box[i]; // ??
box[1];
box.pop() //??

Access & Assignment

@BiancaGando

[true, 'meow', {'hello' : 'goodbye'}]

index# 0 1 2

{0 : 'meow', 'size' : 9 }

var box = {};
						
box['size'] = 9;
						
box['0'] = 'meow';
						
						
box['size']; // 9
						
box[0]; // 'meow'

@BiancaGando

Access & Assignment

var box = [];
						
box['size'] = 9;
						
box['0'] = 'meow';
						
						
box['size']; // ??
						
box[0]; // ??

['meow']

index # 0

{0 : 'meow', 'size' : 9 }

var box = [];
						
box['size'] = 9;
						
box['0'] = 'meow';
						
						
box.size; // ??
						
box[0]; // ??

Access & Assignment

@BiancaGando

['meow']

index # 0

{0 : 'meow', 'size' : 9 }

The Rules Don't Change!

var box = [];
						
box['size'] = 9;
						
box['0'] = 'meow';
						
						
box.size; // ??
						
box.0; // ??

Access & Assignment

@BiancaGando

['meow']

index # 0

{0 : 'meow', 'size' : 9 }

var box = [];
						
box['size'] = 9;
						
box['0'] = 'meow';
						
for(var k in box){
						
  console.log(k); // ??
						
}

Iteration

@BiancaGando

['meow']

index # 0

{0 : 'meow', 'size' : 9 }

var box = [];
						
box['size'] = 9;
						
box['0'] = 'meow';
						
						
for(var k in box){
						
  console.log(box.k); // ??
						
}

Iteration

@BiancaGando

['meow']

index # 0

{0 : 'meow', 'size' : 9 }

var box = [];
						
box['size'] = 9;
						
box['0'] = 'meow';
						
for(var k in box){
  console.log(box[k]); //??
					
}

Iteration

@BiancaGando

['meow']

index # 0

{0 : 'meow', 'size' : 9 }

var box = [];
						
box['size'] = 9;				
box['0'] = 'meow';				
box.push('Whoohoo!');
						
for(var k in box){					
  console.log(box[k]);				
}
						
for(var i = 0; i < box.length; i++){
						
  console.log(i); //??
						
}

Iteration

@BiancaGando

['meow', 'Whoohooo!']

index # 0 1

{0 : 'meow', 1 : 'Whoohooo!', 'size' : 9 }

var box = [];
						
box['size'] = 9;				
box['0'] = 'meow';				
box.push('Whoohoo!');

						
for(var i = 0; i < box.length; i++){
						
  console.log(box.i); //??
						
}

Iteration

@BiancaGando

['meow', 'Whoohooo!']

index # 0 1

{0 : 'meow', 1 : 'Whoohooo!', 'size' : 9 }

var box = [];
						
box['size'] = 9;				
box['0'] = 'meow';				
box.push('Whoohoo!');

						
for(var i = 0; i < box.length; i++){
						
  console.log(box[i]); //??
						
}

Iteration

@BiancaGando

['meow', 'Whoohooo!']

index # 0 1

{0 : 'meow', 1 : 'Whoohooo!', 'size' : 9 }

var box = [];
						
box['size'] = true;
						
box['0'] = 'meow';
						
						

						
box.length; //??

Native Properties

@BiancaGando

['meow']

index # 0

{0 : 'meow', 'size' : 9 }

var box = [];
						
box['0'] = 'meow';
box[3] = {'babyBox': true}; 
						
						

						
box['length']; //??

@BiancaGando

Native Properties

var box = [];
						
						
box['0'] = 'meow';

box[3] = {'babyBox': true};
						
						

						
box[length]; //??

@BiancaGando

Native Properties

var box = [];
						
box['0'] = 'meow';						
box[1] = 'Whoohooo!';
box[3] = {'babyBox': true};

						

									
box[box.length]; //??

@BiancaGando

Native Properties

var box = [];	
					
box['size'] = 9;				
box['0'] = 'meow';
box[1] = 'Whoohooo!';
						
						
						
box[box.length - 1]; //??

@BiancaGando

Native Properties

['meow', 'Whoohooo!']

index # 0 1

{0 : 'meow', 1 : 'Whoohooo!', 'size' : 9 }

var box = [];	
				
box['0'] = 'meow';
box[1] = 'Whoohooo!';
						
						
						
box[box.length - 1]; //??

@BiancaGando

Native Methods

['meow', 'Whoohooo!']

index # 0 1

{0 : 'meow', 1: 'Whoohooo!'}

var box = {};
						
box.innerBox = {};

@BiancaGando

Nesting

var box = 
{"innerBox" : {}}

var box = {};
						
box['innerBox'] = {};

@BiancaGando

Nesting

var box = 
{"innerBox" : {}}

var box = {};
						
box['innerBox'] = {};
						
box['innerBox']['full'] = true;

@BiancaGando

Nesting

var box = 
{"innerBox" : {
    full: true
  }
}

var box = {};
						
box['innerBox'] = {};
						
box['innerBox'].full = true;

@BiancaGando

Nesting

var box = 
{"innerBox" : {
    full: true
  }
}

var box = {};
						
box.innerBox = {};
						
box.innerBox.full = true;
						
						
box.innerBox; //??

@BiancaGando

Nesting

var box = 
{"innerBox" : {
    full: true
  }
}

var box = {};
						
box.innerBox = {};
						
box.innerBox.full = true;
						
						
var myInnerBox = box.innerBox;
						
myInnerBox; //??

@BiancaGando

Nesting

var box = 
{"innerBox" : {
    full: true
  }
}

var box = {};
						
box.innerBox = {};
						
box.innerBox.babyBox = {};
						
						
box.innerBox['babyBox']; //??
						
box.innerBox['babyBox'].says = "What's up!?";

@BiancaGando

Nesting

var box = 
{"innerBox" : {
    babyBox : {
      says: "What's up!?"
    }
  }
}

var box = {};
						
box['innerBox'] = {};					
box['innerBox'].full = true;
						
						
box[innerBox]['height'] = 10;
						

					
box[innerBox2].full = false;

@BiancaGando

Nesting

Exercise Time

@BiancaGando

What do you use to loop through an array?

What are some different methods of adding values to an array?

What are some special properties about arrays that are different from objects?

What are some ways to access values in your array?

When would you use an array over an object?

Functions

function(){}

Overview

Anatomy

@BiancaGando

@BiancaGando

Anatomy

@BiancaGando

Definition

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

$('body').hide();

myArr.forEach(function(val){ console.log(val);});

$('button').on('click', function(){ 
  console.log('Don\'t press my buttons!');
});

@BiancaGando

Name

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

$('body').hide();

myArr.forEach(function(val){ console.log(val);});

$('button').on('click', function(){ 
  console.log('Don\'t press my buttons!');
});

@BiancaGando

Body

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

$('body').hide();

myArr.forEach(function(val){ console.log(val);});

$('button').on('click', function(){ 
  console.log('Don\'t press my buttons!');
});

@BiancaGando

Invocation/Call-time

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

$('body').hide();

myArr.forEach(function(val){ console.log(val);});

$('button').on('click', function(){ 
  console.log('Don\'t press my buttons!');
});

@BiancaGando

Arguments/Parameters

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

$('body').hide();

myArr.forEach(function(val){ console.log(val);});

$('button').on('click', function(){ 
  console.log('Don\'t press my buttons!');
});

@BiancaGando

return/side effects

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

$('body').hide();

myArr.forEach(function(val){ console.log(val);});

$('button').on('click', function(){ 
  console.log('Don\'t press my buttons!');
});

@BiancaGando

Quick Review

var add = function(a, b){
     return a + b;
};
add(3, 4, 5); // ??

add(4, 10, 3); //13?

@BiancaGando

arguments Keyword

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

@BiancaGando

arguments Keyword

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

@BiancaGando

array-like object

var add = function(a, b){
  arguments.slice(0,1) //ERROR!!  
  return a + b; 
};
add(3, 10, 5);

@BiancaGando

P.S. Functions are

Objects!

var add = function(a, b){
 	return a + b; 
};
add.example = 'testing 123!';

Exercise time

@BiancaGando

Questions

@BiancaGando

function AnimalMaker(name) {
  return { 
    speak: function () { 
      console.log("my name is ", name); 
    } 
  };
};
    
var animalNames = ['Sheep', 'Liger', 'Big Bird'];

Looping

function AnimalMaker(name) {
  return { 
    speak: function () { 
      console.log("my name is ", name); 
    } 
  };
};
    
var animalNames = ['Sheep', 'Liger', 'Big Bird'];  

var farm = [];

Looping

@BiancaGando

function AnimalMaker(name) {
  return { 
    speak: function () { 
      console.log("my name is ", name); 
    } 
  };
};
    
var animalNames = ['Sheep', 'Liger', 'Big Bird'];  

var farm = [];

for(var i = 0; i < animalNames.length; i++){
  var animal = AnimalMaker(animalNames[i])
  farm.push(animal);
}

Looping

@BiancaGando

function AnimalMaker(name) {
  return { 
    speak: function () { 
      console.log("my name is ", name); 
    } 
  };
};

var animalNames = ['', '', ''];
var farm = [];

for(var i = 0; i < animalNames.length; i++){

  farm.push(AnimalMaker(animalNames[i]));
  //prev 2 lines condensed onto one
}

Looping

@BiancaGando

function AnimalMaker(name) {
  return { 
    speak: function () { 
      console.log("my name is ", name); 
    }
  };
};

var animalNames = ['Sheep', 'Liger', 'Big Bird'];

var farm = [];

for(var i = 0; i < animalNames.length; i++){
  farm.push(AnimalMaker(animalNames[i]));
}

for(var j = 0; j < farm.length; j++){
  farm[j].speak()
}

Looping

@BiancaGando

Exercises

Scope

Overview

Local
Global
Nested Scopes
Precedence
Block Scope

@BiancaGando

@BiancaGando

Local Scope

var func = function(){
  var local = true;
};

console.log(local);

var x = 'global!';

var x = 'global!';

//inside a function
function encapsulate(){

z = 'global here, too!';

}

var x = 'global!';

//inside a function
function encapsulate(){
  z = 'global here, too!';

  window.y = 'also global!';
}

@BiancaGando

Global Scope

@BiancaGando

Parent vs Child Scope

var g = 'global'; 

function blender(fruit) { 
  var b = fruit; 
  var y = 'yogurt';
 
  function bs() { 
    alert( b + ' and ' + y + ' makes ' + b + ' swirl'); 
  } 
  bs(); 
} 

blender('blueberry');

@BiancaGando

Privacy

var g = 'global'; 

function blender(fruit) { 
  var b = fruit; 
  var y = 'yogurt';
 
  function bs() { 
    alert( b + ' and ' + y + ' makes ' + b + ' swirl'); 
  } 
  bs(); 
} 

blender('blueberry');

creating scopes

@BiancaGando

@BiancaGando

Precedence

var g = "global";

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

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

@BiancaGando

Block Scope

var inBlock = false;

for(var i = 0; i < 5; i++){
  var inBlock = true;
};

if(inBlock){
  console.log('Is there block scope? ' + !inBlock);
}

Exercise Time

@BiancaGando

Questions

@BiancaGando

Part 1
is
complete!

Live Classes Monthly

Check Dates here