Objects and Functions

Question 1

What are the 3 things an Object can have attached to it?

Answer 1

Objects have properties and methods and properties can be either a primitive value or another object.

Question 2

What is a namespace?

Answer 2

A container for variables and functions. Typically to keep variables and functions with the same name separate. Javascript does not have namespaces due to the nature of objects.

Question 3

What is faking a namespace and what is it used for?

Answer 3

Other languages have namespaces, which basically define a space for sets of variables and functions. JS does not have this so we can fake a namespace by setting up an object to perform the same function as a namespace. This is done in both cases to prevent variables and functions with the same from overriding each other. See below.

Question 4

What will this code output and why?

Answer 4

Since dot operators are still operators they also must obey the rules of associativity, which is left-to-right.

So, first it would look for english.greetings and wouldn’t find anything. So, english.greetings is undefined and so it wouldn’t be able to find greet because it would be looking for undefined.greet then.

This is why these can’t be created on the fly. It must be set by declaring english.greetings = {}; or just by initializing english like this:

var english = { greetings: { greet: ‘Hello!’ } };

Question 5

How is JSON different than Object literal syntax?

Answer 5

JSON is technically a subset of the Object syntax, but has stricter rules. It is technically not a part of JS, but JS does come with some built-in functionality to work back and forth with it, like JSON.stringify or JSON.parse

In JSON all properties have to be wrapped in quotes, which is also valid for Object literal syntax in JS, but not required in JS. So, anything that is JSON valid is going to be valid in JS Object literal syntax, but not everything that is valid Object literal syntax is valid JSON.

JSON was created as a replacement for XML, which was the initial method for sending information across the internet.

Question 6

How do you convert a JS object to JSON?

Answer 6

JSON.stringify will convert a JS Object to a JSON string. In the image below, line 6 results in line 8.

Question 7

How do you convert a JSON object into a JS object?

Answer 7

JSON.parse will convert a JSON object into a JS object.

Question 8

What is a function?

Answer 8

A function is actually just an object, but it’s a special object. So, in addition to the properties and methods that a normal object can have, it also has name and code values attached to it. Importantly, the code value is invokable.

Question 9

What are first class functions?

Answer 9

First class functions can do everything you can do with other types (strings, objects, numbers, etc.) - assign them to variables, pass them around or create them on the fly. JS isn’t the only language that has first class functions, btw.

First class functions change the way you can program and open up completely different approaches.

Question 10

What’s the difference between a statement and an expression?

Answer 10

A statement just does work but an expression returns value.

An if statement, for example, does not return anything. The expression placed inside of it for evaluation does return a value, but the if statement just does work and doesn’t return anything.

You can’t set a statement as a variable like var a = if( b > c){…};

Question 11

What’s an anonymous function?

Answer 11

A function that doesn’t have a name. Example below:

function (){

console.log(‘hi’);

}

Question 12

What will this code output and why?

Answer 12

greet is a function(function statement) and so it is hoisted in its entirety and is available for invocation during the execution phase. But, anonymousGreet is set to a variable(function expression), which is only set to undefined in memory and so cannot be invoked during execution phase since we’re invoking it before we’ve defined the function below it in the code.

Question 13

What does this code return?

Answer 13

8

Question 14

What does this code return?

Answer 14

3

Question 15

What does this code return?

Answer 15

3

Question 16

What does this code return?

Answer 16

[Type Error: bar is not a function]

Question 17

How is a function statement different from a function expression?

Answer 17

The main difference between a function expression and a function statement is the function name, which can be omitted in function expressions to create anonymous functions. A function expression can be used as a IIFE (Immediately Invoked Function Expression) which runs as soon as it is defined.

Question 18

What will this code output and why?

Answer 18

This happens because primitive values are stored by variables by value. So, each time a reference is made to a value, it is a new reference or a copy. Changing the initial value will not affect other references because they are separate copies - it would be like making a copy of a document and then making edits to the first one: the second copy remains intact without the edits.

Question 19

How does a variable store primitive values(bool, number, string, etc) in memory?

