31-40

Q. 31. What is the event.target when clicking the button?

<div onclick="console.log('first div')">
  <div onclick="console.log('second div')">
    <button onclick="console.log('button')">Click!</button>
  </div>
</div>

💡 Answer

Answer: C

The deepest nested element that caused the event is the target of the event. You can stop bubbling by event.stopPropagation

Q. 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>

💡 Answer

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.

Q. 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))

💡 Answer

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.

Q. 34. What's the output?

function sayHi() {
  return (() => 0)()
}
 
console.log(typeof sayHi())

💡 Answer

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: there are only 7 built-in types: null, undefined, boolean, number, string, object, and symbol. "function" is not a type, since functions are objects, it's of type "object".

Q. 35. Which of these values are falsy?

0
new Number(0)
;('')
;(' ')
new Boolean(false)
undefined

💡 Answer

Answer: A

There are 8 falsy values:

undefined
null
NaN
false
'' (empty string)
0
-0
0n (BigInt(0))

Function constructors, like new Number and new Boolean are truthy.

Q. 36. What's the output?

console.log(typeof typeof 1)

💡 Answer

Answer: B

typeof 1 returns "number".

typeof "number" returns "string"

Q. 37. What's the output?

const numbers = [1, 2, 3]
numbers[10] = 11
console.log(numbers)

💡 Answer

Answer: C

When you set a value to an element in an array that exceeds the length of the array, JavaScript creates something called "empty slots". These actually have the value of undefined, but you will see something like:

[1, 2, 3, empty x 7, 11]

depending on where you run it (it's different for every browser, node, etc.)

Q. 38. What's the output?

;(() => {
  let x, y
  try {
    throw new Error()
  } catch (x) {
    ;(x = 1), (y = 2)
    console.log(x)
  }
  console.log(x)
  console.log(y)
})()

💡 Answer

Answer: A

The catch block receives the argument x. This is not the same x as the variable when we pass arguments. This variable x is block-scoped.

Later, we set this block-scoped variable equal to 1, and set the value of the variable y. Now, we log the block-scoped variable x, which is equal to 1.

Outside of the catch block, x is still undefined, and y is 2. When we want to console.log(x) outside of the catch block, it returns undefined, and y returns 2.

Q. 39. Everything in JavaScript is either a...

💡 Answer

Answer: A

JavaScript only has primitive types and objects.

Primitive types are boolean, null, undefined, bigint, number, string, and symbol.

What differentiates a primitive from an object is that primitives do not have any properties or methods; however, you'll note that 'foo'.toUpperCase() evaluates to 'FOO' and does not result in a TypeError. This is because when you try to access a property or method on a primitive like a string, JavaScript will implicitly wrap the primitive type using one of the wrapper classes, i.e. String, and then immediately discard the wrapper after the expression evaluates. All primitives except for null and undefined exhibit this behaviour.

Q. 40. What's the output?

const arr = [
  [0, 1],
  [2, 3],
]
 
arr.reduce(
  (acc, cur) => {
    return acc.concat(cur)
  },
  [1, 2]
)

💡 Answer

Answer: C

[1, 2] is our initial value. This is the value we start with, and the value of the very first acc. During the first round, acc is [1,2], and cur is [0, 1]. We concatenate them, which results in [1, 2, 0, 1].

Then, [1, 2, 0, 1] is acc and [2, 3] is cur. We concatenate them, and get [1, 2, 0, 1, 2, 3]

Last updated on October 8, 2022