Version 1.4.0

Author: fix2015

Diff for: level/advanced/can_i_avoid_using_postmessages_completely.md

@@ -0,0 +1,9 @@
+## [Can I avoid using postMessages completely](#can-i-avoid-using-postmessages-completely)
+
+### Can I avoid using postMessages completely?
+
+While `postMessage` is a useful API for cross-origin communication, alternatives like `localStorage`, `cookies`, or server-side messaging (e.g., WebSockets) can be used depending on the use case. Avoiding `postMessage` may increase security in certain scenarios.
+
+**Tags**: [advanced](./level/advanced), [JavaScript](./theme/javascript), [Security](./theme/security)
+
+

Diff for: level/advanced/does_javascript_uses_mixins.md

@@ -0,0 +1,20 @@
+## [Does javascript uses mixins](#does-javascript-uses-mixins)
+
+### Does JavaScript use mixins?
+
+Yes, JavaScript can implement mixins, which are objects that provide methods to other objects. A mixin is a way to reuse functionality across different objects without using inheritance.
+
+Example:
+
+```javascript
+let mixin = {
+  greet() { console.log('Hello!'); }
+};
+
+let obj = Object.assign({}, mixin);
+obj.greet();  // Output: 'Hello!'
+```
+
+**Tags**: [advanced](./level/advanced), [JavaScript](./theme/javascript), [Object-Oriented Programming](./theme/object_oriented_programming)
+
+

Diff for: level/advanced/find_duplicates_in_an_array_without_extra_space.md

@@ -0,0 +1,37 @@
+## [Find Duplicates in an Array Without Extra Space](#find-duplicates-in-an-array-without-extra-space)
+
+### Find Duplicates in an Array Without Extra Space
+
+To find duplicates without using extra space, you can modify the array in-place.
+
+#### Algorithm:
+1. Iterate through the array and use the value of each element as an index.
+2. If the value at that index is negative, it means the element has been seen before, so it is a duplicate.
+3. If the value at that index is positive, make it negative to mark it as visited.
+4. Return the duplicates.
+
+#### Example:
+```javascript
+function findDuplicatesInPlace(arr) {
+    const duplicates = [];
+    for (let i = 0; i < arr.length; i++) {
+        const absVal = Math.abs(arr[i]);
+        if (arr[absVal] < 0) {
+            duplicates.push(absVal);
+        } else {
+            arr[absVal] = -arr[absVal];
+        }
+    }
+    return duplicates;
+}
+
+// Example usage
+console.log(findDuplicatesInPlace([4, 3, 2, 7, 8, 2, 3, 1])); // Output: [2, 3]
+console.log(findDuplicatesInPlace([1, 1, 1, 2, 2])); // Output: [1, 2]
+```
+
+This method has a time complexity of O(n), where n is the length of the array, and does not use extra space.
+
+**Tags**: [advanced](./level/advanced), [JavaScript](./theme/javascript), [Arrays](./theme/arrays), [Algorithm](./theme/algorithm)
+
+

Diff for: level/advanced/give_an_example_of_statements_affected_by_automatic_semicolon_insertion_.md

@@ -0,0 +1,34 @@
+## [Give an example of statements affected by automatic semicolon insertion?](#give-an-example-of-statements-affected-by-automatic-semicolon-insertion)
+
+### Give an example of statements affected by automatic semicolon insertion
+
+Automatic Semicolon Insertion (ASI) can lead to unexpected behavior when a semicolon is inserted incorrectly.
+
+Example:
+```javascript
+function test() {
+  return
+  {
+    key: 'value'
+  };
+}
+
+console.log(test()); // undefined
+```
+
+Explanation:
+- ASI inserts a semicolon after `return`, so the object is never returned. The correct version:
+
+```javascript
+function test() {
+  return {
+    key: 'value'
+  };
+}
+
+console.log(test()); // { key: 'value' }
+```
+
+**Tags**: [advanced](./level/advanced), [JavaScript](./theme/javascript), [Syntax](./theme/syntax)
+
+

Diff for: level/advanced/how_do_you_avoid_receiving_postmessages_from_attackers.md

@@ -0,0 +1,20 @@
+## [How do you avoid receiving postMessages from attackers](#how-do-you-avoid-receiving-postmessages-from-attackers)
+
+### How do you avoid receiving postMessages from attackers?
+
+To prevent receiving messages from attackers, always validate the `origin` property of the message and ensure it matches the trusted source. You can also check the message's content for additional security.
+
+Example:
+
+```javascript
+window.addEventListener('message', (event) => {
+  if (event.origin !== 'https://trusted.com') {
+    return;
+  }
+  // Process message
+});
+```
+
+**Tags**: [advanced](./level/advanced), [JavaScript](./theme/javascript), [Security](./theme/security)
+
+

