slides: slides.com/hrjr/obj-arr-func
exercises: https://github.com/kuychaco/JSFundamentals1
Co-Founder of Telegraph Academy
(coding school for URMs)
http://www.telegraphacademy.com/
2-6mos experience learning JavaScript
Completed JS tutorial like Codecademy, CodeSchool, Khan Academy, or Bloc.io
Want to solidify fundamentals
Looking for more practice
Interested in getting into Hack Reactor
Review and solidify core JS principles with project.
Get started with functional methods.
Use foundation to grow as a JS engineer.
{}
var box = {};
var box = {"material" : "cardboard"}
var box = {};
box.material = "cardboard";
var box = {"material" : "cardboard"}
var box = {};
box.material = "cardboard";
box.material; //??
var box = {"material" : "cardboard"}
||
cb
var box = {};
box.material = "cardboard";
var cb = box.material;
box = {"material" : "cardboard"}
box = {"material" : "titanium"}
var box = {};
box.material = "cardboard";
box.material = "titanium";
var box = {"material" : "cardboard"}
var box = {};
box.material = "cardboard";
box.material; //"cardboard"
box.size; //??
var box = {"material" : "cardboard"}
var box = {};
box["material"] = "cardboard";
box.material; //??
var box = {"material" : "cardboard"}
var box = {};
box["material"] = "cardboard";
box["material"]; //??
var box = {};
box["material"] = "cardboard";
var key = "material";
box[key]; //??
var box = {};
box["material"] = "cardboard";
var func = function(){
return "material";
};
box[func()]; //??
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"
box = { "material" : "cardboard", "^&*" : "testing 123" }
var box = {};
box["material"] = "cardboard";
box["^&*"] = "testing 123";
var test = box["^&*"];
box.@#! //SYNTAX ERROR
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";
DOTS
strings
Brackets
"strings
"quotes required
"weird characters
other primitives
variables
numbers
quotations
weird characters
expressions
expressions
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() {...}
}
var box = {
"area" : function() {...},
"material" : "cardboard",
"size" : {
"height" : 2,
"width" : 80
}
};
var box = {
area : function() {...},
material : "cardboard",
size : {
height : 2,
width : 80
}
};
var box = {};
box['material'] = "cardboard";
box[0] = 'meow';
box['^&*'] = "testing 123";
for(var key in box){
console.log(box[key]); //??
}
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); //??
}
What is an object?
What is the difference between dot and bracket notation?
When can you only use brackets and not dot?
When can you only use dot notation and not bracket?
How do you add a property with a key that contains special characters?
How do you add a property with a key that is stored in a variable?
How do you add a property whose key and value are stored in different variables?
How do you access an object that is inside another object?
How do you create an object that is nested inside another object?
How do we loop through objects to access the values?
[]
box: [true, 'meow', {'hello' : 'goodbye'}]
index#: 0 1 2
var box = [];
box[0] = true;
box[1] = 'meow';
box.push({'hello' : 'goodbye'});
var i = 0;
box[i]; // ??
box[1]; // ??
box.pop() //??
box: [true]
box: [true, 'meow']
box: [true, 'meow', {'hello':'goodbye'}]
box: []
box: [true, 'meow']
var box = [];
box[0] = true;
box[1] = 'meow';
box.push({'hello' : 'goodbye'});
var i = 0;
box[i]; // true
box[1]; // ??
box.pop() //??
var box = [];
box[0] = true;
box[1] = 'meow';
box.push({'hello' : 'goodbye'});
var i = 0;
box[i]; // true
box[1]; // 'meow'
box.pop() //??
var box = [];
box[0] = true;
box[1] = 'meow';
box.push({'hello' : 'goodbye'});
var i = 0;
box[i]; // true
box[1]; // 'meow'
box.pop() // {'hello' : 'goodbye'}
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box['size']; // 9
box[0]; // 'meow'
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box['size']; // ??
box[0]; // ??
box: ['meow']
index #: 0
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box['size']; // 9
box[0]; // ??
{0 : 'meow', 'size' : 9 }
box: ['meow']
index #: 0
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box.size; // ??
box[0]; // ??
{0 : 'meow', 'size' : 9 }
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box.size; // 9
box[0]; // ??
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box.size; // 9
box[0]; // 'meow'
box: ['meow']
index #: 0
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box.size; // ??
box.0; // ??
{0 : 'meow', 'size' : 9 }
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box.size; // 9
box.0; // ??
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box.size; // 9
box.0; // SyntaxError: Unexpected number
box: ['meow']
index #: 0
var box = [];
box['size'] = true;
box['0'] = 'meow';
box.length; //??
{0 : 'meow', 'size' : true }
var box = [];
box['size'] = true;
box['0'] = 'meow';
box.length; // 1
var box = [];
box['0'] = 'meow';
box[3] = {'babyBox': true};
box['length']; //??
box: ['meow', undefined, undefined, {'babyBox': true}]
index #: 0 1 2 3
var box = [];
box['0'] = 'meow';
box[3] = {'babyBox': true};
box['length']; // 4
box: ['meow', undefined, undefined, {'babyBox': true}]
index #: 0 1 2 3
var box = [];
box['0'] = 'meow';
box[3] = {'babyBox': true};
box[length]; //??
var box = [];
box['0'] = 'meow';
box[3] = {'babyBox': true};
box[length]; // undefined
box: ['meow', undefined, undefined, {'babyBox': true}]
index #: 0 1 2 3
var box = [];
box['0'] = 'meow';
box[1] = 'Whoohooo!';
box[3] = {'babyBox': true};
box[box.length]; //??
var box = [];
box['0'] = 'meow';
box[1] = 'Whoohooo!';
box[3] = {'babyBox': true};
box[box.length]; // undefined
box: ['meow', 'Whoohooo!']
index #: 0 1
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box[1] = 'Whoohooo!';
box[box.length - 1]; //??
{0 : 'meow', 1 : 'Whoohooo!', 'size' : 9 }
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box[1] = 'Whoohooo!';
box[box.length - 1]; // Whoohooo!
box: ['meow', 'Whoohooo!']
index #: 0 1
{0 : 'meow', 1 : 'Whoohooo!'}
var box = [];
box['0'] = 'meow';
box[1] = 'Whoohooo!';
box[box.length - 1]; //??
var box = [];
box['0'] = 'meow';
box[1] = 'Whoohooo!';
box[box.length - 1]; // Whoohooo!
box: ['meow']
index #: 0
var box = [];
box['size'] = 9;
box['0'] = 'meow';
for(var k in box){
console.log(k); // ??
}
{0 : 'meow', 'size' : 9 }
var box = [];
box['size'] = 9;
box['0'] = 'meow';
for(var k in box){
console.log(k); // 0
}
var box = [];
box['size'] = 9;
box['0'] = 'meow';
for(var k in box){
console.log(k); // 0 size
}
box: ['meow']
index #: 0
var box = [];
box['size'] = 9;
box['0'] = 'meow';
for(var k in box){
console.log(box.k); // ??
}
{0 : 'meow', 'size' : 9 }
var box = [];
box['size'] = 9;
box['0'] = 'meow';
for(var k in box){
console.log(box.k); // undefined
}
var box = [];
box['size'] = 9;
box['0'] = 'meow';
for(var k in box){
console.log(box.k); // undefined undefined
}
box: ['meow']
index #: 0
var box = [];
box['size'] = 9;
box['0'] = 'meow';
for(var k in box){
console.log(box[k]); //??
}
{0 : 'meow', 'size' : 9 }
var box = [];
box['size'] = 9;
box['0'] = 'meow';
for(var k in box){
console.log(box[k]); // meow
}
var box = [];
box['size'] = 9;
box['0'] = 'meow';
for(var k in box){
console.log(box[k]); // meow 9
}
box: ['meow', 'Whoohooo!']
index #: 0 1
{0 : 'meow', 1 : 'Whoohooo!', '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); //??
}
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); // 0
}
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); // 0 1
}
box: ['meow', 'Whoohooo!']
index #: 0 1
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box.push('Whoohoo!');
for(var i = 0; i < box.length; i++){
console.log(box.i); //??
}
{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); // undefined
}
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box.push('Whoohoo!');
for(var i = 0; i < box.length; i++){
console.log(box.i); // undefined undefined
}
box: ['meow', 'Whoohooo!']
index #: 0 1
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box.push('Whoohoo!');
for(var i = 0; i < box.length; i++){
console.log(box[i]); //??
}
{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]); // meow
}
var box = [];
box['size'] = 9;
box['0'] = 'meow';
box.push('Whoohoo!');
for(var i = 0; i < box.length; i++){
console.log(box[i]); // meow Whoohoo!
}
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?
var box = {"innerBox" : {}}
var box = {};
box.innerBox = {};
// or...
box['innerBox'] = {};
var box = {};
box.innerBox = {};
box.innerBox.innerInnerBox = {};
// or...
box['innerBox'].innerInnerBox = {};
// or...
box['innerBox']['innerInnerBox'] = {};
var box = { "innerBox" : { "innerInnerBox" : {} } }
var box = {};
box.innerBox = {};
box.innerBox.innerInnerBox = {};
var box = {};
box.innerBox = {};
box.innerBox.innerInnerBox = {};
// or...
box['innerBox'].innerInnerBox = {};
var box = {};
box.innerBox = {};
box.innerBox.innerInnerBox = {};
// or...
box['innerBox'].innerInnerBox = {};
// or...
box['innerBox']['innerInnerBox'] = {};
// or...
var box = {
innerBox : {
innerInnerBox : {}
}
};
var box = { "innerBox" : { "innerInnerBox" : {} } }
var box = {};
box.innerBox = {};
box['innerBox'].innerInnerBox = {};
box.innerBox //??
var box = { "innerBox" : { "innerInnerBox" : { "full" : true } } }
var box = {};
box.innerBox = {};
box.innerBox['innerInnerBox'] = {};
var myInnerBox = box['innerBox'];
myInnerBox; //??
function(s){}
var nameImprover = function (name, adj) {
return 'Col ' + name + ' Mc' + adj + ' pants';
};
$('body').hide();
setTimeout(function() {
console.log("hello");
}, 1000);
var nameImprover = function (name, adj) {
return 'Col ' + name + ' Mc' + adj + ' pants';
};
$('body').hide();
setTimeout(function() {
console.log("hello");
}, 1000);
var nameImprover = function (name, adj) {
return 'Col ' + name + ' Mc' + adj + ' pants';
};
$('body').hide();
setTimeout(function() {
console.log("hello");
}, 1000);
var nameImprover = function (name, adj) {
return 'Col ' + name + ' Mc' + adj + ' pants';
};
$('body').hide();
setTimeout(function() {
console.log("hello");
}, 1000);
var nameImprover = function (name, adj) {
return 'Col ' + name + ' Mc' + adj + ' pants';
};
$('body').hide();
setTimeout(function() {
console.log("hello");
}, 1000);
var nameImprover = function (name, adj) {
return 'Col ' + name + ' Mc' + adj + ' pants';
};
$('body').hide();
setTimeout(function() {
console.log("hello");
}, 1000);
var add = function(a, b){
return a + b;
};
add(3, 4); // ??
var add = function(a, b){
return a + b;
};
add.example = 'testing 123!';
var animalMaker = function (name) {
return {
speak: function () {
console.log("my name is ", name);
}
};
};
var animalNames = ['Sheep', 'Liger', 'Big Bird'];
var animalMaker = function (name) {
return {
speak: function () {
console.log("my name is ", name);
}
};
};
var animalNames = ['Sheep', 'Liger', 'Big Bird'];
var farm = [];
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);
}
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]));
}
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();
}
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();
}
Check Dates here