Update formatting
This commit is contained in:
@ -17,7 +17,7 @@ lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
|
||||
### Creating promises
|
||||
|
||||
- The function passed to a `new Promise` will execute synchronously.
|
||||
- The function passed to the `Promise` constructor will execute synchronously.
|
||||
- Use `resolve()` or `reject()` to create promises from values.
|
||||
- `Promise.resolve(val)` will fulfill the promise with `val`.
|
||||
- `Promise.reject(err)` will reject the promise with `err`.
|
||||
|
||||
@ -32,19 +32,19 @@ In the example above, we use `NodeList.prototype.forEach()` to iterate over matc
|
||||
|
||||
### Arrow functions as callbacks
|
||||
|
||||
As we have already explained, arrow functions do not have their own bindings for `this`. So what happens if we convert the previous code snippet's callback to an arrow function? Its `this` context refers to the global one, which in this case is the `window` object.
|
||||
As we have already explained, arrow functions do not have their own bindings for `this`. So what happens if we convert the previous code snippet's callback to an arrow function? Its `this` context refers to the global one, which in this case is the `Window` object.
|
||||
|
||||
```js
|
||||
const toggleElements = document.querySelectorAll('.toggle');
|
||||
toggleElements.forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
this.classList.toggle('active'); // `this` refers to `window`
|
||||
this.classList.toggle('active'); // `this` refers to `Window`
|
||||
// Error: Cannot read property 'toggle' of undefined
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
This code will fire the event listener and execute the callback anytime the matching element is clicked. It will, however, throw an error, due to the `window` object not having a `classList` property. Oftentimes, the code could even fail silently. An example would be a condition that always evaluates to `false` for `window`, but could evaluate to `true` for a given element. Issues like that result in many headaches and wasted hours until you can uncover and fix them.
|
||||
This code will fire the event listener and execute the callback anytime the matching element is clicked. It will, however, throw an error, due to the `Window` object not having a `classList` property. Oftentimes, the code could even fail silently. An example would be a condition that always evaluates to `false` for `Window`, but could evaluate to `true` for a given element. Issues like that result in many headaches and wasted hours until you can uncover and fix them.
|
||||
|
||||
To deal with this, one could simply use the first argument of the callback function and `Event.target` or `Event.currentTarget` depending on their needs:
|
||||
|
||||
|
||||
@ -41,7 +41,7 @@ const nonEmptyValues = values.filter(Boolean);
|
||||
|
||||
### Handle Boolean objects with care
|
||||
|
||||
While the `Boolean()` function is pretty useful, you might run into some issues with the `Boolean` object and the `new Boolean()` constructor. The `Boolean` object is an object wrapper for a boolean value, but the tricky part is that, as an object, it's always truthy even if the contained value is `false`!
|
||||
While the `Boolean()` function is pretty useful, you might run into some issues with the `Boolean` object and the `Boolean` constructor. The `Boolean` object is an object wrapper for a boolean value, but the tricky part is that, as an object, it's always truthy even if the contained value is `false`!
|
||||
|
||||
```js
|
||||
let x = new Boolean(false);
|
||||
@ -51,4 +51,4 @@ if (x) {
|
||||
}
|
||||
```
|
||||
|
||||
For example, the above code will consider `x` truthy, even if it clearly contains `false` as its value. This might some confusing, but you can easily avoid it if you generally avoid using `Boolean` objects and the `new Boolean()` constructor, unless you are entirely certain that you need to use it for some reason. I cannot find any scenarios where I would need to use this, to be honest, so it might not be all that common to begin with.
|
||||
For example, the above code will consider `x` truthy, even if it clearly contains `false` as its value. This might some confusing, but you can easily avoid it if you generally avoid using `Boolean` objects and the `Boolean` constructor, unless you are entirely certain that you need to use it for some reason. I cannot find any scenarios where I would need to use this, to be honest, so it might not be all that common to begin with.
|
||||
|
||||
@ -43,7 +43,7 @@ ancestors.forEach(a => {
|
||||
});
|
||||
```
|
||||
|
||||
If we add an event listener to each element in the tree, as shown above, we would see a listener fired by the `button` first, then each one of the others firing from the nearest ancestor all the way up to `window`.
|
||||
If we add an event listener to each element in the tree, as shown above, we would see a listener fired by the `button` first, then each one of the others firing from the nearest ancestor all the way up to `Window`.
|
||||
|
||||
### Event capturing
|
||||
|
||||
@ -66,9 +66,9 @@ Given this code, we would see a listener fired for each ancestor of the `button`
|
||||
|
||||
Having explained event bubbling and capturing, we can now explain the three phases of event propagation:
|
||||
|
||||
- During the **capture phase**, the event starts from `window` and moves down to `document`, the root element and through ancestors of the target element.
|
||||
- During the **capture phase**, the event starts from `Window` and moves down to `Document`, the root element and through ancestors of the target element.
|
||||
- During the **target phase**, the event gets triggered on the event target (e.g. the `button` the user clicked).
|
||||
- During the **bubble phase**, the event bubbles up through ancestors of the target element until the root element, `document` and, finally, `window`.
|
||||
- During the **bubble phase**, the event bubbles up through ancestors of the target element until the root element, `Document` and, finally, `Window`.
|
||||
|
||||
### Event delegation
|
||||
|
||||
@ -80,7 +80,7 @@ window.addEventListener('click', e => {
|
||||
});
|
||||
```
|
||||
|
||||
In the above example, we delegate event handling from the `button` to `window` and use `event.target` to get the original event's target.
|
||||
In the above example, we delegate event handling from the `button` to `Window` and use `Event.target` to get the original event's target.
|
||||
|
||||
Using the event delegation pattern is advantageous for two reasons:
|
||||
|
||||
|
||||
@ -36,7 +36,7 @@ Note that the above example is the basis for the [uniqueElements snippet](/js/s/
|
||||
|
||||
### NodeList
|
||||
|
||||
A [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) is a collection of nodes, returned by methods such as `document.childNodes()` or `document.querySelectorAll()`. While it implements some methods that help manipulate it as an array (e.g. `NodeList.prototype.forEach()`), it's oftentimes desirable to convert it to an array. When the spread operator is applied to it, the result is an array of the contained nodes:
|
||||
A [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) is a collection of nodes, returned by methods such as `Document.childNodes()` or `Document.querySelectorAll()`. While it implements some methods that help manipulate it as an array (e.g. `NodeList.prototype.forEach()`), it's oftentimes desirable to convert it to an array. When the spread operator is applied to it, the result is an array of the contained nodes:
|
||||
|
||||
```js
|
||||
const nodes = document.childNodes;
|
||||
|
||||
@ -30,7 +30,7 @@ The arguments for both methods are the same, allowing you to pass a customized s
|
||||
|
||||
### Using the Location API
|
||||
|
||||
The older [Location API](https://developer.mozilla.org/en-US/docs/Web/API/Location) is not the best tool for the job. It reloads the page, but still allows you to modify the current URL and might be useful when working with legacy browsers. You can modify the URL, using either `window.location.href`, `location.assign()` or `location.replace()`:
|
||||
The older [Location API](https://developer.mozilla.org/en-US/docs/Web/API/Location) is not the best tool for the job. It reloads the page, but still allows you to modify the current URL and might be useful when working with legacy browsers. You can modify the URL, using either `Window.location.href`, `location.assign()` or `location.replace()`:
|
||||
|
||||
```js
|
||||
// Current URL: https://my-website.com/page_a
|
||||
|
||||
Reference in New Issue
Block a user