From 910840121530c52782134e0ab0aef31b87b76386 Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 15:58:46 +0500 Subject: [PATCH 01/18] fix: b0708add-b4ed-4cea-b227-7bf283781d8d --- questions/describe-event-bubbling/en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/describe-event-bubbling/en-US.mdx b/questions/describe-event-bubbling/en-US.mdx index 71d1d0f..3ca9bb1 100644 --- a/questions/describe-event-bubbling/en-US.mdx +++ b/questions/describe-event-bubbling/en-US.mdx @@ -85,7 +85,7 @@ child.click(); ## Event delegation -Event bubbling is the basis for a technique called [event delegation](/questions/quiz/describe-event-delegation), where you attach a single event handler to a common ancestor of multiple elements and use event delegation to handle events for those elements efficiently. This is particularly useful when you have a large number of similar elements, like a list of items, and you want to avoid attaching individual event handlers to each item. +Event bubbling is the basis for a technique called [event delegation](/questions/quiz/explain-event-delegation), where you attach a single event handler to a common ancestor of multiple elements and use event delegation to handle events for those elements efficiently. This is particularly useful when you have a large number of similar elements, like a list of items, and you want to avoid attaching individual event handlers to each item. ```js parent.addEventListener('click', (event) => { From b216377f8773684f3e8a5bc4571a2e6aaa4d4653 Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 16:04:38 +0500 Subject: [PATCH 02/18] fix: b3062444-6a76-4b73-9111-c13b24183d5b --- .../en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx index 68b2e8e..312db6f 100644 --- a/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx +++ b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx @@ -224,7 +224,7 @@ xhr.upload.onprogress = (event) => { The callback assigned to `onprogress` is passed a [`ProgressEvent`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event): - The `loaded` field on the `ProgressEvent` is a 64-bit integer indicating the amount of work already performed (bytes uploaded/downloaded) by the underlying process. -- The `total` field on the `ProgressEvent` is a 64-bit integer representing the total amount of work that the underlying process is in the progress of performing. When downloading resources, this is the `Content-Length` value of the HTTP request. +- The `total` field on the `ProgressEvent` is a 64-bit integer representing the total amount of work that the underlying process is in the progress of performing. When downloading resources, this is the `Content-Length` value of the HTTP response. On the other hand, the `fetch()` API does not offer any convenient way to track upload progress. It can be implemented by monitoring the `body` of the `Response` object as a fraction of the `Content-Length` header, but it's quite complicated. From 14c22aff2c122d655d698d3230345848529f026e Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 16:15:10 +0500 Subject: [PATCH 03/18] fix: 61313df4-daa5-422b-9cbd-4a5984eb371a --- .../en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx index 296499e..2263a67 100644 --- a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx +++ b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx @@ -96,4 +96,4 @@ fetchData((error, data) => { - [MDN Web Docs: Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) - [JavaScript.info: Callbacks](https://javascript.info/callbacks) -- [Node.js: Asynchronous programming and callbacks](https://nodejs.org/en/knowledge/getting-started/control-flow/what-are-callbacks/) +- [Node.js: Asynchronous programming and callbacks](https://nodejs.org/en/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks) From b7cc66319a7ac538df3f41041371fa33668e06f0 Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 16:17:31 +0500 Subject: [PATCH 04/18] fix: ecb0dc9a-2310-465f-83d5-e1b910265288 --- .../what-is-the-definition-of-a-higher-order-function/en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx b/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx index 7c6dcdd..bc1fe05 100644 --- a/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx +++ b/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx @@ -58,7 +58,7 @@ function greetName(greeter, name) { greetName(greet, 'Alice'); // Output: Hello, Alice! ``` -In this example, the `greetName` function takes another function `greet` as an argument and executes it with the name `Alice`. The `greet` function is a higher-order function because it is passed as an argument to another function. +In this example, the `greetName` function is higher-order function because it takes another function (`greet`) as an argument and uses it to generate a greeting for the given name. ### Functions as return values From 8ddb1b9ec7c47350c111b291371034f24d0c2742 Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 17:41:45 +0500 Subject: [PATCH 05/18] fix: 10daa64e-865f-439e-9abc-ed763a5f441c --- questions/explain-event-delegation/en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/explain-event-delegation/en-US.mdx b/questions/explain-event-delegation/en-US.mdx index 0a0e0fb..29666bb 100644 --- a/questions/explain-event-delegation/en-US.mdx +++ b/questions/explain-event-delegation/en-US.mdx @@ -108,7 +108,7 @@ userForm.addEventListener('input', (event) => { }); ``` -In this example, a single input event listener is attached to the form element. It can respond to input changes for all child input elements, simplifying the code by an event listeners per `` element. +In this example, a single input event listener is attached to the form element. It can respond to input changes for all child input elements, simplifying the code by eliminating the need for individual listeners on each `` element. ## Pitfalls From 7044448982ca89fc31b6e379d157b7bb09ddacb7 Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 17:56:21 +0500 Subject: [PATCH 06/18] fix: 77101029-fc69-4424-8d11-3bcfe04bfd17 --- questions/explain-hoisting/en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/explain-hoisting/en-US.mdx b/questions/explain-hoisting/en-US.mdx index 6a317c6..2f1cef3 100644 --- a/questions/explain-hoisting/en-US.mdx +++ b/questions/explain-hoisting/en-US.mdx @@ -140,4 +140,4 @@ ESLint is a static code analyzer that can find violations of such cases with the ## Further reading - [Hoisting | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) -- [JavaScript Visualized: Hoisting](https://dev.to/lydiahallie/javascript-visualized-hoisting-478h) +- [What is Hoisting in JavaScript?](https://www.freecodecamp.org/news/what-is-hoisting-in-javascript) From 8b84b793885d4abb077ceca47a9ba37ff8b1d800 Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 18:50:19 +0500 Subject: [PATCH 07/18] fix: 390c802e-59cb-4417-9e30-650315b7c6dd --- .../en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx index f7c7338..2986dd6 100644 --- a/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx +++ b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx @@ -153,7 +153,7 @@ In situations where the user has navigated away from the page, aborting the requ ## Notes - `AbortController`s is not `fetch()`-specific, it can be used to abort other asynchronous tasks as well. -- A singular `AbortContoller` instance can be reused or multiple async tasks and cancel all of them at once. +- A singular `AbortContoller` instance can be reused on multiple async tasks and cancel all of them at once. - Calling `abort()` on `AbortController`s does not send any notification or signal to the server. The server is unaware of the cancelation and will continue processing the request until it completes or times out. ## Further reading From a5e53df1d87b4b843f43de764426eae0caa2e2b1 Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 19:06:29 +0500 Subject: [PATCH 08/18] fix: effcb062-b73a-4665-ac58-5aac843f8d02 --- .../en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.mdx b/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.mdx index a9666f6..6330ac7 100644 --- a/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.mdx +++ b/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.mdx @@ -115,4 +115,4 @@ In this example, the form will not submit if the `username` input is empty, and - [MDN Web Docs: Constraint Validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation) - [MDN Web Docs: HTMLFormElement.checkValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/checkValidity) -- [MDN Web Docs: HTMLFormElement.setCustomValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/setCustomValidity) +- [MDN Web Docs: HTMLObjectElement.setCustomValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity) From 10f1489fe098a8ee973d5a8c8163eea36b8f56a2 Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 19:08:55 +0500 Subject: [PATCH 09/18] fix: 755eb11a-29df-459e-aede-dfc0c8997818 --- .../en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx index 835bb5e..ff36c9a 100644 --- a/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx +++ b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx @@ -179,7 +179,7 @@ In JavaScript, several built-in objects implement the iterator protocol, meaning Generators are a special kind of function that can pause and resume their execution, allowing them to generate a sequence of values on-the-fly. They are commonly used to create iterators but have other applications as well. The key use cases of generators include: -- Creating iterators is a more concise and readable way compared to manually implementing the iterator protocol. +- Creating iterators in a more concise and readable way compared to manually implementing the iterator protocol. - Implementing lazy evaluation, where values are generated only when needed, saving memory and computation time. - Simplifying asynchronous programming by allowing code to be written in a synchronous-looking style using `yield` and `await`. From 7976232cd578503becefc57b14133bcff3bcd890 Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 19:22:55 +0500 Subject: [PATCH 10/18] fix: e616aa89-c238-4363-b925-45d34d495bb7 --- questions/whats-the-difference-between-call-and-apply/en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/whats-the-difference-between-call-and-apply/en-US.mdx b/questions/whats-the-difference-between-call-and-apply/en-US.mdx index 8b08c46..196d704 100644 --- a/questions/whats-the-difference-between-call-and-apply/en-US.mdx +++ b/questions/whats-the-difference-between-call-and-apply/en-US.mdx @@ -80,7 +80,7 @@ const person1 = { name: 'John' }; const person2 = { name: 'Alice' }; greet.call(person1); // Hello, my name is John -greet.call(person2); // Hello, my name is Alice +greet.apply(person2); // Hello, my name is Alice ``` ### Alternative syntax to call methods on objects From 467d1eaca05c3be7216a9b5ccab4edd87089a1de Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 19:26:51 +0500 Subject: [PATCH 11/18] fix: ffe8780a-cbb4-4c97-97f6-794f43ceb907 --- .../en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx index d3837ba..fa13442 100644 --- a/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx +++ b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx @@ -34,7 +34,7 @@ console.log(typeof y === 'undefined'); // true ## `undefined` -A variable that is `undefined` is a variable that has been declared, but not assigned a value. It is of type `undefined`. If a function does not return any value as the result of executing it is assigned to a variable, the variable also has the value of `undefined`. To check for it, compare using the strict equality (`===`) operator or `typeof` which will give the `'undefined'` string. Note that you should not be using the loose equality operator (`==`) to check, as it will also return `true` if the value is `null`. +A variable that is `undefined` is a variable that has been declared, but not assigned a value. It is of type `undefined`. If a function does not return a value, and its result is assigned to a variable, that variable will also have the value `undefined`. To check for it, compare using the strict equality (`===`) operator or `typeof` which will give the `'undefined'` string. Note that you should not be using the loose equality operator (`==`) to check, as it will also return `true` if the value is `null`. ```js live let foo; From 581af3c5b8ac551d052cb57aaa7c7adcc6344bcf Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 20:06:16 +0500 Subject: [PATCH 12/18] fix: 1a14d60c-d53a-4588-95ce-65ef1c0e2aa0 --- .../en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx b/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx index cab8bdc..acb8dfd 100644 --- a/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx +++ b/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx @@ -8,7 +8,7 @@ The main difference lies in the bubbling behavior of `mouseenter` and `mouseover `mouseenter` events do not bubble. The `mouseenter` event is triggered only when the mouse pointer enters the element itself, not its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseenter` event will not be triggered on the parent element again, it's only triggered once upon entry of parent element without regard for its contents. If both parent and child have `mouseenter` listeners attached and the mouse pointer moves from the parent element to the child element, `mouseenter` will only fire for the child. -`mouseover` events bubble up the DOM tree. The `mouseover` event is triggered when the mouse pointer enters the element or one of its descendants. If have a parent element has child elements, and the mouse pointer enters child elements, the `mouseover` event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, `mouseover` will fire for both the parent and the child. +`mouseover` events bubble up the DOM tree. The `mouseover` event is triggered when the mouse pointer enters the element or one of its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseover` event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, `mouseover` will fire for both the parent and the child. | Property | `mouseenter` | `mouseover` | | --- | --- | --- | From 0881cff2b342128944fcd9103454f989fffd0eb4 Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 20:08:21 +0500 Subject: [PATCH 13/18] fix: 07d71841-497d-494e-9bd5-2b5041aa4819 --- .../en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx b/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx index 098fc79..5942d15 100644 --- a/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx +++ b/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx @@ -77,7 +77,7 @@ There's one final value-comparison operation within JavaScript, that is the [`Ob ## Conclusion -- Use `==` when you want to compare values with type coercion (and understand the implications of it). Practically, the only valid use case for the equality operator is when against `null` and `undefined` for convenience. +- Use `==` when you want to compare values with type coercion (and understand the implications of it). In practice, the only reasonable use case for the equality operator is to check for both `null` and `undefined` in a single comparison for convenience. - Use `===` when you want to ensure both the value and the type are the same, which is the safer and more predictable choice in most cases. ### Notes From 0bd0ec8a20f292b0c1f8a4815662f5dee4b930b0 Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 20:37:46 +0500 Subject: [PATCH 14/18] fix: 258cdb42-187a-4a0a-b2af-ee94814b3b49 --- .../en-US.mdx | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.mdx b/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.mdx index fa9eb21..98ba78b 100644 --- a/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.mdx +++ b/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.mdx @@ -38,16 +38,22 @@ Layout thrashing occurs when you read and write to the DOM repeatedly, causing m ```js // Inefficient -for (let i = 0; i < 1000; i++) { - const height = element.clientHeight; - element.style.height = `${height + 10}px`; -} +boxes.forEach((box) => { + const height = box.offsetHeight; // Read + box.style.height = `${height + 10}px`; // Write +}); // Efficient -const height = element.clientHeight; -for (let i = 0; i < 1000; i++) { - element.style.height = `${height + 10}px`; -} +// Batch read +const heights = []; +boxes.forEach((box) => { + heights.push(box.offsetHeight); +}); + +// Batch write +boxes.forEach((box, i) => { + box.style.height = `${heights[i] + 10}px`; +}); ``` ## Excessive use of global variables From 90377c6d40ecc2848b25187fa41012f7a58104f4 Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 20:41:19 +0500 Subject: [PATCH 15/18] fix: 722750bd-440f-4e86-b068-c9b249a63f13 --- .../en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx index 15a2a50..22dd383 100644 --- a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx +++ b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx @@ -115,7 +115,7 @@ function getData3() { Promise.all([getData1(), getData2(), getData3()]) .then((results) => { - console.log(results); // Output: [[{ id: 1, title: 'Data 1' }, { id: 2, title: 'Data 2' }, { id: 3, title: 'Data 3' }] + console.log(results); // Output: [{ id: 1, title: 'Data 1' }, { id: 2, title: 'Data 2' }, { id: 3, title: 'Data 3' }] }) .catch((error) => { console.error('Error:', error); From 10e272803b649e60f3ccdddae2ddc4bbcfa6228b Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 20:56:19 +0500 Subject: [PATCH 16/18] fix: 2a06eb38-6478-4d72-9181-97c2bf64f971 --- .../en-US.mdx | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx index 22dd383..5d2514e 100644 --- a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx +++ b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx @@ -122,6 +122,42 @@ Promise.all([getData1(), getData2(), getData3()]) }); ``` +### Easier error handling with `.catch()` and guaranteed cleanup with `.finally()` + +Promises make error handling more straightforward by allowing you to catch errors at the end of a chain using `.catch()`, instead of manually checking for errors in every callback. This leads to cleaner and more maintainable code. + +Additionally, `.finally()` lets you run code after the Promise settles, whether it was successful or failed, which is great for cleanup tasks like hiding spinners or resetting UI states. + +```js live +function getFirstData() { + return new Promise((resolve) => { + setTimeout(() => { + resolve({ id: 1, title: 'First Data' }); + }, 1000); + }); +} + +function getSecondData(data) { + return new Promise((resolve) => { + setTimeout(() => { + resolve({ id: data.id, title: data.title + ' -> Second Data' }); + }, 1000); + }); +} + +getFirstData() + .then(getSecondData) + .then((data) => { + console.log('Success:', data); + }) + .catch((error) => { + console.error('Error:', error); + }) + .finally(() => { + console.log('This runs no matter what'); + }); +``` + ### With promises, these scenarios which are present in callbacks-only coding, will not happen: - Call the callback too early From fade56d777c5829f487117d151775c45176f946f Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Fri, 18 Apr 2025 21:43:05 +0500 Subject: [PATCH 17/18] fix: 4b303be9-ab82-4678-a37c-032d3ee14807 --- .../en-US.mdx | 37 +++++++++++-------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx b/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx index 730eda1..d9c271f 100644 --- a/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx +++ b/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx @@ -58,28 +58,33 @@ fetchData(); // Error fetching data: .... If you have multiple asynchronous operations, you can nest `try...catch` blocks to handle errors at different levels. ```js live -async function fetchData() { - try { - // Invalid URl - const response = await fetch('https://api.example.com/data'); - const data = await response.json(); - console.log(data); - } catch (error) { - console.error('Error fetching data:', error); - } +async function fetchUser() { + // Simulate a successful async operation + return { id: 1, name: 'Alice' }; } -async function processData() { +async function fetchUserPosts() { + // Simulate a failed async operation + throw new Error('Failed to fetch posts'); +} + +async function loadUserData() { try { - await fetchData(); - // Additional processing - console.log(arr); // Trying to reference an undefined variable will throw an error - } catch (error) { - console.error('Error processing data:', error); + const user = await fetchUser(); + console.log('User:', user); + + try { + const posts = await fetchUserPosts(); + console.log('Posts:', posts); + } catch (postsError) { + console.error('Error fetching posts:', postsError.message); + } + } catch (userError) { + console.error('Error fetching user:', userError.message); } } -processData(); +loadUserData(); ``` ## Using `.catch()` with Promises From 6f5babbcc0db0bcc55ee99b656e7d4c1edfa760a Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Fri, 18 Apr 2025 16:53:46 +0000 Subject: [PATCH 18/18] [auto] regenerate table of contents --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 24de009..c2b9155 100644 --- a/README.md +++ b/README.md @@ -1064,7 +1064,7 @@ The main difference lies in the bubbling behavior of `mouseenter` and `mouseover `mouseenter` events do not bubble. The `mouseenter` event is triggered only when the mouse pointer enters the element itself, not its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseenter` event will not be triggered on the parent element again, it's only triggered once upon entry of parent element without regard for its contents. If both parent and child have `mouseenter` listeners attached and the mouse pointer moves from the parent element to the child element, `mouseenter` will only fire for the child. -`mouseover` events bubble up the DOM tree. The `mouseover` event is triggered when the mouse pointer enters the element or one of its descendants. If have a parent element has child elements, and the mouse pointer enters child elements, the `mouseover` event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, `mouseover` will fire for both the parent and the child. +`mouseover` events bubble up the DOM tree. The `mouseover` event is triggered when the mouse pointer enters the element or one of its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseover` event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, `mouseover` will fire for both the parent and the child. | Property | `mouseenter` | `mouseover` | | --- | --- | --- | @@ -4921,7 +4921,7 @@ The main difference lies in the bubbling behavior of `mouseenter` and `mouseover `mouseenter` events do not bubble. The `mouseenter` event is triggered only when the mouse pointer enters the element itself, not its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseenter` event will not be triggered on the parent element again, it's only triggered once upon entry of parent element without regard for its contents. If both parent and child have `mouseenter` listeners attached and the mouse pointer moves from the parent element to the child element, `mouseenter` will only fire for the child. -`mouseover` events bubble up the DOM tree. The `mouseover` event is triggered when the mouse pointer enters the element or one of its descendants. If have a parent element has child elements, and the mouse pointer enters child elements, the `mouseover` event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, `mouseover` will fire for both the parent and the child. +`mouseover` events bubble up the DOM tree. The `mouseover` event is triggered when the mouse pointer enters the element or one of its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseover` event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, `mouseover` will fire for both the parent and the child. | Property | `mouseenter` | `mouseover` | | --- | --- | --- |