Answer 19

Variables store primitive values by value, which means that each variable points to its own copy of the value. So, if a variable is set equal to another variable or passed to a function, it will then be pointing to a new copy of that primitive value. These copies are not linked to the original value, so if one changes it does not affect the other value.

Question 20

How do variables store objects(including functions) in memory?

Answer 20

All objects are stored by reference. This means that if one variable is set equal to another, they are both pointing to the same place in memory, the same exact object.

Question 21

Explain the difference between a value being stored by value or reference and which method is used by primitive values vs objects.

Answer 21

Primitive values store by value and objects(including functions) store by reference.

The difference between them is that variables assigned to objects always point to the same place in memory, regardless of how many variables are sharing an assignment to that object. It’s important to remember that

Whereas, variables assigned to a primitive value each point to their own separate place in memory, their own copy of that primitive value.

Question 22

What will this code output?

Answer 22

You see the same result for both logs because they’re both pointing to the same place in memory. The mutation on line 16 is changing the value which is pointed to by both variables - it wouldn’t matter if d was mutated instead of c.

Question 23

What will this code output and why?

Question 24

If var c is assigned to an object { greeting = ‘Hola’ } and var d is set equal to c. What will the result of this code be?

c = { greeting: ‘howdy’ };

console. log(c);
console. log(d);

Answer 24

The result would be two different logs. The reason for this is that even though initially both variables were pointing to the same object in memory by reference, the assignment operator recognized that { greeting: ‘Howdy’} did not exist in memory yet and so was assigning new memory space for this. It checks the value before creating the reference - if the value exists it will simply refer to the pre-existing value, if it doesn’t exist then it will set up the memory space for the new location for the new value.

Question 25

What part of the function object is its execution context concerned with?

Answer 25

The code - the code that is invoked. It's important to keep in mind that the function object and its execution context are two separate things. Its execution context is only created when its code, which is only one component of the object, is invoked.

Question 26

What will this code output?

Answer 26

The this keyword still points to the global object if you're simply invoking the function.

Question 27

What will this code output and why?

Answer 27

Even though the **setname** function expression sits inside of the **c** object, its **this** keyword actually belongs to the **Window** object. It would seem that it should point to **c** considering the **this** keyword of the **log** method, which **setname** is inside of, points to **c**. Many people consider this a bug of JS, but it just is the way JS works.

Question 28

What will be logged if **c.log()** is called using the following code?

Answer 28

Since we've set **self** to **this**, which is referring to the **c** object, the log should return the info related to the **c** object - including the mutated name variable. Setting a variable to **this** gets around the problem caused by the **this** keyword of nested methods referring to the global object. Since objects are stored by reference, we know that we can use the **self** variable and know that it's referring to **c**.

Question 29

What will this code output and why?

Answer 29

You can actually invoke functions stored in an array just by accessing them from the array and even pass them parameters.

Question 30

What are arguments?

Answer 30

Arguments are the parameters you pass to a function. During creation of the execution context, JS gives you a keyword of the same name which contains them all.

Question 31

What will this code output and why?

Answer 31

It will return **undefined** for all three logs. In other languages this might return an error, but in JS these variables are hoisted, given memory space and set to undefined, so we can access them even if no arguments are passed in.

Question 32

What data type is the arguments property of a function?

Answer 32

It is not an array; it is *array-like* as indicated by the italicized brackets in the console. It has most of the same methods as arrays and behaves like one, but it is not an array.

Question 33

What will this output and why?

Answer 33

It will return **undefined**. This happens because of automatic semicolon insertion. Because there is a carriage return after return, no semi-colon or other further characters, the JS engine automatically inserts a semicolon for us. This can be avoided by making sure you don't simply press return after a **return**, keep the object name or bracket on the same line as the **return** statement.

Question 34

What is an immediately invoked function expression(IIFE) and how do you write one?

Answer 34

It's just what it sounds like - a function expression that is immediately invoked after it's declared with a ();. There are two ways to write an IIFE, but #2 is far more common: 1. var name = function(){ ... }(); 2. (function(){ .... }());

