JS questions

Question 1

Explain event delegation

Answer 1

a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM

Question 2

what are the benefits of event delegation?

Answer 2

• memory footprint is smaller because only one single handler is needed
• There is no need to unbind the handler from elements that are removed and to bind the event for new elements.

Question 3

Explain how this works in JavaScript

Answer 3

the value of this depends on how the function is called

1) If the new keyword is used when calling the function, this inside the function is a brand new object.
2) If apply, call, or bind are used to call/create a function, this inside the function is the object that is passed in as the argument.
3) If a function is called as a method, such as obj.method() — this is the object that the function is a property of.
4) If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, this is the global object. In a browser, it is the window object. If in strict mode (‘use strict’), this will be undefined instead of the global object.
5) If multiple of the above rules apply, the rule that is higher wins and will set the this value.
6) If the function is an ES2015 arrow function, it ignores all the rules above and receives the this value of its surrounding scope at the time it is created.

Question 4

what is this when using arrow functions?

Answer 4

the this value of its surrounding scope at the time it is created.

Question 5

Explain how prototypal inheritance works

Answer 5

When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object’s __proto__, and the __proto__’s __proto__ and so on, until it finds the property defined on one of the __proto__s or until it reaches the end of the prototype chain

Question 6

What’s the difference between .call and .apply?

Answer 6

Both .call and .apply are used to invoke functions and the first parameter will be used as the value of this within the function.

.call takes in comma-separated arguments as the next arguments

.apply takes in an array of arguments as the next argument.