Front-end Basics Flashcards
Describe event bubbling.
- Event that happens in the inner most element would cause a chain reaction moving upward.
- Events above the target element would also fire.
- The target would stay the same but
thiswill change to reflect the firing element.
Difference between document load event and document DOMContentLoaded event?
- The DOMContentLoaded event will fire as soon as the DOM hierarchy has been fully constructed, the load event will do it when all the images and sub-frames have finished loading.
Explain “hoisting”
- Variables are defined at the top of the function.
- In JavaScript, a variable can be declared after it has been used.
- In other words; a variable can be used before it has been declared.
-
varis hoisted.constandletare not.
Explain event delegation.
- Using event propagation (bubbling) to handle events at a higher level in the DOM.
- Adding a single event handler to the parent to avoid adding event handlers to every children.
Explain Function.prototype.bind
-
theFunction.bind(valueForThis)(arg1, arg2, ...)(does not invoke function. params passed outside) - Returns function with the modified
this
Explain how ‘this’ works in JavaScript
- This refers to an object and it is usually used inside a function or a method.
- example: instead of saying Person.firstName, you can say this.firstName.
- Use bind, apply or call to fix ‘this’ when it is out of context.
Explain why the following doesn’t work as an IIFE: function foo(){ }();
Surround it with parenthesis. (foo(){})()
make this work ```javascript add(2, 5); // 7 add(2)(5); // 7
~~~
```javascript
let add = function(x, …xArgs) {
let total = x;
if (xArgs.length > 0) {
xArgs.forEach((el) => {
total += el;
});
return total;
} else {
return function(y) {
return total += y;
};
}
};
~~~
Make this work: duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
```javascript
let duplicate = function(arr) {
return arr.concat(arr);
}
~~~
What are IIFEs?
- Immediately Invoked Function Expressions.
- An IIFE is an anonymous function that is created and then immediately invoked. It’s not called from anywhere else (hence why it’s anonymous), but runs just after being created.
What is "use strict"? what are the advantages and disadvantages to using it?
- Used to restrict functions or program.
- This strict context prevents certain actions from being taken and throws more exceptions.
- It catches some common coding bloopers, throwing exceptions.
- It prevents, or throws errors, when relatively “unsafe” actions are taken (such as gaining access to the global object).
- It disables features that are confusing or poorly thought out.
What is a module in JS?
- A cluster of code. It is highly self-contained.
- They are easy to maintain because they are (ideally) not dependent with the other code.
- They are also used to help with name spacing. Another perk is that they can be reused.
- Modules are comparable to Classes in other languages.
What is Ajax?
- Asynchronous Javascript and XML.
- Technique used to create better faster and more interactive web applications.
- Uses XHTML for content, CSS for presentation, DOM and JS for dynamic content display
- Used to make requests to server and updates the screen. User would not know anything was transmitted.
- Asynchronous. User can continue to use application during ongoing request.
- Data driven instead of page driven.
- Clicking not required, mouse movement is sufficient to trigger event.
What is closure?
- A closure is an inner function that has access to the outer function’s variables.
- It is great for making private variables!
- Has access to variables in its own scope, to outer function’s variables and global variables.
- They still have access to the outer function’s variables even if the outer function returns.
- They store references to the outer function’s variables, not the actual value.
What is document.write
- The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