Question 35

What are closures and how do they work?

Answer 35

Closures are a feature of the JS programming language that ensure any function contained in another function maintain connection, or scope, to its parents' variables even if its execution context is no longer active.

Question 36

What will this code output and why?

Answer 36

They all return 3. There's two important things to note. 1. Each function pushed to **arr** is the same. They're just objects and not being executed at this point - the value of **i** still hasn't been passed in. 2. The for loop finishes when **i** becomes 3 - that's why it doesn't run again. When fs[0], fs[1] and fs[2] are invoked each gets an execution context that looks for **i.** Because of closure, i=3 is still available to these functions because it was in its parents variable environment, which persists even after buildFunctions execution context is popped off.

Question 37

What would this code output and why?

Answer 37

It would return 0, 1, 2. Because we're using **let** , the increasing value of i is being saved to a new version of j each loop. **let** is scoped to the **for** block, rather than to the whole function object, so every time it's run it's pointing to a new value in memory.

Question 38

What will this code output and why? Note: fs2[2](); was cut off from bottom of screenshot

Answer 38

It will return 0, 1, 2 1. Each push is pushing in the *result* of executing **function(j)** - the *result* is the function containing the console log that hasn't run yet. 2. When **fs[0]** is then executed and it looks for **j**, it only needs to go out to the execution context of its parent, not all the way out the for loop. **j** has stored the value of **i** at the moment it was executed in the loop.

Question 39

Step through how the code below would be executed by the JS engine line by line via the execution stack to explain how closure allows these functions to execute successfully.

Answer 39

1. It starts with the **Global Execution Context**, which has the **greetEnglish** and **greetSpanish** expressions and their parent, the **makeGreeting** function. 2. Then it hits **greetEnglish** declaration, so it sets up an execution context for its value, **makeGreeting().** Now **greetEnglish** *is* that returned function and can be invoked as such. **makeGreeting** context is then popped off the stack, but the memory space for that **makeGreeting** execution context, including its **language** parameter, en, is still hanging around. 3. When it hits the **greetSpanish** declaration, it repeats the process of step 2 again. *However*, even though it's evaluating the same function, **makeGreeting**, for a second time, it's creating a totally new execution context and memory space. So, **greetEnglish** and **greetSpanish** store the same function, but create their own contexts and spaces. 4. Lastly, **greetEnglish** and **greetSpanish** are invoked and for each one an execution context is made. The JS engine knows in each case which of the two **makeGreeting** execution contexts it was created in. So, each then has access to their respective **language** parameter and can execute accordingly.

Question 40

What is a callback function?

Answer 40

A function you give to another function, to be run when the other function is finished. It's automatically invoked by the initial function when it's done running.

Question 41

What does **bind()** do?

Answer 41

The **bind()** method creates a new function that, when called, has its this keyword set to the provided value. Remember, functions are objects and bind is an available method of all function objects.

Question 42

What does this code output and why?

Answer 42

Because **logPersonName** has passed **person** into its **bind** method, it is now able to use **this** to access that **person** object *AND* the **arguments** passed to its own **logName** function.

Question 43

What does call() do?

Answer 43

**Call** invokes a function in the same way that () does, *however* the first parameter you pass into **call** becomes the **this** variable and you can even pass in further parameters(in a list, not an array). Unlike **bind**, which only makes a copy of the function, **call** actually executes the function.

Question 44

What does apply() do?

Answer 44

Apply does the exact same thing as **call()**, *however* **apply()** requires an array to be passed for parameters - **call()** requires a list*.* An array can often be more useful, particularly in mathematical situations.

Question 45

What does this code output and why?

Answer 45

It will return 8. This practice is called function currying. What's happening here is that **bind** creates a copy of the **multiply** function and then is passing 2 in as the permanent value for **a**. It's equivalent to declaring **a=2**; on line 44, inside **multiply**.

Question 46

What is function currying?

Answer 46

Creating a copy of a function, but with some preset parameters. This is very useful in mathematical situations.