The Web Dev Guide by Wishtack
  • The Web Dev Guide by Wishtack
  • HTML
    • HTML Tags
    • HTML Attributes
    • Content Formatting
    • Empty Tags vs Content Tags
    • Some Links
  • ECMAScript
    • Some History
    • Language Properties
    • Single-Threaded thus Asynchronous
    • The Event Loop
    • Classes
    • Hoisting is Dead: var vs. let vs. const
    • this & "binding"
    • Arrow Functions
    • Template Strings
    • Syntactic Sugar
      • Spread
      • Destructuring
      • Rest
      • Object Literal Property Value Shorthand
    • Named Parameters
    • Compatibility
  • Tools
    • Node.js
    • NPM
    • Yarn
    • Webpack
    • WebStorm
    • StackBlitz
  • DOM
    • What Is It?
    • Element Selection
    • Element Modification
    • Events
  • Forms
    • The <form> tag
    • Form elements
    • Form validation
  • Networking
    • Fetch Web API
  • CSS
    • Selectors
    • Transforms
    • Transitions
    • Animations
    • Web Animations API
    • Sass
  • Responsive Web Design
    • Viewport
    • Media Queries
    • Grid Layout
    • Flex Layout
    • Frameworks & Libraries
  • Web APIs
  • Testing
    • Unit Testing
    • End to End Testing
  • Security
    • Injection
    • DOM XSS
    • Insecure Direct Object Reference
    • Cross-Site Request Forgery
    • Client vs API Validation
    • API Unauthorized Access and Data Leak
  • More Links
Powered by GitBook
On this page
  • Multi-thread vs mono-thread
  • Asynchronous processing using callbacks
  • Asynchronous processing advantages
  • Closures
  1. ECMAScript

Single-Threaded thus Asynchronous

Multi-thread vs mono-thread

In a synchronous, multi-threaded and data-driven world, this works:

function processRequest(request) {
​
    /*
     * Pre-processing.
     */
    var query = prepareQuery(...);
​
    var result = execQuery(query); // might take few seconds...
​
    /*
     * Post-processing.
     */
    var response = createResponse(result);
​
    return response;
​
}

... but in a single-threaded world, this can lead to trouble as the application would freeze until it receives a response.

Until the function ends (and its callees), no other function can be executed simultaneously.

Asynchronous processing using callbacks

function processRequest(request, callback) {
​
    /*
     * Pre-processing.
     */
    var query = prepareQuery(...);
​
    execQuery(query, function (result) {
​
        /*
         * Post-processing.
         */
        var response = createResponse(result);
​
        callback(response);
​
    });
​
}

Asynchronous processing advantages

  • No threads count limitation.

  • No memory overhead due to threads.

  • No locks or semaphores.

  • No greedy locks.

  • No deadlocks.

  • Data doesn't change during the execution of a function.

Closures

A closure is the combination of a function definition and the lexical environment in which the latter is defined.

Closures determine the scope of the variables.

Variables can be read and modified in the closure where they are declared but also in the functions defined inside.

function main() {
​
    var userName = 'Foo';
​
    function setUserName(value) {
        userName = value;
    }
​
    function getUserName() {
        return userName;
    }
​
    setUserName('John');
​
    console.log(getUserName()); // 'John';
​
}
​
main();

PreviousLanguage PropertiesNextThe Event Loop

Last updated 6 years ago