Versin 1.1.2

Author: vitaly.basaraba

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, JavaScript, Security
+
+

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, JavaScript, Object-Oriented Programming
+
+

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, JavaScript, Arrays, Algorithm
+
+

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, JavaScript, Syntax
+
+

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, JavaScript, Security
+
+

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, Object, Map, JavaScript
+
+**URL**: [https://www.tiktok.com/@jsmentoring/photo/7447122335863147808](https://www.tiktok.com/@jsmentoring/photo/7447122335863147808)

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, JavaScript, Web Components
+
+

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, JavaScript, Polyfills
+
+

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, JavaScript, Functions
+
+

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, JavaScript, Iterables
+
+