diff --git a/questions/describe-event-bubbling/en-US.mdx b/questions/describe-event-bubbling/en-US.mdx
index 7370070..71d1d0f 100644
--- a/questions/describe-event-bubbling/en-US.mdx
+++ b/questions/describe-event-bubbling/en-US.mdx
@@ -22,11 +22,17 @@ During the bubbling phase, the event starts at the target element and bubbles up
Here's an example using modern ES6 syntax to demonstrate event bubbling:
-```js
+```js live
// HTML:
//
//
//
+const parentDiv = document.createElement('div');
+parentDiv.id = 'parent';
+const button = document.createElement('button');
+button.id = 'child';
+parentDiv.appendChild(button);
+document.body.appendChild(parentDiv);
const parent = document.getElementById('parent');
const child = document.getElementById('child');
@@ -38,6 +44,9 @@ parent.addEventListener('click', () => {
child.addEventListener('click', () => {
console.log('Child element clicked');
});
+
+// Simulate clicking the button:
+child.click();
```
When you click the "Click me!" button, both the child and parent event handlers will be triggered due to the event bubbling.
@@ -46,11 +55,32 @@ When you click the "Click me!" button, both the child and parent event handlers
Event bubbling can be stopped during the bubbling phase using the `stopPropagation()` method. If an event handler calls `stopPropagation()`, it prevents the event from further bubbling up the DOM tree, ensuring that only the handlers of the elements up to that point in the hierarchy are executed.
-```js
+```js live
+// HTML:
+//
+//
+//
+const parentDiv = document.createElement('div');
+parentDiv.id = 'parent';
+const button = document.createElement('button');
+button.id = 'child';
+parentDiv.appendChild(button);
+document.body.appendChild(parentDiv);
+
+const parent = document.getElementById('parent');
+const child = document.getElementById('child');
+
+parent.addEventListener('click', () => {
+ console.log('Parent element clicked');
+});
+
child.addEventListener('click', (event) => {
console.log('Child element clicked');
- event.stopPropagation();
+ event.stopPropagation(); // Stops propagation to parent
});
+
+// Simulate clicking the button:
+child.click();
```
## Event delegation
diff --git a/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx b/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx
index a77c7bd..54dbd83 100644
--- a/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx
+++ b/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx
@@ -100,7 +100,7 @@ The CookieStore API is relatively new and may not be supported in all browsers (
- **Access**: Data is accessible within all tabs and windows of the same origin.
- **Security**: All JavaScript on the page have access to values within `localStorage`.
-```js live
+```js
// Set a value in localStorage.
localStorage.setItem('key', 'value');
@@ -123,7 +123,7 @@ localStorage.clear();
- **Access**: Data is only accessible within the current tab or window. Different tabs or windows with the same page will have different `sessionStorage` objects.
- **Security**: All JavaScript on the same page have access to values within `sessionStorage` for that page.
-```js live
+```js
// Set a value in sessionStorage.
sessionStorage.setItem('key', 'value');
diff --git a/questions/explain-how-this-works-in-javascript/en-US.mdx b/questions/explain-how-this-works-in-javascript/en-US.mdx
index 85afbee..4773e5c 100644
--- a/questions/explain-how-this-works-in-javascript/en-US.mdx
+++ b/questions/explain-how-this-works-in-javascript/en-US.mdx
@@ -48,7 +48,7 @@ showThis(); // In non-strict mode: Window (global object). In strict mode: undef
When a function is called as a method of an object, `this` refers to the object that the method is called on.
-```js
+```js live
const obj = {
name: 'John',
showThis: function () {
@@ -77,7 +77,7 @@ showThisStandalone(); // In non-strict mode: Window (global object). In strict m
When a function is used as a constructor (called with the `new` keyword), `this` refers to the newly-created instance. In the following example, `this` refers to the `Person` object being created, and the `name` property is set on that object.
-```js
+```js live
function Person(name) {
this.name = name;
}
@@ -90,7 +90,7 @@ console.log(person.name); // "John"
In ES2015 classes, `this` behaves as it does in object methods. It refers to the instance of the class.
-```js
+```js live
class Person {
constructor(name) {
this.name = name;
@@ -114,7 +114,7 @@ You can use `bind()`, `call()`, or `apply()` to explicitly set the value of `thi
Using the `call()` and `apply()` methods allow you to explicitly set the value of `this` when calling the function.
-```js
+```js live
function showThis() {
console.log(this);
}
@@ -126,7 +126,7 @@ showThis.apply(obj); // { name: 'John' }
The `bind()` method creates a new function with `this` bound to the specified value.
-```js
+```js live
function showThis() {
console.log(this);
}
@@ -142,11 +142,11 @@ Arrow functions do not have their own `this` context. Instead, the `this` is lex
In this example, `this` refers to the global object (window or global), because the arrow function is not bound to the `person` object.
-```js
+```js live
const person = {
- name: 'John',
+ firstName: 'John',
sayHello: () => {
- console.log(`Hello, my name is ${this.name}!`);
+ console.log(`Hello, my name is ${this.firstName}!`);
},
};
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 947cb7e..296499e 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
@@ -6,7 +6,7 @@ title: Explain the concept of a callback function in asynchronous operations
A callback function is a function passed as an argument to another function, which is then invoked inside the outer function to complete some kind of routine or action. In asynchronous operations, callbacks are used to handle tasks that take time to complete, such as network requests or file I/O, without blocking the execution of the rest of the code. For example:
-```js
+```js live
function fetchData(callback) {
setTimeout(() => {
const data = { name: 'John', age: 30 };
@@ -50,7 +50,7 @@ greet('Alice', sayGoodbye);
### Example of an asynchronous callback
-```js
+```js live
function fetchData(callback) {
setTimeout(() => {
const data = { name: 'John', age: 30 };
diff --git a/questions/explain-the-concept-of-debouncing-and-throttling/en-US.mdx b/questions/explain-the-concept-of-debouncing-and-throttling/en-US.mdx
index 1aecfa4..c1cbbe4 100644
--- a/questions/explain-the-concept-of-debouncing-and-throttling/en-US.mdx
+++ b/questions/explain-the-concept-of-debouncing-and-throttling/en-US.mdx
@@ -8,7 +8,7 @@ Debouncing and throttling are techniques used to control the rate at which a fun
Debouncing delays the execution of a function until a certain amount of time has passed since it was last called. This is useful for scenarios like search input fields where you want to wait until the user has stopped typing before making an API call.
-```js
+```js live
function debounce(func, delay) {
let timeoutId;
return function (...args) {
@@ -16,11 +16,14 @@ function debounce(func, delay) {
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
+
+const debouncedHello = debounce(() => console.log('Hello world!'), 2000);
+debouncedHello(); // Prints 'Hello world!' after 2 seconds
```
Throttling ensures that a function is called at most once in a specified time interval. This is useful for scenarios like window resizing or scrolling where you want to limit the number of times a function is called.
-```js
+```js live
function throttle(func, limit) {
let inThrottle;
return function (...args) {
@@ -31,6 +34,17 @@ function throttle(func, limit) {
}
};
}
+
+const handleResize = throttle(() => {
+ // Update element positions
+ console.log('Window resized at', new Date().toLocaleTimeString());
+}, 2000);
+
+// Simulate rapid calls to handleResize every 100ms
+let intervalId = setInterval(() => {
+ handleResize();
+}, 100);
+// 'Window resized' is outputted only every 2 seconds due to throttling
```
---
@@ -77,7 +91,7 @@ Imagine you have a function that updates the position of elements on the screen
#### Code example
-```js
+```js live
function throttle(func, limit) {
let inThrottle;
return function (...args) {
diff --git a/questions/explain-the-concept-of-error-propagation-in-javascript/en-US.mdx b/questions/explain-the-concept-of-error-propagation-in-javascript/en-US.mdx
index c9e9a15..41484b1 100644
--- a/questions/explain-the-concept-of-error-propagation-in-javascript/en-US.mdx
+++ b/questions/explain-the-concept-of-error-propagation-in-javascript/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of error propagation in JavaScript
Error propagation in JavaScript refers to how errors are passed through the call stack. When an error occurs in a function, it can be caught and handled using `try...catch` blocks. If not caught, the error propagates up the call stack until it is either caught or causes the program to terminate. For example:
-```js
+```js live
function a() {
throw new Error('An error occurred');
}
@@ -36,7 +36,7 @@ When an error occurs in a function, it can either be caught and handled within t
To handle errors and prevent them from propagating further, you can use `try...catch` blocks. Here is an example:
-```js
+```js live
function a() {
throw new Error('An error occurred');
}
@@ -58,7 +58,7 @@ In this example, the error thrown in function `a` propagates to function `b`, an
Error propagation works differently with asynchronous code, such as promises and `async/await`. For promises, you can use `.catch()` to handle errors:
-```js
+```js live
function a() {
return Promise.reject(new Error('An error occurred'));
}
@@ -74,7 +74,7 @@ b().catch((e) => {
For `async/await`, you can use `try...catch` blocks:
-```js
+```js live
async function a() {
throw new Error('An error occurred');
}
diff --git a/questions/explain-the-concept-of-partial-application/en-US.mdx b/questions/explain-the-concept-of-partial-application/en-US.mdx
index 9397f77..f1b0aee 100644
--- a/questions/explain-the-concept-of-partial-application/en-US.mdx
+++ b/questions/explain-the-concept-of-partial-application/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of partial application
Partial application is a technique in functional programming where a function is applied to some of its arguments, producing a new function that takes the remaining arguments. This allows you to create more specific functions from general ones. For example, if you have a function `add(a, b)`, you can partially apply it to create a new function `add5` that always adds 5 to its argument.
-```js
+```js live
function add(a, b) {
return a + b;
}
diff --git a/questions/explain-the-concept-of-tagged-templates/en-US.mdx b/questions/explain-the-concept-of-tagged-templates/en-US.mdx
index ecada6d..7714275 100644
--- a/questions/explain-the-concept-of-tagged-templates/en-US.mdx
+++ b/questions/explain-the-concept-of-tagged-templates/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of tagged templates
Tagged templates in JavaScript allow you to parse template literals with a function. The function receives the literal strings and the values as arguments, enabling custom processing of the template. For example:
-```js
+```js live
function tag(strings, ...values) {
return strings[0] + values[0] + strings[1] + values[1] + strings[2];
}
@@ -44,7 +44,7 @@ When a tagged template is invoked, the tag function receives:
For example:
-```js
+```js live
function tag(strings, ...values) {
console.log(strings); // ["Hello ", "! How are ", "?"]
console.log(values); // ["world", "you"]
@@ -65,7 +65,7 @@ Tagged templates can be used for various purposes, such as:
Here is a simple example of a tagged template that escapes HTML:
-```js
+```js live
function escapeHTML(strings, ...values) {
return strings.reduce((result, string, i) => {
const value = values[i - 1];
diff --git a/questions/explain-the-concept-of-the-strategy-pattern/en-US.mdx b/questions/explain-the-concept-of-the-strategy-pattern/en-US.mdx
index 33f8325..0b0f3cf 100644
--- a/questions/explain-the-concept-of-the-strategy-pattern/en-US.mdx
+++ b/questions/explain-the-concept-of-the-strategy-pattern/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of the Strategy pattern
The Strategy pattern is a behavioral design pattern that allows you to define a family of algorithms, encapsulate each one as a separate class, and make them interchangeable. This pattern lets the algorithm vary independently from the clients that use it. For example, if you have different sorting algorithms, you can define each one as a strategy and switch between them without changing the client code.
-```js
+```js live
class Context {
constructor(strategy) {
this.strategy = strategy;
@@ -20,18 +20,20 @@ class Context {
class ConcreteStrategyA {
doAlgorithm(data) {
// Implementation of algorithm A
+ return 'Algorithm A was run on ' + data;
}
}
class ConcreteStrategyB {
doAlgorithm(data) {
// Implementation of algorithm B
+ return 'Algorithm B was run on ' + data;
}
}
// Usage
const context = new Context(new ConcreteStrategyA());
-context.executeStrategy(data);
+context.executeStrategy('someData'); // Output: Algorithm A was run on someData
```
---
@@ -52,7 +54,7 @@ The Strategy pattern is a behavioral design pattern that enables selecting an al
Consider a scenario where you have different sorting algorithms and you want to switch between them without changing the client code.
-```js
+```js live
// Strategy interface
class Strategy {
doAlgorithm(data) {
@@ -92,10 +94,10 @@ class Context {
// Usage
const data = [3, 1, 4, 1, 5, 9];
const context = new Context(new ConcreteStrategyA());
-console.log(context.executeStrategy(data)); // Output: [1, 1, 3, 4, 5, 9]
+console.log(context.executeStrategy([...data])); // Output: [1, 1, 3, 4, 5, 9]
context.setStrategy(new ConcreteStrategyB());
-console.log(context.executeStrategy(data)); // Output: [9, 5, 4, 3, 1, 1]
+console.log(context.executeStrategy([...data])); // Output: [9, 5, 4, 3, 1, 1]
```
### Benefits
diff --git a/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx b/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx
index b79a4a5..bd0cdfb 100644
--- a/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx
+++ b/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx
@@ -14,15 +14,11 @@ function sum(a, b) {
const result = sum(2, 3); // The program waits for sum() to complete before assigning the result
console.log('Result: ', result); // Output: 5
-
-// Console output:
-// Inside sum function
-// Result: 5
```
Asynchronous functions usually accept a callback as a parameter and execution continue on to the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).
-```js
+```js live
function fetchData(callback) {
setTimeout(() => {
const data = { name: 'John', age: 30 };
@@ -31,16 +27,12 @@ function fetchData(callback) {
}
console.log('Fetching data...');
+
fetchData((data) => {
console.log(data); // Output: { name: 'John', age: 30 } (after 2 seconds)
});
-console.log('Call made to fetch data'); // Output: This will be printed first
-
-// Console output:
-// Fetching data...
-// Call made to fetch data
-// { name: 'John', age: 30 }
+console.log('Call made to fetch data'); // This will print before the data is fetched
```
---
@@ -89,10 +81,10 @@ Asynchronous functions do not block the execution of the program. They allow oth
1. **Network requests**: Making network requests, such as fetching data from an API or sending data to a server, is typically done asynchronously. This allows the application to remain responsive while waiting for the response, preventing the user interface from freezing
- ```js
+ ```js live
console.log('Start of the program'); // This will be printed first as program starts here
- fetch('https://api.example.com/data')
+ fetch('https://jsonplaceholder.typicode.com/todos/1')
.then((response) => response.json())
.then((data) => {
console.log(data);
@@ -102,7 +94,7 @@ Asynchronous functions do not block the execution of the program. They allow oth
})
.catch((error) => console.error(error));
- console.log('End of program'); // This will be printed next before the fetch callback
+ console.log('End of program'); // This will be printed before the fetch callback
```
2. **User input and events**: Handling user input events, such as clicks, key presses, or mouse movements, is inherently asynchronous. The application needs to respond to these events without blocking the main thread, ensuring a smooth user experience.
@@ -117,12 +109,14 @@ Asynchronous functions do not block the execution of the program. They allow oth
3. **Timers and Animations**: Timers (`setTimeout()`, `setInterval()`) and animations (e.g., `requestAnimationFrame()`) are asynchronous operations that allow the application to schedule tasks or update animations without blocking the main thread.
- ```js
+ ```js live
setTimeout(() => {
console.log('This message is delayed by 2 seconds');
}, 2000);
- const animationId = requestAnimationFrame(updateAnimation);
+ setInterval(() => {
+ console.log('Current time:', new Date().toLocaleString());
+ }, 2000); // Interval runs every 2 seconds
```
By using asynchronous functions and operations, JavaScript can handle time-consuming tasks without freezing the user interface or blocking the main thread.
diff --git a/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.mdx b/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.mdx
index ab66e21..e9f8bc0 100644
--- a/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.mdx
+++ b/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.mdx
@@ -30,7 +30,7 @@ showThis(); // In non-strict mode: window, in strict mode: undefined
When a function is called as a method of an object, `this` refers to the object.
-```js
+```js live
const obj = {
name: 'Alice',
greet: function () {
@@ -47,7 +47,7 @@ Using `call`, `apply`, or `bind` methods, you can explicitly set `this`.
### Using `call`
-```js
+```js live
function greet() {
console.log(this.name);
}
@@ -59,7 +59,7 @@ greet.call(person); // 'Bob'
### Using `apply`
-```js
+```js live
function greet(greeting) {
console.log(greeting + ', ' + this.name);
}
@@ -71,7 +71,7 @@ greet.apply(person, ['Hello']); // 'Hello, Charlie'
### Using `bind`
-```js
+```js live
function greet() {
console.log(this.name);
}
@@ -86,7 +86,7 @@ boundGreet(); // 'Dave'
When a function is used as a constructor with the `new` keyword, `this` refers to the newly created object.
-```js
+```js live
function Person(name) {
this.name = name;
}
@@ -99,11 +99,11 @@ console.log(person.name); // 'Eve'
Arrow functions do not have their own `this` and inherit `this` from the surrounding lexical context.
-```js
+```js live
const obj = {
- name: 'Frank',
+ firstName: 'Frank',
greet: () => {
- console.log(this.name);
+ console.log(this.firstName);
},
};
diff --git a/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.mdx b/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.mdx
index 2dc5ce0..c1c9214 100644
--- a/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.mdx
+++ b/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.mdx
@@ -29,7 +29,7 @@ elementToModify.innerHTML = 'New Content';
To add an HTML element, you can use the `document.createElement` method to create a new element and then append it to a parent element using `appendChild`.
-```js
+```js live
// Create a new div element
const newDiv = document.createElement('div');
@@ -38,6 +38,9 @@ newDiv.textContent = 'Hello, World!';
// Append the new element to the body
document.body.appendChild(newDiv);
+
+// See the changed document by running the code
+console.log(document.body);
```
You can also use `insertBefore` to insert the new element before an existing child element.
@@ -73,9 +76,8 @@ elementToRemove.remove();
To modify an HTML element, you can change its properties such as `innerHTML`, `textContent`, or attributes.
-```js
-// Select the element to be modified
-const elementToModify = document.getElementById('elementId');
+```js live
+const elementToModify = document.createElement('div');
// Change its inner HTML
elementToModify.innerHTML = 'New Content';
@@ -85,6 +87,8 @@ elementToModify.textContent = 'New Text Content';
// Change an attribute
elementToModify.setAttribute('class', 'new-class');
+
+console.log(elementToModify);
```
You can also use methods like `classList.add`, `classList.remove`, and `classList.toggle` to modify the element's classes.
diff --git a/questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.mdx b/questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.mdx
index d5e5ba9..753ef50 100644
--- a/questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.mdx
+++ b/questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.mdx
@@ -6,11 +6,12 @@ title: How do you convert a `Set` to an array in JavaScript?
To convert a `Set` to an array in JavaScript, you can use the `Array.from()` method or the spread operator. For example:
-```js
+```js live
const mySet = new Set([1, 2, 3]);
const myArray = Array.from(mySet);
-// or
-const myArray = [...mySet];
+// OR const myArray = [...mySet];
+
+console.log(myArray); // Output: [1, 2, 3]
```
---
@@ -21,7 +22,7 @@ const myArray = [...mySet];
The `Array.from()` method creates a new, shallow-copied array instance from an array-like or iterable object, such as a `Set`.
-```js
+```js live
const mySet = new Set([1, 2, 3]);
const myArray = Array.from(mySet);
console.log(myArray); // Output: [1, 2, 3]
@@ -31,7 +32,7 @@ console.log(myArray); // Output: [1, 2, 3]
The spread operator (`...`) can be used to expand the elements of a `Set` into an array.
-```js
+```js live
const mySet = new Set([1, 2, 3]);
const myArray = [...mySet];
console.log(myArray); // Output: [1, 2, 3]
diff --git a/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx b/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx
index f3def3d..6ceb2de 100644
--- a/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx
+++ b/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx
@@ -6,14 +6,12 @@ title: How do you get the query string values of the current page in JavaScript?
To get the query string values of the current page in JavaScript, you can use the `URLSearchParams` object. First, create a `URLSearchParams` instance with `window.location.search`, then use the `get` method to retrieve specific query parameters. For example:
-```js live
+```js
const params = new URLSearchParams(window.location.search);
const value = params.get('language');
console.log(value);
```
-This will give you the value of the query parameter named `language`. If you look at the URL of this page, you can see that the `language` parameter is set to 'js'.
-
---
## How do you get the query string values of the current page in JavaScript?
@@ -25,9 +23,9 @@ The `URLSearchParams` interface provides an easy way to work with query strings.
1. **Create a `URLSearchParams` instance**: Use `window.location.search` to get the query string part of the URL.
2. **Retrieve specific query parameters**: Use the `get` method to get the value of a specific query parameter.
-```js live
+```js
const params = new URLSearchParams(window.location.search);
-const value = params.get('key'); // Replace 'key' with the actual query parameter name (try 'language' or 'tab' for this page)
+const value = params.get('key'); // Replace 'key' with the actual query parameter name
console.log(value);
```
@@ -54,26 +52,24 @@ const values = params.getAll('key'); // Returns an array of values
### Checking for the existence of a parameter
-You can use the `has` method to check if a query parameter exists. Try to check for the query parameters present in the URL of this page.
+You can use the `has` method to check if a query parameter exists.
-```js live
+```js
const params = new URLSearchParams(window.location.search);
-console.log(params.has('page')); // false
-console.log(params.has('language')); // true
-console.log(params.has('tab')); // true
+console.log(params.has('page'));
+console.log(params.has('language'));
+console.log(params.has('tab'));
```
### Iterating over all parameters
You can iterate over all query parameters using the `forEach` method:
-```js live
+```js
const params = new URLSearchParams(window.location.search);
params.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
-// language: js
-// tab: quiz
```
## Further reading
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 1c3d660..730eda1 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
@@ -6,9 +6,10 @@ title: How do you handle errors in asynchronous operations?
To handle errors in asynchronous operations, you can use `try...catch` blocks with `async/await` syntax or `.catch()` method with Promises. For example, with `async/await`, you can wrap your code in a `try...catch` block to catch any errors:
-```js
+```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);
@@ -16,12 +17,14 @@ async function fetchData() {
console.error('Error fetching data:', error);
}
}
+
+fetchData(); // Error fetching data: ....
```
With Promises, you can use the `.catch()` method:
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://api.example.com/data') // Invalid URl
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error('Error fetching data:', error));
@@ -35,9 +38,10 @@ fetch('https://api.example.com/data')
When using `async/await`, you can handle errors by wrapping your asynchronous code in a `try...catch` block. This allows you to catch any errors that occur during the execution of the `await` statement.
-```js
+```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);
@@ -45,15 +49,18 @@ async function fetchData() {
console.error('Error fetching data:', error);
}
}
+
+fetchData(); // Error fetching data: ....
```
### Nested asynchronous operations
If you have multiple asynchronous operations, you can nest `try...catch` blocks to handle errors at different levels.
-```js
+```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);
@@ -66,10 +73,13 @@ async function processData() {
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);
}
}
+
+processData();
```
## Using `.catch()` with Promises
@@ -78,7 +88,7 @@ async function processData() {
When working with Promises, you can handle errors using the `.catch()` method. This method is called if the Promise is rejected.
-```js
+```js live
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => console.log(data))
@@ -89,7 +99,7 @@ fetch('https://api.example.com/data')
If you have multiple Promises chained together, you can use a single `.catch()` at the end to handle any errors that occur in any of the Promises.
-```js
+```js live
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => {
diff --git a/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx b/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx
index 49fdb84..e9b38ea 100644
--- a/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx
+++ b/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx
@@ -6,13 +6,17 @@ title: Provide some examples of how currying and partial application can be used
Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. Partial application fixes a few arguments of a function, producing another function with a smaller number of arguments. For example, currying a function `add(a, b)` would look like `add(a)(b)`, while partial application of `add(2, b)` would fix the first argument to 2, resulting in a function that only needs the second argument.
-```js
-// Currying example
+### Currying example
+
+```js live
const add = (a) => (b) => a + b;
const addTwo = add(2);
console.log(addTwo(3)); // 5
+```
-// Partial application example
+### Partial application example
+
+```js live
const add = (a, b) => a + b;
const addTwo = add.bind(null, 2);
console.log(addTwo(3)); // 5
@@ -28,24 +32,18 @@ Currying is a technique where a function with multiple arguments is transformed
#### Example
-Consider a simple function that adds two numbers:
-
-```js
+```js live
+// Consider a simple function that adds two numbers:
function add(a, b) {
return a + b;
}
-```
-
-To curry this function, we transform it into a series of functions, each taking one argument:
-
-```js
-const add = (a) => (b) => a + b;
-```
-Now, you can use the curried function like this:
+// To curry this function, we transform it into a series of functions,
+// each taking one argument:
+const curriedAdd = (a) => (b) => a + b;
-```js
-const addTwo = add(2);
+// Now, you can use the curried function like this:
+const addTwo = curriedAdd(2);
console.log(addTwo(3)); // 5
```
@@ -55,32 +53,26 @@ Partial application is a technique where you fix a few arguments of a function,
#### Example
-Consider the same `add` function:
-
-```js
+```js live
+// Consider the same add function:
function add(a, b) {
return a + b;
}
-```
-To partially apply this function, you can use the `bind` method to fix the first argument:
-
-```js
+// To partially apply this function
+// you can use the `bind` method to fix the first argument:
const addTwo = add.bind(null, 2);
console.log(addTwo(3)); // 5
-```
-Alternatively, you can create a custom partial application function:
-
-```js
+// Alternatively, you can create a custom partial application function:
function partial(fn, ...fixedArgs) {
return function (...remainingArgs) {
return fn(...fixedArgs, ...remainingArgs);
};
}
-const addTwo = partial(add, 2);
-console.log(addTwo(3)); // 5
+const addTwoCustom = partial(add, 2);
+console.log(addTwoCustom(3)); // 5
```
## Further reading
diff --git a/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx b/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx
index 70974f7..e904548 100644
--- a/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx
+++ b/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx
@@ -10,12 +10,12 @@ For example, let's say we have a `Person` constructor that takes a first name as
```js live
const Person = function (name) {
- this.name = name;
+ this.firstName = name;
this.sayName1 = function () {
- console.log(this.name);
+ console.log(this.firstName);
};
this.sayName2 = () => {
- console.log(this.name);
+ console.log(this.firstName);
};
};
@@ -95,9 +95,9 @@ const foo = new Foo(); // TypeError: Foo is not a constructor
They also do not have `arguments` keyword; the arguments have to be obtained from using the rest operator (`...`) in the arguments.
-```js
+```js live
const arrowFunction = (...args) => {
- console.log(arguments); // Throws a TypeError
+ console.log(arguments); // Throws a ReferenceError
console.log(args); // [1, 2, 3]
};
@@ -123,12 +123,12 @@ One of the most notable features of arrow functions is their behavior with `this
```js live
const Person = function (name) {
- this.name = name;
+ this.firstName = name;
this.sayName1 = function () {
- console.log(this.name);
+ console.log(this.firstName);
};
this.sayName2 = () => {
- console.log(this.name);
+ console.log(this.firstName);
};
};
diff --git a/questions/what-are-promises-and-how-do-they-work/en-US.mdx b/questions/what-are-promises-and-how-do-they-work/en-US.mdx
index bc9b69a..ba148b5 100644
--- a/questions/what-are-promises-and-how-do-they-work/en-US.mdx
+++ b/questions/what-are-promises-and-how-do-they-work/en-US.mdx
@@ -6,7 +6,7 @@ title: What are Promises and how do they work?
Promises in JavaScript are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value. They have three states: `pending`, `fulfilled`, and `rejected`. You can handle the results of a promise using the `.then()` method for success and the `.catch()` method for errors.
-```js
+```js live
let promise = new Promise((resolve, reject) => {
// asynchronous operation
const success = true;
@@ -46,7 +46,7 @@ A promise can be in one of three states:
You create a promise using the `Promise` constructor, which takes a function with two arguments: `resolve` and `reject`. These are callbacks that you call to change the state of the promise.
-```js
+```js live
let promise = new Promise((resolve, reject) => {
// asynchronous operation
const success = true;
@@ -62,7 +62,7 @@ let promise = new Promise((resolve, reject) => {
To handle the result of a promise, you use the `.then()` method for a successful outcome and the `.catch()` method for an error.
-```js
+```js live
let promise = new Promise((resolve, reject) => {
// asynchronous operation
const success = false;
@@ -86,11 +86,15 @@ promise
Promises can be chained to handle multiple asynchronous operations in sequence. Each `.then()` returns a new promise, allowing for further chaining.
-```js
-promise
+```js live
+new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve('Promise 1 resolved after 1 second');
+ }, 1000);
+})
.then((result) => {
console.log(result);
- return anotherPromise;
+ return 'Another promise';
})
.then((anotherResult) => {
console.log(anotherResult);
@@ -104,15 +108,22 @@ promise
You can use `Promise.all()` to run multiple promises in parallel and wait for all of them to complete.
-```js
+```js live
let promise1 = Promise.resolve('First');
let promise2 = Promise.resolve('Second');
+let promise3 = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve('Third');
+ }, 2000);
+});
-Promise.all([promise1, promise2]).then((results) => {
- console.log(results); // ['First', 'Second']
+Promise.all([promise1, promise2, promise3]).then((results) => {
+ console.log(results); // ['First', 'Second', 'Third']
});
```
+In the above example, while `promise1` and `promise2` resolve instantly, `Promise.all` waits for `promise3`, which takes 2 seconds, before logging the results.
+
## Further reading
- [MDN Web Docs: Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
diff --git a/questions/what-are-the-various-data-types-in-javascript/en-US.mdx b/questions/what-are-the-various-data-types-in-javascript/en-US.mdx
index 2bb952e..85bbeb7 100644
--- a/questions/what-are-the-various-data-types-in-javascript/en-US.mdx
+++ b/questions/what-are-the-various-data-types-in-javascript/en-US.mdx
@@ -80,7 +80,7 @@ if (!user) {
6. **Symbol**: A unique and immutable `primitive` value, typically used as the key of an object property.
-```js live
+```js
let sym1 = Symbol();
let sym2 = Symbol('description');
console.log(sym1); // Symbol()
@@ -89,7 +89,7 @@ console.log(sym2); // Symbol(description)
7. **BigInt**: Used for representing integers with arbitrary precision, useful for working with very large numbers.
-```js live
+```js
let bigNumber = BigInt(9007199254740991);
let anotherBigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber); // 9007199254740991n
@@ -133,7 +133,7 @@ console.log(add(2, 3)); // 5
4. **Date**: Represents dates and times. The `Date` object is used to work with dates.
```js live
-let today = new Date();
+let today = new Date().toLocaleTimeString();
console.log(today);
```
@@ -141,7 +141,9 @@ console.log(today);
```js live
let pattern = /abc/;
-console.log(pattern);
+let str = '123abc456';
+
+console.log(pattern.test(str)); // true
```
6. **Map**: A collection of keyed data items, similar to an `object` but allows keys of any type.
@@ -154,11 +156,11 @@ console.log(map);
7. **Set**: A collection of unique values.
-```js live
+```js
let set = new Set();
set.add(1);
set.add(2);
-console.log(set);
+console.log(set); // { 1, 2 }
```
## Determining data types
diff --git a/questions/what-is-the-command-pattern-and-how-is-it-used/en-US.mdx b/questions/what-is-the-command-pattern-and-how-is-it-used/en-US.mdx
index 39b1433..50e03ac 100644
--- a/questions/what-is-the-command-pattern-and-how-is-it-used/en-US.mdx
+++ b/questions/what-is-the-command-pattern-and-how-is-it-used/en-US.mdx
@@ -6,7 +6,7 @@ title: What is the Command pattern and how is it used?
The Command pattern is a behavioral design pattern that turns a request into a stand-alone object containing all information about the request. This transformation allows for parameterization of methods with different requests, queuing of requests, and logging of the requests. It also supports undoable operations. In JavaScript, it can be implemented by creating command objects with `execute` and `undo` methods.
-```js
+```js live
class Command {
execute() {}
undo() {}
@@ -58,18 +58,16 @@ The Command pattern is a behavioral design pattern that encapsulates a request a
### Implementation in JavaScript
-#### Step 1: Define the Command interface
+```js live
+// Step 1: Define the Command interface
-```js
class Command {
execute() {}
undo() {}
}
-```
-#### Step 2: Create ConcreteCommand classes
+// Step 2: Create ConcreteCommand classes
-```js
class LightOnCommand extends Command {
constructor(light) {
super();
@@ -95,11 +93,9 @@ class LightOffCommand extends Command {
this.light.on();
}
}
-```
-#### Step 3: Define the Receiver
+// Step 3: Define the Receiver
-```js
class Light {
on() {
console.log('Light is on');
@@ -108,11 +104,9 @@ class Light {
console.log('Light is off');
}
}
-```
-#### Step 4: Create the Invoker
+// Step 4: Create the Invoker
-```js
class RemoteControl {
setCommand(command) {
this.command = command;
@@ -124,11 +118,9 @@ class RemoteControl {
this.command.undo();
}
}
-```
-#### Step 5: Client code
+// Step 5: Client code
-```js
const light = new Light();
const lightOnCommand = new LightOnCommand(light);
const lightOffCommand = new LightOffCommand(light);
diff --git a/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx b/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx
index 38ceb43..131cbdc 100644
--- a/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx
+++ b/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx
@@ -22,10 +22,10 @@ In this example, `process.nextTick()` will execute first, followed by either `se
`setTimeout()` is a function that schedules a callback to be executed after a specified delay in milliseconds. The minimum delay is approximately 4ms in modern browsers and Node.js.
-```js
+```js live
setTimeout(() => {
- console.log('Executed after at least 0 milliseconds');
-}, 0);
+ console.log('Executed after at least 1000 milliseconds');
+}, 1000);
```
### `setImmediate()`
diff --git a/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.mdx b/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.mdx
index b7e5f58..70669bd 100644
--- a/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.mdx
+++ b/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.mdx
@@ -41,12 +41,18 @@ The `Document` object represents the HTML or XML document loaded in the browser
Example:
-```js
-// Select an element by its ID
-const element = document.getElementById('myElement');
-
-// Change the content of the selected element
-element.textContent = 'New content';
+```js live
+// Create a new element and append it to the document body
+const newElement = document.createElement('div');
+newElement.id = 'myDiv';
+newElement.textContent = 'Hello world';
+document.body.appendChild(newElement);
+
+// Select that element by its ID
+const element = document.getElementById('myDiv');
+
+console.log(element);
+console.log(document.body);
```
### Key differences
diff --git a/questions/what-is-the-use-of-promiseall/en-US.mdx b/questions/what-is-the-use-of-promiseall/en-US.mdx
index d417bae..a36deaa 100644
--- a/questions/what-is-the-use-of-promiseall/en-US.mdx
+++ b/questions/what-is-the-use-of-promiseall/en-US.mdx
@@ -6,7 +6,7 @@ title: What is the use of `Promise.all()`
`Promise.all()` is a method in JavaScript that takes an array of promises and returns a single promise. This returned promise resolves when all the input promises have resolved, or it rejects if any of the input promises reject. It is useful for running multiple asynchronous operations in parallel and waiting for all of them to complete.
-```js
+```js live
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
@@ -45,7 +45,7 @@ When you pass an array of promises to `Promise.all()`, it returns a new promise.
Here is an example to illustrate how `Promise.all()` works:
-```js
+```js live
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'one');
});
@@ -69,7 +69,7 @@ In this example, `Promise.all()` waits for both `promise1` and `promise2` to res
If any of the promises passed to `Promise.all()` reject, the returned promise will immediately reject with the reason of the first promise that rejects.
-```js
+```js live
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'one');
});
diff --git a/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx b/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx
index fc0c91d..ea61f8d 100644
--- a/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx
+++ b/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx
@@ -6,14 +6,16 @@ title: What's a typical use case for anonymous functions in JavaScript?
Anonymous function in Javascript is a function that does not have any name associated with it. They are typically used as arguments to other functions or assigned to variables.
-```js
+```js live
+const arr = [-1, 0, 5, 6];
+
// The filter method is passed an anonymous function.
-arr.filter((x) => x > 1);
+arr.filter((x) => x > 1); // [5, 6]
```
They are often used as arguments to other functions, known as higher-order functions, which can take functions as input and return a function as output. Anonymous functions can access variables from the outer scope, a concept known as closures, allowing them to "close over" and remember the environment in which they were created.
-```js
+```js live
// Encapsulating Code
(function () {
// Some code here.
@@ -42,7 +44,7 @@ Anonymous functions provide a more concise way to define functions, especially f
Anonymous functions are commonly used in Immediately Invoked Function Expressions (IIFEs) to encapsulate code within a local scope. This prevents variables declared within the function from leaking to the global scope and polluting the global namespace.
-```js
+```js live
// This is an IIFE
(function () {
var x = 10;
@@ -59,7 +61,7 @@ In the above example, the IIFE creates a local scope for the variable `x`. As a
Anonymous functions can be used as callbacks that are used once and do not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body.
-```js
+```js live
setTimeout(() => {
console.log('Hello world!');
}, 1000);
@@ -69,7 +71,7 @@ setTimeout(() => {
It is used as arguments to functional programming constructs like Higher-order functions or Lodash (similar to callbacks). Higher-order functions take other functions as arguments or return them as results. Anonymous functions are often used with higher-order functions like `map()`, `filter()`, and `reduce()`.
-```js
+```js live
const arr = [1, 2, 3];
const double = arr.map((el) => {
return el * 2;
diff --git a/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx b/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx
index 6b64543..a4629c3 100644
--- a/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx
+++ b/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx
@@ -30,7 +30,7 @@ For example:
```js
// Assuming this is run in the global scope and not within a module.
-const globalVariable = 'I am global';
+var globalVariable = 'I am global';
function globalFunction() {
console.log('I am a global function');
}
@@ -54,7 +54,7 @@ In general, it's a good software engineering practice to not pollute the global
Here's an example of global scope being used.
-```js
+```js live
// Assuming this is run in the global scope, not within a module.
let count = 0;
@@ -83,7 +83,7 @@ By now we hope that you're convinced that it's not a good idea to define variabl
- **Use modules**: Utilize module systems to encapsulate your code and prevent global scope pollution. Each module has its own scope, making it easier to manage and maintain your code.
- **Use immediately invoked function expressions (IIFE)**: If modules are not available, wrap your code in an IIFE to create a new scope, preventing variables from being added to the global scope unless you explicitly expose them.
-```js
+```js live
// Assuming this is run in the global scope, not within a module.
(function () {
let count = 0;