Objectives
- Object: reference type
- Boolean, Null, Undefined, Number, String: Primitive types (immutable) - see images
Using the following folder structure, how would you navigate from the Coding directory to the Homework directory?
cd .. : To navigate to the previous directory we can use cd ..
Referencing the file structure below, if you are currently in the Notes directory what would running the commany pwd return?
/Desktop/Homework/Notes : the current path starting with the Root folder
Using the folder structure below, what is the command you would need to navigate from root to Applications?
cd Applications : To navigate to a directory we use the cd (Change Directory) command followed by the path we want to change to.
Using the folder structure below, what is the command you would need to navigate from the root directory to the USB directory?
cd Volumes/USB To navigate to a directory we use the cd (Change Directory) command followed by the path we want to change to. Since we know we are starting from root so we need to enter the Volumes directory, then the USB directory.
What does the ls do?
Lists both the files and subdirectories within the current directory.
Object Notation
Given the following code, what does console.log print?
let bear = { growl: "RAWR" };
console.log(bear["age"]);
undefined : There is no "age" key in the bear object.
In the code below, what is the returned value of manager.salary?
let manager = {};
manager["salary"] = "$$$";
"$$$" -- We can set a key within an object using bracket notation. That key can then be acessed using either dot notation or bracket notation.
In the code below, which answers would set a color key to the value of "blue" in the car object?
let car = {};
let colorVar = "color";
- car[colorVar] = "blue"
- car.color = "blue"
- car[0] = "blue"
- car.colorVar = "blue"
Answer 1 or answer 2. Using dot notation we can explicitly set key names (car.color), but we cannot use variables to set keys (i.e. cat.colorVar) Meaning - if you executed car.colorVar = "blue" you would be setting a new key named colorVar in the car object.
What is the return value of cat.myKey?
let cat = {};
let myKey = "color";
cat.myKey = "orange";
cat.myKey;
"orange" : We can set a key with an object using dot notation. That key can then be accessed using either dot notation or bracket notation.
What does the console.log statement below print out?
let lion = { name: "Simba" };
console.log(lion["color"] === undefined);
true: If we try to access a key that is not inside an object we get undefined. So by that logic, we can check if a key is within an object by comparing that key's value to undefined.
What would be the returned value of accessing dog["name"] in the codde below?
let dog = {}
dog.name = "Lily";
"Lily"; We can set a key within an object using dot notation - dog.name = "Lily" That key can then be accessed using either dot notation (dog.name) or bracket notation (dog["name"])
Which of the following answers will give you access to the value of the cat object's name key?
cat[catName]cat.namecat["name"]
All of the above ar correct! We can use bracket notation to access the name key (cat["name"]), dot notation(cat.name), and we can use a variable with bracket notation (cat[catName]).
Primitive vs Reference
A JavaScript object is what type?
Reference : JavaScript objects are stored in memory by reference to the object itself.
JavaScript primitive types are immutable (meaning they cannot change). True or False?
True: JavaScript primitive types are immutable. When you change a JavaScript primitive type value, a new memory location is assigned to the variable.
What is the value of array1 in the following code:
let array1 = [1, 2, 3];
let array2 = array1;
array2.push(4);
console.log(array1);
[1, 2, 3, 4] : Since an array is type of object, that means it is a reference type. So both array1 and array2 are pointing at the same location in memory. Meaning if you change array2 you also change array1!
What does the console.log statement print in the following code?
let num1 = 7;
let num2 = num1;
num1 += 10;
console.log(num2);
7 : Since a number is a primitive type that means it cannot be mutated. When we reassign num1 (num1 += 10) the value of num1 changes (it points now to a different location in memory) but num2 is left pointing at the original number (7)
A JavaScript boolean is a Primitive or Reference type?
Primitive type. Meaning, that it is immutable.
Destructuring
What is the printed value of the console.log(firstEl) in the code below:
let foods = ["apple", "potato"]
let [firstEl, secondEl] = foods;
console.log(firstEl);
"apple" : The above code assigns firstEl to the value in the first position in foods - which is "apple".
What is the printed value of console.log(fruit) in the code below?
let obj = { color: "Red", fruit: "tomato" };
let { fruit } = obj;
console.log(fruit);
"tomato" : We are able to destructure objects to select exactly the values we want by specifying the key we are interested in.
What is the value of console.log(apple) in the code below?
let obj = { color: "Red", fruit: "tomato" };
let { apple } = obj;
console.log(apple);
undefined: If the variable does does not match any of the keys contained within the object then no values will be destructured.
What is the value printed by console.log(rating) in the code below:
let object = { game: { name: "Boggle", rating: "10" } };
let {
game: { rating }
} = object;
console.log(rating); // => ???
10 : We can destructure nested objects to access keys by specifying which part of the object we want to deconstruct, then using a variable name for the specified key we want (in this case rating).
Looking at the snippet below, how would you destructure the mario object to access the value of Mario's sibling's fears(mario.siblings.fears)?
let mario = {
name: "mario",
profession: "plumber",
siblings: {
name: "Luigi",
fears: "ghosts"
}
};
let { siblings: { fears } } = mario; : In order to access nested keys we need to first specify the key of the object where our key is nested (sibling) from there we specify the key we are looking for fears. Finally, when destructuring we always must mention the object we are trying to extract values from on the right side of the expression(in this case mario).
What is the printed value of console.log(traits) below:
let obj = { name: "Crystal", traits: ["mammal", "dog"] };
let { traits, name } = obj;
console.log(traits); // => ???
["mammal", "dog"] : When destructing an object order doesn't matter. By using a variable with the same name as the traits key in obj we receive back the values located there.
JavaScript Variables
When declaring a variable without a keyword (var, let, const) which scope is it attached to?
global scope: Using a keyword when declaring a variable attaches that variable to either the function or block's scope. Without a keyword the variable will be declared on the global scope.
Will the code below throw an error?
console.log(parrot);
let parrot = "Hello!";
Yes! When using the let keyword the variable will be in the temporal dead zone. Meaning that variable is not accessible until it is initialized with a value (even if that value is undefined).
What will happen when the code below is executed?
let kitty = "Mittens";
kitty = "Apples";
ANSWER
QUESTION
The kitty variable will have the value of "Apples"
The let keyword allows you to declare a variable and will allow you to reassign that value.
What is the return value of the dogParty function below?
function dogParty() {
let dog = "Rupert";
if (true) {
let dog = "Fluffy";
}
return dog;
}
dogParty(); // ???
"Rupert" : Since let variables are block-scoped then the value of dog will not be overwritten within the block. Meaning that the dogParty function will return "Rupert".
What will happen when the code snippet below is evaluated?
const puppy = "Spot";
puppy = "Rover";
An error will be thrown : An error will be thrown because the const keyword does not allow that variable to be reassigned.
In the code snippet below what is the value of the puppy variable?
let puppy;
let newPuppy = "apples";
undefined : When you declare a variable with no value then the default value assigned to that variable is undefined.
Will the following code throw an error?
console.log(party);
var party = "Party!";
No! When using the var keyword the declared variable name is hoisted. Meaning that though the value for the party variable is not assigned yet - the name of the variable is hoisted up to the top of the file and assigned to the value of undefined.
Will the following code throw an error?
var zoo = "panda";
if (true) {
console.log(zoo);
let zoo = "lion";
}
Yes! The error thrown by a let variable in the temporal dead zone takes precedence over any scope chaining that would attempt to go to the outer scope to find a value for the zoo variable.
What is the return value of the dogParty function below?
function dogParty() {
if (true) {
let dog = "Rupert";
const dog = "Fluffy";
var dog = "Poodle";
}
return dog;
}
dogParty(); // ???
An error is thrown : You cannot redeclare the same variable name twice, this causes a SyntaxError, even if you are declaring it with another keyword.
What is the return value of the dogParty function below?
function dogParty() {
var dog = "Rupert";
if (true) {
var dog = "Fluffy";
}
return dog;
}
dogParty(); // ???
"Fluffy": Since var variables are function-scoped and can be re-assigned then the value of dog will be overwritten in the block within dogParty.
Arrow Functions
What is the value printed when we log the animalSound function below in Node?
const animalTime = {
name: "Patrick",
sayMoo: () => {
let str = this.name + " says Moo!";
return str;
},
sayBark: function() {
return () => {
let str = this.name + " says Bark!";
return str;
};
}
};
let animalSound = animalTime.sayMoo();
console.log(animalSound); // ???
"undefined says Moo!" : When defining the sayMoo method we did so with an arrow function. Meaning - that when JavaScript creates the animalTime object it does so on the global scope and since an arrow function always has the context of what created that function - the sayMoo's context is the global scope.
What is the value printed when we log the animalSound function below in Node?
const animalTime = {
name: "Patrick",
sayMoo: () => {
let str = this.name + " says Moo!";
return str;
},
sayBark: function() {
return () => {
let str = this.name + " says Bark!";
return str;
};
},
sayChirp: () => {
return function() {
let str = this.name + " says Chirp!";
return str;
};
}
};
// now let's use the chirp function
let animalSound = animalTime.sayChirp();
// notice this is invoked
console.log(animalSound()); // ???
"undefined says Chirp!" : When defining the sayChirp method we did so with an arrow function. This binds the context of the window to that entire function. So when the inside function expression is invoked it will still be run with the global object as it's context.
What is the value printed when we log the animalSound function below in Node?
const animalTime = {
name: "Patrick",
sayMeow: function() {
let str = this.name + " says Meow!";
return str;
}
};
let animalSound = animalTime.sayMeow();
console.log(animalSound); // ???
"Patrick says Meow!" :
What is the value printed when we log the animalSound function below in Node?
const animalTime = {
name: "Patrick",
sayMoo: () => {
let str = this.name + " says Moo!";
return str;
},
sayBark: function() {
return () => {
let str = this.name + " says Bark!";
return str;
};
}
};
let animalSound = animalTime.sayBark();
// notice this is invoked
console.log(animalSound()); // ???
"Patrick says Bark!" : In the above example we wrapped our sayBark method's arrow function within a function expression. Which means that when the sayBark function is invoked the function expression's context will be the animalTime object. Since an arrow function always has the context as the function that created it- the animalTime object will be the context for the inner arrow function of sayBark.
What is the value printed when we invoke the sayThis function below in Node?
const sayThis = () => {
if (true) {
console.log(this);
}
};
sayThis(); // => ???
the global object : When we declared the sayThis function the object that function was declared upon was the global object!
Which of the examples below would have the return value of undefined?
// 1.
let adder = (num1, num2) => {
let add = num1 + num2;
return add;
};
// 2.
let addFive = num => {
let add = num + 5;
return add;
};
// 3.
let addFive2 = num => num + 5;
// 4.
const addFive3 = num => {
const add = num + 5;
add;
};
4: Example 4 shows an arrow function with multiple statements - which means that an explicit return is necessary.
What is the value printed when we invoke the changePets function below?
const findPets = () => {
let pets = this.pets;
return pets;
};
let changePets = findPets.bind({ pets: ["cow", "dog", "iguana"] });
changePets(); // ????
undefined : When we declared the findPets function the object that function was declared upon was the global object. Fat arrow functions do not allow you to rebind them to another context.Since the global object does not have a this.pets key the changePets function will return undefined.
Context
What is the context of the goHunt function below?
let panther = {
pounce: function() {
console.log("woosh");
},
hunt: function() {
this.pounce();
}
};
let goHunt = panther.hunt;
goHunt(); // TypeError: this.pounce is not a function
The global object. : When we extract the goHunt method to a separate variable and then try to invoke it - the goHunt will have lost the context of the panther object. So the goHunt will instead be called upon the global object.
What is the value printed when we invoke the sayThis function below in Node?
function sayThis() {
if (true) {
console.log(this); // => ???
}
}
sayThis();
The global object : The global object is the context for every function call that does not have another defined context.
The value of this in a function is the function's ______.
- context
- this
- None of the above
- scope
- method
context
What is the returned context from the invocation of cat.whoIsThis below?
let cat = {
whoIsThis: function() {
return this;
}
};
console.log(cat.whoIsThis()); // ???
cat : The cat object is the context of the cat.whoIsThis method-style invocation.
A ____ is a function that is a value within an object and belongs to that object.
method: A method is a function that is a value within an object and belongs to an object.
What is the returned value from the invocation of cat.sayName?
let cat = {
name: "Jet",
sayName: function() {
return this.name;
}
};
console.log(cat.sayName()); // ???
Jet : The cat object is the context of the cat.sayName method-style invocation so the returned value will be cat.name- which is "Jet".
What is the context of invoking the boundHunt function below?
let panther = {
pounce: function() {
console.log("woosh");
},
hunt: function() {
this.pounce();
}
};
let boundHunt = panther.hunt.bind(panther);
panther: When we extract the goHunt method and bind it to the panther object then no matter where boundHunt is called it will have the bound context of the panther object.
Scope
What is the value logged inside the sayPuppy function?
let puppy = "Shasta";
function sayPuppy() {
console.log(puppy);
}
sayPuppy(); // ???
Shasta : We declared a variable with let in the global scope. The sayPuppy function will have access to any variables within it's local scope as well as any variables declared in outer scopes because of scope chaining!
In the code snippet below there are three scopes labeled with numbers. Below pick the correct answer for the name of each scope in order.
// 1. ???
let chicken = "bokbok";
function farmTime() {
// 2. ???
console.log(chicken);
if (true) {
// 3. ???
let cow = "moo";
}
}
1. Global Scope 2. Local/Function Scope 3. Block Scope
What is the value logged in the last line of the snippet below (console.log(puppy))?
function sayPuppy() {
const puppy = "Wolfie";
return puppy;
}
sayPuppy(); // "Wolfie"
console.log(puppy); // ????
An error is thrown : Scope chaining allows an inner scope to reference an outer scope's variables but it will not allow an outer scope to access inner scope's variables.
The value of the last line in the code snippet below is: ____
function catSound() {
var sound = "meow";
return sound;
}
function dogSound() {
var sound = "bark";
return sound;
}
let noise1 = catSound();
let noise2 = dogSound();
noise1 === noise2; // ???
false : Above we declared two different function-scoped variables using var in catSound and dogSound. Since the var declared variables will be function-scoped they will return different values from their separate functions.
What is the value of the final line of the snippet below (result1 === result2) ?
function inner() {
let str = "hello";
return str;
}
function outer() {
let test = inner();
return test;
}
let result1 = outer();
result2 = inner();
result1 === result2; // ???
true: No matter where inner is invoked it will always return the same result. This is because of lexical scoping.
The value returned by the letsJam function is _.
function letsJam() {
// function1's scope
let rand = 3;
if (true) {
const rand = 2;
}
if (true) {
let rand = 1;
}
if (true) {
const rand = "let's jam!";
}
return rand;
}
letsJam(); // ???
3 : The keywords let and const are block-scoped. Meaning that if a let or const are declared within a block {} that variable will stay within that block. In the above letsJam function the value returned will be the rand variable that was declared within the same outer scope - 3.