JS and React

React Features

• Javascript:
  • JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.
    • Pre-compiled Languages: In pre-compiled languages, the source code is translated into machine-readable code (usually binary) before execution. This translation process is known as compilation. The compiler takes the entire source code, checks for syntax and semantic errors, and converts it into an executable file or object code that can be directly executed by the computer's processor. Examples of pre-compiled languages include C, C++, Rust, Go, and Fortran. The advantages of pre-compiled languages include:
      • Faster execution speed since the code is already translated into machine code.
      • Better optimization opportunities for the compiler, leading to more efficient code.
      • Ability to catch errors during the compilation phase before execution.
    • Interpreted Languages: In interpreted languages, the source code is not directly translated into machine code. Instead, an interpreter reads and executes the source code line by line or statement by statement. The interpreter itself is a program that translates the source code into machine-readable instructions on-the-fly during execution.
  • React:
    • Virtual DOM
      • The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.
      • Fiber is the new reconciliation engine in React 16. Its main goal is to enable incremental rendering of the virtual DOM. Read more.
    • Break the UI into a component hierarchy
    • Automatic Batching & Incremental Rendering
    • Following in the steps of Flux, CQRS, and Event Sourcing, Redux attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen. These restrictions are reflected in the three principles of Redux.
• DOM and BOM
  • The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content.
  • The Browser Object Model (BOM) is a larger representation of everything provided by the browser, including the DOM, but also other things like the window object, navigator, history, location, and more. The BOM provides objects that expose browser functionality and web page environment that is not directly related to the document content but rather to the environment in which the document exists.
• Prototype
• Inheritance
  • Parasitic Combination Inheritance
  • Combination Inheritance
• Event and handler
• Closure
  • A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

  • function MyObject(name, message) {
      this.name = name.toString();
      this.message = message.toString();
    }
    MyObject.prototype.getName = function () {
      return this.name;
    };
    MyObject.prototype.getMessage = function () {
      return this.message;
    };

  • Situations where you might want to do this are particularly common on the web. Much of the code written in front-end JavaScript is event-based. You define some behavior, and then attach it to an event that is triggered by the user (such as a click or a keypress). The code is attached as a callback (a single function that is executed in response to the event).
• Promise (resolve and reject), Async, and Await
• Garbage Collection
  • Reference counting
  • Mark-and-sweep algorithm
    • This algorithm reduces the definition of "an object is no longer needed" to "an object is unreachable". This algorithm assumes the knowledge of a set of objects called roots. In JavaScript, the root is the global object. Periodically, the garbage collector will start from these roots, find all objects that are referenced from these roots, then all objects referenced from these, etc. Starting from the roots, the garbage collector will thus find all reachable objects and collect all non-reachable objects.

Reference

• Javascript MDN
• React