28. What's the output?

String.prototype.giveLydiaPizza = () => {
return 'Just give Lydia pizza already!'; };
const name = 'Lydia'; console.log(name.giveLydiaPizza())

A: "Just give Lydia pizza already!"
B: TypeError: not a function
C: SyntaxError
D: undefined

Answer: A
String is a built-in constructor, which we can add properties to. I just added a method to its prototype. Primitive strings are automatically converted into a string object, generated by the string prototype function. So, all strings (string objects) have access to that method!

https://thedailyfrontend.com/useful-chrome-extensions-for-frontend/
Useful Chrome Extensions for Frontend

Answer: B
Object keys are automatically converted into strings. We are trying to set an object as a key to object a, with the value of 123.
However, when we stringify an object, it becomes "[object Object]". So what we are saying here, is that a["[object Object]"] = 123. Then, we can try to do the same again. c is another object that we are implicitly stringifying. So then, a["[object Object]"] = 456.
Then, we log a[b], which is actually a["[object Object]"]. We just set that to 456, so it returns 456.

30. What's the output?

const foo = () => console.log('First');
const bar = () => setTimeout(() => console.log('Second')); const baz = () => console.log('Third');
bar();
foo();
baz();

A: First Second Third
B: First Third Second
C: Second First Third
D: Second Third First

Answer: B
We have a setTimeout function and invoked it first. Yet, it was logged last.
This is because in browsers, we don't just have the runtime engine, we also have something called a WebAPI. The WebAPI gives us the setTimeout function to start with, and for example the DOM.
After the callback is pushed to the WebAPI, the setTimeout function itself (but not the callback!) is popped off the stack.

Now, foo gets invoked, and "First" is being logged.

foo is popped off the stack, and baz gets invoked. "Third" gets logged.

The WebAPI can't just add stuff to the stack whenever it's ready. Instead, it pushes the callback function to something called the queue.

This is where an event loop starts to work. An event loop looks at the stack and task queue. If the stack is empty, it takes the first thing on the queue and pushes it onto the stack.

bar gets invoked, "Second" gets logged, and it's popped off the stack.

32. When you click the paragraph, what's the logged output?
<div onclick="console.log('div')"> <p onclick="console.log('p')"> Click here! </p> </div>

A: p div
B: div p
C: p
D: div

Answer: A
If we click p, we see two logs: p and div. During event propagation, there are 3 phases: capturing, target, and bubbling. By default, event handlers are executed in the bubbling phase (unless you set useCapture to true). It goes from the deepest nested element outwards.

33. What's the output?
const person = { name: 'Lydia' };

function sayHi(age) {
return ${this.name} is ${age};
} console.log(sayHi.call(person, 21)); console.log(sayHi.bind(person, 21));

A: undefined is 21 Lydia is 21
B: function function
C: Lydia is 21 Lydia is 21
D: Lydia is 21 function

Answer: D
With both, we can pass the object to which we want the this keyword to refer to. However, .call is also executed immediately!
.bind. returns a copy of the function, but with a bound context! It is not executed immediately.

Answer: B
The sayHi function returns the returned value of the immediately invoked function expression (IIFE). This function returned 0, which is type "number".
FYI: typeof can return the following list of values: undefined, boolean, number, bigint, string, symbol, function and object. Note that typeof null returns "object".