Credits

Bianca Gandolfo

Co-Founder of Telegraph Academy

(coding school for URMs)

http://www.telegraphacademy.com/

Intros

• Name
• Experience
• Motivation

Class Format

• Silence your ringtones (please)

• Answer my questions

• Show thumbs

• Ask for help during exercises

• Lunch at some point (unless your phone rings during lecture)

Objects
 

OVERVIEW

1. Property Access
2. Bracket Notation
3. Dot Notation
4. Dot vs Bracket
5. Nested Objects
6. Object Literals
7. Iteration

@BiancaGando                                                                         

@BiancaGando                                                                         

Overwriting

box = 
{"material" : "cardboard"}

box = 
{"material" : "titanium"}

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

@BiancaGando                                                                         

Expressions

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

@BiancaGando                                                                         

Keys w/Special Chars

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

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

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

box.@#! //SYNTAX ERROR

@BiancaGando                                                                         

Primitive Keys

box = 
{
  "material" : "cardboard",
  "0" : "meow",
  "3" : 3,
  "true" : "bark",

  "null" : "hello",
  "undefined" : "goodbye"
}

var box = {};
box["material"] = "cardboard";						
box[0] = "meow";
box[1+2] = 3;
box[true] = "bark";
box[null] = "hello";
box[undefined] = "goodbye";

JavaScript Primitives

• string
• number
• Boolean
• null
• undefined

(everything except

objects and arrays)

THE RULES

DOTS

​strings

Brackets

​"strings

"quotes required

"weird characters

other primitives

variables

numbers

quotations

weird characters

@BiancaGando                                                                         

expressions

expressions

@BiancaGando                                                                         

Storing Other Objects

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

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

box = {
  "material" : "cardboard",
  "size" : {
​    "height": 2,
    "width": 80
  },
  "area" : fn() {...}

}

@BiancaGando                                                                         

Object Literal

var box = {
  "area" : function() {...},
  "material" : "cardboard",
  "size" : {
    "height" : 2,
    "width" : 80
  }
};

var box = {
  area : function() {...},
  material : "cardboard",
  size : {
    height : 2,
    width : 80
  }
};

Exercise Time

@BiancaGando                                                                         

• What is the format for exercises?
• Pair programming?
• Can I use references?
  • Google
  • devdocs.io
  • stack overflow
• Who are the TAs?
  • When should I ask for help?
  • How will they help?

Arrays

Arrays vs Objects

@BiancaGando                                                                         

• JavaScript Arrays are Objects

• Arrays work best for storing lists of values

• Arrays store elements at numeric indices

• Arrays have built-in properties and methods to make it easier to work with lists of values

• Arrays can store any type of JavaScript value

Access and Assignment

@BiancaGando                                                                         

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

The Rules Don't Change!

@BiancaGando                                                                         

Native Properties

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

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?

            
                @BiancaGando
            
        

Nesting

            
                @BiancaGando
            
        

Nesting

            
                @BiancaGando
            
        

Nesting

var box = {
  "innerBox" : {
    "innerInnerBox" : {}
  }
}

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

box.innerBox //??

            
                @BiancaGando
            
        

Nesting

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

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

var myInnerBox = box['innerBox'];
myInnerBox; //??

Exercise Time

@BiancaGando                                                                         

Functions

function(s){}

Overview

• Anatomy
• Definition vs Invocation
• Named Functions vs Anonymous
• Parameters vs Arguments
• Return Values and Side Effects

@BiancaGando                                                                         

@BiancaGando                                                                         

Return/Side Effects

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

$('body').hide();

setTimeout(function() { 
  console.log("hello"); 
}, 1000);

@BiancaGando                                                                         

P.S. Functions are Objects!

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

add.example = 'testing 123!';

Looping

@BiancaGando                                                                         

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

Looping

@BiancaGando                                                                         

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

var farm = [];

Looping

            
                @BiancaGando
            
        

var animalMaker = function (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 animalName = animalNames[i];
  var animal = animalMaker(animalName);
  farm.push(animal);
}

Looping

@BiancaGando                                                                         

var animalMaker = function (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++){
  // condensed into one line
  farm.push(animalMaker(animalNames[i]));
}

Looping

@BiancaGando                                                                         

var animalMaker = function (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++){
  var animal = farm[j];
  animal.speak();
}

Looping

@BiancaGando                                                                         

var animalMaker = function (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();
}

Exercises

Part 1
is
complete!

Live Classes Monthly

Check Dates here