A higher order function is a function that takes one or more functions as arguments, or returns a function as its result.

These functions are powerful because they allow you to abstract and compose operations in a flexible and reusable way. They are a fundamental concept in functional programming.

Common examples of higher order functions are .map(), .filter(), and reducer().

.map(): Takes a function as an argument and applies it to each element in an array, returning a new array with the results.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

References

Namaste JS, FreeCodeCamp

There are many default browser actions:

1. mousedown – starts the selection (move the mouse to select).
2. click on <input type="checkbox"> – checks/unchecks the input.
3. submit – clicking an <input type="submit"> or hitting Enter inside a form field causes this event to happen, and the browser submits the form after it.
4. keydown – pressing a key may lead to adding a character into a field, or other actions. contextmenu – the event happens on a right-click, the action is to show the browser context menu.
5. …there are more…

All the default actions can be prevented if we want to handle the event exclusively by JavaScript.

To prevent a default action – use either event.preventDefault() or return false. The second method works only for handlers assigned with on<event>.

The passive: true option of addEventListener tells the browser that the action is not going to be prevented. That’s useful for some mobile events, like touchstart and touchmove, to tell the browser that it should not wait for all handlers to finish before scrolling.

If the default action was prevented, the value of event.defaultPrevented becomes true, otherwise it’s false.

References

javascript info

A module is just a file. One script is one module. As simple as that.

• To make import/export work, browsers need <script type="module">.
• Modules have several differences:
  • Deferred by default.
  • Async works on inline scripts.
  • To load external scripts from another origin (domain/protocol/port), CORS headers are needed.
  • Duplicate external scripts are ignored.
• Modules have their own, local top-level scope and interchange functionality via import/export.
• Modules always use strict.
• Module code is executed only once. Exports are created once and shared between importers.

When we use modules, each module implements the functionality and exports it. Then we use import to directly import it where it’s needed. The browser loads and evaluates the scripts automatically.

In production, people often use bundlers such as Webpack to bundle modules together for performance and other reasons.

References

javascript info

Syntax error
The error occurs when you use a predefined syntax incorrectly.

Reference Error
In a case where a variable reference can’t be found or hasn’t been declared, then a Reference error occurs.

Type Error
An error occurs when a value is used outside the scope of its data type.

RangeError
There is an error when a range of expected values is required

URI Error
When the wrong character(s) are used in a URI function, the error is called.

InternalError
This error occurs internally in the JS engine, especially when it has too much data to handle and the stack grows way over its critical limit.

Evaluation Error
Current JavaScript engines and EcmaScript specifications do not throw this error. However, it is still available for backward compatibility. The error is called when the eval() backward function is used.

References

scaler

Snippet for creating a progress bar in the header section.

  <div class="header mt-100">
    <div class="row">
      <div class="progress">
        <div class="progress-bar" id="myBar"></div>
      </div>
    </div>
  </div>

  <script>
    // When the user scrolls the page, execute scrollFn 
    window.onscroll = function () { scrollFn() };

    function scrollFn() {
      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      var scrolled = (winScroll / height) * 100;
      document.getElementById("myBar").style.width = scrolled + "%";
    }
  </script>