Javascript Flashcards
(10 cards)
Explain event delegation
Explanation: Setting an event listener on a parent element and having events that happen on a child element bubble up to the parent.
Use: When you want some code to run when the user interacts with any one of a large number of child elements.
Example:
<div>
<div></div>
</div>
<script>
container.addEventListener('click', (event) => (event.target.style.backgroundColor = bgChange()));
</script>
Source: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation
Explain how this works in JavaScript
Explanation: this references an object. When inside of a constructor function or class it will reference the object on instantiation.
Use: It is used to assign properties and values to an object on instantiation.
Example:
class MyThing {
constructor(passThisIn) {
this.passThisIn = passThisIn;
}
}
Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
Explain how prototypal inheritance works
Explanation: All JavaScript objects have a __proto__ property that is a reference to another object, which is called the object’s “prototype”. If a property is accessed on an object, but not found, the JavaScript engine check’s that object prototype. If again it’s not found, it checks that prototype’s prototype on up the chain until it reaches the top of the chain.
Use: It can help reduce redundant code.
Example:
function Parent() {
this.name = ‘Parent’;
}
Parent.prototype.greet = function () {
console.log(‘Hello from ‘ + Parent.name);
};
const child = Object.create(Parent.prototype);
child.cry = function () {
console.log(‘waaaaaahhhh!’);
};
child.cry();
// waaaaaahhhh!
child.greet();
// hello from Parent
console.log(child.constructor);
// ƒ Parent() {
// this.name = ‘Parent’;
// }
console.log(child.constructor.name);
// ‘Parent’
Source: https://www.frontendinterviewhandbook.com/javascript-questions
What do you think of AMD vs CommonJS?
Explanation: I would actually prefer to use ESM (ECMAScript Modules) due to it’s simple syntax and async nature. Historically CommonJS was used in the back end and runs synchronous and AMD was used in the front end and runs asynchronous.
Use: CJS has been used in node.js for a while, but the current version of node now allows the use of EMS.
Source: https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm
Explain why the following doesn’t work as an IIFE: function foo(){ }();. What needs to be changed to properly make it an IIFE?
Explanation: The parser reads it as two seperate statements. First the function declaration function foo(){ } and then a blank function call attempt (); The best way to fix this would be to add another set of parenthesis wrapping the function declaration (function foo(){ })() This changes it from a function declaration to a function expression.
Source: https://www.frontendinterviewhandbook.com/javascript-questions
What’s the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?
Explanation:
null: the value is intentionally absent (points to nothing in memory).
undefined: not yet assigned a value or not yet declared.
undeclared: improperly declared without let/const/var
Use: null can be used to assign the primitive value of null to a variable. undeclared throws an error where as null and undefined can be checked with a conditional
Example: null and undefined can be checked using strict equality ===. Undeclared will throw it’s own error so you could use try…catch
Source: https://www.30secondsofcode.org/articles/s/javascript-undeclared-undefined-null
What is a closure, and how/why would you use one?
Explanation: Closure allows you to use an outer function’s scope (go into a parent, grandparent function, etc.) from within an inner function. In JavaScript a closure is created every time a function is created.
Use: It allows you to combine data with the function that will operate on that data. It is similar to OOP.
Example:
function init() {
var name = ‘Mozilla’; // name is a local variable created by init
function displayName() {
// displayName() is the inner function, a closure
alert(name); // use variable declared in the parent function
}
displayName();
}
init();
Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
Can you describe the main difference between a .forEach() loop and a .map() loop and why you would pick one versus the other?
Explanation: .forEach() executes a callback function on each element, but does not return a value. .map() executes a callback function on each element and “maps” the result to a new array. The new array is returned.
Use: If you need the result and don’t want to mutate the original array, use map. If you only need to iterate over the array then forEach can be used.
Example: .forEach():
const a = [1, 2, 3];
const doubled = a.forEach((num, index) => {
// Do something with num and/or index.
});
// doubled = undefined
.map():
const a = [1, 2, 3];
const doubled = a.map((num) => {
return num * 2;
});
// doubled = [2, 4, 6]
Source: https://www.frontendinterviewhandbook.com/javascript-questions/
What’s a typical use case for anonymous functions?
Explanation: I’ve typically encountered them as callback functions that don’t need to be used anywhere else.
Use: Essentially when you don’t need a named function and the function is bound to some other action.
Example:
setTimeout(function () {
console.log(‘Hello world!’);
}, 1000);
Source: https://www.frontendinterviewhandbook.com/javascript-questions/
How do you organize your code? (module pattern, classical inheritance?)
Explanation: My preference is to use ES6 Modules to organize my code for the following reasons:
Easier to reuse code
You can keep different parts of your code cleanly separated, which makes writing and maintaining your code much easier and less error-prone.
Source: https://www.theodinproject.com/lessons/node-path-javascript-es6-modules
