From ff000c87ed8f750197a90bf12d6cd480781291c4 Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Tue, 26 Sep 2023 00:32:14 +0600 Subject: [PATCH] wip: add more questions --- .../javascript/content/async-vs-sync.md | 27 +++++++++ .../content/error-in-async-await.md | 24 ++++++++ .../javascript/content/error-in-promise.md | 38 +++++++++++++ .../content/finally-block-in-promise.md | 14 +++++ .../question-groups/javascript/javascript.md | 57 ++++++++++++------- 5 files changed, 140 insertions(+), 20 deletions(-) create mode 100644 src/data/question-groups/javascript/content/async-vs-sync.md create mode 100644 src/data/question-groups/javascript/content/error-in-async-await.md create mode 100644 src/data/question-groups/javascript/content/error-in-promise.md create mode 100644 src/data/question-groups/javascript/content/finally-block-in-promise.md diff --git a/src/data/question-groups/javascript/content/async-vs-sync.md b/src/data/question-groups/javascript/content/async-vs-sync.md new file mode 100644 index 000000000..fe2998127 --- /dev/null +++ b/src/data/question-groups/javascript/content/async-vs-sync.md @@ -0,0 +1,27 @@ +The difference between Asynchronous and Synchronous code is that Asynchronous code does not block the execution of the program while Synchronous code does. + +## Asynchronous code + +Asynchronous code is executed in the background and it does not block the execution of the program. It is usually used to perform tasks that take a long time to complete, such as network requests. + +```js +console.log('Before'); + +setTimeout(() => { + console.log('Hello'); +}, 1000); + +console.log('After'); +``` + +## Synchronous code + +Synchronous code is executed in sequence and it blocks the execution of the program until it is completed. If a task takes a long time to complete, everything else waits. + +```js +console.log('Before'); + +for (let i = 0; i < 1000000000; i++) {} + +console.log('After'); +``` diff --git a/src/data/question-groups/javascript/content/error-in-async-await.md b/src/data/question-groups/javascript/content/error-in-async-await.md new file mode 100644 index 000000000..8e6757fbf --- /dev/null +++ b/src/data/question-groups/javascript/content/error-in-async-await.md @@ -0,0 +1,24 @@ +In order to handle errors in async/await, we can use the `try/catch` statement. + +## Rejecting a promise + +```js +const promise = new Promise((resolve, reject) => { + reject(new Error('Something went wrong')); +}); +``` + +## Try/catch statement + +```js +async function main() { + try { + const result = await promise; + console.log(result); + } catch (error) { + console.log(error.message); + } +} +``` + +The `catch` block will be executed when the promise is `rejected` or when an error is thrown inside the `try` block. diff --git a/src/data/question-groups/javascript/content/error-in-promise.md b/src/data/question-groups/javascript/content/error-in-promise.md new file mode 100644 index 000000000..0f899cba9 --- /dev/null +++ b/src/data/question-groups/javascript/content/error-in-promise.md @@ -0,0 +1,38 @@ +In order to handle errors in promises, we can use the `catch` method or the second argument of the `then` method. + +## Rejecting a promise + +```js +const promise = new Promise((resolve, reject) => { + reject(new Error('Something went wrong')); +}); +``` + +## Catch method + +In this method, we can pass a `callback` function that will be called when the promise is `rejected`. + +```js +promise + .then((result) => { + console.log(result); + }) + .catch((error) => { + console.log(error.message); + }); +``` + +## Second argument of the then method + +In this method, we can pass two `callback` functions as arguments. The first one will be called when the promise is `resolved` and the second one will be called when the promise is `rejected`. + +```js +promise.then( + (result) => { + console.log(result); + }, + (error) => { + console.log(error.message); + } +); +``` diff --git a/src/data/question-groups/javascript/content/finally-block-in-promise.md b/src/data/question-groups/javascript/content/finally-block-in-promise.md new file mode 100644 index 000000000..5a1b00f1b --- /dev/null +++ b/src/data/question-groups/javascript/content/finally-block-in-promise.md @@ -0,0 +1,14 @@ +The `finally` block will be executed when the promise is `resolved` or `rejected`. + +```js +promise + .then((result) => { + console.log(result); + }) + .catch((error) => { + console.log(error.message); + }) + .finally(() => { + console.log('Finally Promise has settled'); + }); +``` diff --git a/src/data/question-groups/javascript/javascript.md b/src/data/question-groups/javascript/javascript.md index a36b5f0f1..84143544e 100644 --- a/src/data/question-groups/javascript/javascript.md +++ b/src/data/question-groups/javascript/javascript.md @@ -56,8 +56,7 @@ questions: - question: How to implement your own Custom Event in JavaScript? answer: custom-event.md topics: - - 'Core' - - 'DOM' + - 'Event' - 'Advanced' - question: What is a closure in JavaScript? answer: closure.md @@ -67,7 +66,7 @@ questions: - question: Does Arrow functions have their own `this`? answer: No, arrow functions do not have their own `this`. Instead, they inherit the `this` of the enclosing lexical scope. topics: - - 'Core' + - 'Function' - 'Intermediate' - question: Does `map()` method mutate the original array? answer: map-method.md @@ -107,7 +106,7 @@ questions: - question: What is IIFE in JavaScript? answer: iife.md topics: - - 'Core' + - 'Function' - 'Advanced' - question: What is Inheritance in JavaScript? answer: inheritance.md @@ -117,12 +116,12 @@ questions: - question: What is Map in JavaScript? answer: map.md topics: - - 'Core' + - 'Date Type' - 'Beginner' - question: What is Set in JavaScript? answer: set.md topics: - - 'Core' + - 'Data Type' - 'Beginner' - question: How you can find unique values in an array? answer: find-unique-array-values.md @@ -132,12 +131,12 @@ questions: - question: What is a JavaScript promise? answer: A Promise in JavaScript represents a value that may not be available yet but will be at some point. Promises provide a way to handle asynchronous operations, offering methods like `.then()` and `.catch()` to register callbacks for success and failure. topics: - - 'Core' + - 'Promise' - 'Advanced' - question: What is the purpose of the `async/await` in JavaScript? answer: The `async/await`, introduced in ES2017, provides a more readable and cleaner way to handle asynchronous operations compared to callbacks and promises. An `async` function always returns a promise, and within such a function, you can use `await` to pause execution until a promise settles. topics: - - 'Core' + - 'Promise' - 'Advanced' - question: What is callback hell in JavaScript? answer: callback-hell.md @@ -152,18 +151,17 @@ questions: - question: Explain `alert()`, `prompt()`, and `confirm()` methods in JavaScript? answer: alert-prompt-confirm.md topics: - - 'Core' + - 'Event' - 'Intermediate' - question: How to handle event bubbling in JavaScript? answer: event-bubbling.md topics: - - 'Core' + - 'Event' - 'Beginner' - question: What is Event Capturing in JavaScript? answer: Event capturing is the first phase of event propagation. In this phase, the event is captured by the outermost element and propagated to the inner elements. It is also known as trickling. It is the opposite of event bubbling. topics: - - 'Core' - - 'DOM' + - 'Event' - 'Beginner' - question: What is the spread operator in JavaScript? answer: spread-operator.md @@ -178,8 +176,7 @@ questions: - question: What is `preventDefault()` method in JavaScript? answer: prevent-default.md topics: - - 'Core' - - 'DOM' + - 'Event' - 'Intermediate' - question: What is Hoisting in JavaScript? answer: hoisting.md @@ -194,12 +191,12 @@ questions: - question: Difference between `Promise.all()` and `Promise.allSettled()`? answer: promise-all-vs-all-settled.md topics: - - 'Core' + - 'Promise' - 'Advanced' - question: What is the difference between `Map` and `WeakMap` in JavaScript? answer: The `Map` object holds key-value pairs and remembers the original insertion order of the keys. Whereas, the `WeakMap` object is a collection of key/value pairs in which the keys are weakly referenced. You can use any data type as a key or value in a `Map` whereas in `WeakMap` you can only use objects as keys. The `WeakMap` is not iterable whereas `Map` is. In `WeakMap` it holds the weak reference to the original object which means if there are no other references to an object stored in the `WeakMap`, those objects can be garbage collected. topics: - - 'Core' + - 'Data Type' - 'Advanced' - question: Garbage collection in JavaScript? answer: The JavaScript engine uses automatic garbage collection. JavaScript automatically manages memory by freeing up space used by objects no longer needed. This algorithm is called Mark and Sweep, which is performed periodically by the JavaScript engine. @@ -214,12 +211,12 @@ questions: - question: What is Type Casting? answer: Type conversion (or typecasting) means transfer of data from one data type to another. Implicit conversion happens when the compiler (for compiled languages) or runtime (for script languages like `JavaScript`) automatically converts data types. topics: - - 'Core' + - 'Data Type' - 'Intermediate' - question: What are Explicit binding in JavaScript? answer: explicit-binding.md topics: - - 'Core' + - 'Function' - 'Advanced' - question: How to run a piece of code after a specific time interval? answer: set-interval.md @@ -249,7 +246,7 @@ questions: - question: How to accept variable number of arguments in a JavaScript function? answer: variable-number-of-arguments.md topics: - - 'Core' + - 'Function' - 'Intermediate' - question: How to define multiline strings in JavaScript? answer: In order to define multiline strings in JavaScript, you need to use template literals. Template literals are enclosed by the backtick (```` ` ` ````) character instead of double or single quotes. Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (``` `${expression}` ```). @@ -259,7 +256,7 @@ questions: - question: Uses of `break` and `continue` statements in JavaScript? answer: break-and-continue.md topics: - - 'Core' + - 'Loop' - 'Beginner' - question: How to parse JSON in JavaScript? answer: parse-json.md @@ -268,6 +265,26 @@ questions: - 'Beginner' - question: How to debug JavaScript code? answer: debug-javascript.md + topics: + - 'Debug' + - 'Beginner' + - question: How to handle error in Promise? + answer: error-in-promise.md + topics: + - 'Promise' + - 'Advanced' + - question: How to handle error in async/await? + answer: error-in-async-await.md + topics: + - 'Promise' + - 'Advanced' + - question: How to use `finally` block in Promise? + answer: finally-block-in-promise.md + topics: + - 'Promise' + - 'Advanced' + - question: Asynchronous vs Synchronous code? + answer: async-vs-sync.md topics: - 'Core' - 'Beginner'