Diff for: level/advanced/how_do_you_compare_object_and_map.md

@@ -0,0 +1,13 @@
+## [How do you compare Object and Map](#how-do-you-compare-object-and-map)
+
+### How do you compare Object and Map?
+
+Both `Object` and `Map` are key-value stores in JavaScript, but they have differences:
+
+1. **Key Types**: `Map` can use any data type as a key, while `Object` keys are always converted to strings.
+2. **Iteration**: `Map` preserves the order of insertion, while `Object` does not guarantee order.
+3. **Performance**: `Map` is generally more efficient for frequent additions and removals of key-value pairs.
+
+**Tags**: [advanced](./level/advanced), [Object](./theme/object), [Map](./theme/map), [JavaScript](./theme/javascript)
+
+**URL**: [https://www.tiktok.com/@jsmentoring/photo/7447122335863147808](https://www.tiktok.com/@jsmentoring/photo/7447122335863147808)

Diff for: level/advanced/how_do_you_create_custom_html_element_.md

@@ -0,0 +1,25 @@
+## [How do you create custom HTML element?](#how-do-you-create-custom-html-element)
+
+### How do you create custom HTML element?
+
+You can create a custom HTML element using the `customElements.define` method. Here's an example:
+
+```javascript
+class MyElement extends HTMLElement {
+  constructor() {
+    super();
+    this.innerHTML = '<p>Hello, Custom Element!</p>';
+  }
+}
+
+customElements.define('my-element', MyElement);
+
+// Usage in HTML:
+// <my-element></my-element>
+```
+
+This defines a new custom element `<my-element>` which can be used like a standard HTML tag.
+
+**Tags**: [advanced](./level/advanced), [JavaScript](./theme/javascript), [Web Components](./theme/web_components)
+
+

Diff for: level/advanced/how_do_you_create_polyfills_for_map_filter_and_reduce_methods_.md

@@ -0,0 +1,46 @@
+## [How do you create polyfills for map, filter and reduce methods?](#how-do-you-create-polyfills-for-map-filter-and-reduce-methods)
+
+### How do you create polyfills for `map`, `filter`, and `reduce` methods?
+
+#### `map` Polyfill:
+```javascript
+Array.prototype.myMap = function(callback) {
+  const result = [];
+  for (let i = 0; i < this.length; i++) {
+    if (this.hasOwnProperty(i)) {
+      result.push(callback(this[i], i, this));
+    }
+  }
+  return result;
+};
+```
+
+#### `filter` Polyfill:
+```javascript
+Array.prototype.myFilter = function(callback) {
+  const result = [];
+  for (let i = 0; i < this.length; i++) {
+    if (this.hasOwnProperty(i) && callback(this[i], i, this)) {
+      result.push(this[i]);
+    }
+  }
+  return result;
+};
+```
+
+#### `reduce` Polyfill:
+```javascript
+Array.prototype.myReduce = function(callback, initialValue) {
+  let accumulator = initialValue;
+  for (let i = 0; i < this.length; i++) {
+    if (this.hasOwnProperty(i)) {
+      accumulator = callback(accumulator, this[i], i, this);
+    }
+  }
+  return accumulator;
+};
+```
+
+**Tags**: [advanced](./level/advanced), [JavaScript](./theme/javascript), [Polyfills](./theme/polyfills)
+
+

Diff for: level/advanced/how_do_you_create_your_own_bind_method_using_either_call_or_apply_method_.md

@@ -0,0 +1,27 @@
+## [How do you create your own bind method using either call or apply method?](#how-do-you-create-your-own-bind-method-using-either-call-or-apply-method)
+
+### How do you create your own bind method using either call or apply method?
+
+You can create a custom `bind` method by using `call` or `apply` to explicitly set the `this` context.
+
+Example:
+
+```javascript
+Function.prototype.customBind = function(context, ...args) {
+  const fn = this;
+  return function(...innerArgs) {
+    return fn.apply(context, [...args, ...innerArgs]);
+  };
+};
+
+function greet(greeting, name) {
+  console.log(`${greeting}, ${name}!`);
+}
+
+const boundGreet = greet.customBind(null, 'Hello');
+boundGreet('Alice'); // 'Hello, Alice!'
+```
+
+**Tags**: [advanced](./level/advanced), [JavaScript](./theme/javascript), [Functions](./theme/functions)
+
+

Diff for: level/advanced/how_do_you_make_an_object_iterable_in_javascript.md

@@ -0,0 +1,32 @@
+## [How do you make an object iterable in JavaScript](#how-do-you-make-an-object-iterable-in-javascript)
+
+### How do you make an object iterable in JavaScript?
+
+To make an object iterable, you need to implement the `[Symbol.iterator]` method, which returns an iterator object.
+
+Example:
+
+```javascript
+const iterableObject = {
+  data: [1, 2, 3],
+  [Symbol.iterator]() {
+    let index = 0;
+    let data = this.data;
+    return {
+      next() {
+        return index < data.length
+          ? { value: data[index++], done: false }
+          : { done: true };
+      }
+    };
+  }
+};
+
+for (let value of iterableObject) {
+  console.log(value);  // Output: 1, 2, 3
+}
+```
+
+**Tags**: [advanced](./level/advanced), [JavaScript](./theme/javascript), [Iterables](./theme/iterables)
+
+

Diff for: level/advanced/how_do_you_prevent_promises_swallowing_errors.md

@@ -0,0 +1,26 @@
+## [How do you prevent promises swallowing errors](#how-do-you-prevent-promises-swallowing-errors)
+
+### How do you prevent promises from swallowing errors?
+
+To prevent promises from swallowing errors, ensure that you handle rejections using `.catch()` or use `try-catch` with `async-await` syntax. Additionally, always return or throw errors explicitly.
+
+Example:
+
+```javascript
+Promise.resolve()
+  .then(() => { throw new Error('Error occurred'); })
+  .catch(error => console.error('Caught error:', error));
+
+async function asyncFunction() {
+  try {
+    await Promise.reject('Error occurred');
+  } catch (error) {
+    console.error('Caught error:', error);
+  }
+}
+asyncFunction();
+```
+
+**Tags**: [advanced](./level/advanced), [JavaScript](./theme/javascript), [Promises](./theme/promises)
+
+

Diff for: level/advanced/how_do_you_reuse_information_across_service_worker_restarts.md

@@ -0,0 +1,9 @@
+## [How do you reuse information across service worker restarts](#how-do-you-reuse-information-across-service-worker-restarts)
+
+### How do you reuse information across service worker restarts?
+
+To reuse information across service worker restarts, store data in persistent storage mechanisms like IndexedDB or localStorage. This ensures data remains accessible even when the service worker restarts.
+
+**Tags**: [advanced](./level/advanced), [service worker](./theme/service_worker), [persistence](./theme/persistence), [IndexedDB](./theme/indexeddb)
+
+**URL**: [https://www.tiktok.com/@jsmentoring/photo/7447841580880350497](https://www.tiktok.com/@jsmentoring/photo/7447841580880350497)

Diff for: level/advanced/how_to_cancel_a_fetch_request.md

@@ -0,0 +1,24 @@
+## [How to cancel a fetch request](#how-to-cancel-a-fetch-request)
+
+### How to cancel a fetch request?
+
+You can cancel a fetch request using an `AbortController`. The `AbortController` allows you to abort one or more fetch requests.
+
+Example:
+
+```javascript
+let controller = new AbortController();
+let signal = controller.signal;
+
+fetch('https://api.example.com/data', { signal: signal })
+  .then(response => response.json())
+  .then(data => console.log(data))
+  .catch(err => console.log('Fetch aborted', err));
+
+// To cancel the request
+controller.abort();
+```
+
+**Tags**: [advanced](./level/advanced), [JavaScript](./theme/javascript), [Fetch API](./theme/fetch_api)
+
+

Diff for: level/advanced/how_to_detect_if_a_function_is_called_as_a_constructor.md

@@ -0,0 +1,23 @@
+## [How to detect if a function is called as a constructor](#how-to-detect-if-a-function-is-called-as-constructor)
+
+### How to detect if a function is called as a constructor?
+
+To detect if a function is called as a constructor, check the value of `this`. In a constructor call, `this` refers to the newly created object.
+
+Example:
+
+```javascript
+function MyFunction() {
+  if (!(this instanceof MyFunction)) {
+    throw new Error('Must be called with new');
+  }
+  console.log('Called as constructor');
+}
+
+new MyFunction();  // Works
+MyFunction();  // Throws error
+```
+
+**Tags**: [advanced](./level/advanced), [JavaScript](./theme/javascript), [Functions](./theme/functions)
+
+

Diff for: level/advanced/how_to_invoke_an_iife_without_any_extra_brackets_.md

@@ -0,0 +1,21 @@
+## [How to invoke an IIFE without any extra brackets?](#how-to-invoke-an-iife-without-any-extra-brackets)
+
+### How to invoke an IIFE without any extra brackets?
+
+Use an **Unary Operator** like `!` or `+` before the function to execute it immediately:
+
+Example:
+
+```javascript
+!function() {
+  console.log('IIFE invoked!');
+}();
+
++function() {
+  console.log('Another IIFE invoked!');
+}();
+```
+
+**Tags**: [advanced](./level/advanced), [JavaScript](./theme/javascript), [Functions](./theme/functions)
+
+