DEV Community: diego michel

async and await in javascript

diego michel — Mon, 13 Jun 2022 04:19:45 +0000

ES2017 introduces two new keywords—async and await—that represent a paradigm shift in asynchronous JavaScript programming. These new keywords dramatically simplify the use of Promises and allow us to write Promise-based, asynchronous code that looks like synchronous code that blocks while waiting for network responses or other asynchronous events.

await Expressions

The await keyword takes a Promise and turns it back into a return value or a thrown exception. Given a Promise object p, the expression await p waits until p settles. If p fulfills, then the value of await p is the fulfillment value of p. On the other hand, if p is rejected, then the await p expression throws the rejection value of p. We don’t usually use await with a variable that holds a Promise; instead, we use it before the invocation of a function that returns a Promise.

let response = await fetch("/api/user/profile");
let profile = await response.json();

async Functions

Because any code that uses await is asynchronous, there is one critical rule: you can only use the await keyword within functions that have been declared with the async keyword.

async function getHighScore() {
    let response = await fetch("/api/user/profile");
    let profile = await response.json();
    return profile.highScore;
}

Declaring a function async means that the return value of the function will be a Promise even if no Promise-related code appears in the body of the function. If an async function appears to return normally, then the Promise object that is the real return value of the function will resolve to that apparent return value. And if an async function appears to throw an exception, then the Promise object that it returns will be rejected with that exception.

The getHighScore() function is declared async, so it returns a Promise. And because it returns a Promise, we can use the await keyword with it.

displayHighScore(await getHighScore());

Awaiting Multiple Promises

Suppose that we’ve written our getJSON() function using async.

async function getJSON(url) {
    let response = await fetch(url);
    let body = await response.json();
    return body;
}

And now suppose that we want to fetch two JSON values with this function.

let value1 = await getJSON(url1);
let value2 = await getJSON(url2);

The problem with this code is that it is unnecessarily sequential: the fetch of the second URL will not begin until the first fetch is complete. If the second URL does not depend on the value obtained from the first URL, then we should probably try to fetch the two values at the same time. This is a case where the Promise-based nature of async functions shows. In order to await a set of concurrently executing async functions, we use Promise.all() just as we would if working with Promises directly

let [value1, value2] = await Promise.all([getJSON(url1), getJSON(url2)]);

Promises in javascript

diego michel — Tue, 07 Jun 2022 16:16:02 +0000

A Promise is an object that represents the result of an asynchronous computation. That result may or may not be ready yet, and the Promise API is intentionally vague about this: there is no way to synchronously get the value of a Promise; you can only ask the Promise to call a callback function when the value is ready.

Promises are just a different way of working with callbacks. However, there are practical benefits to using them. One real problem with callback-based asynchronous programming is that it is common to end up with callbacks inside callbacks inside callbacks, with lines of code so highly indented that it is difficult to read.

Another problem with callbacks is that they can make handling errors difficult. If an asynchronous function throws an exception, there is no way for that exception to propagate back to the initiator of the asynchronous operation.

Using Promises

With the advent of Promises in the core JavaScript language, web browsers have begun to implement Promise-based APIs.

getJSON(url).then(jsonData => {
    // This is a callback function that will be asynchronously
    // invoked with the parsed JSON value when it becomes available.
});

getJSON() starts an asynchronous HTTP request for the URL you specify and then, while that request is pending, it returns a Promise object. The Promise object defines a then() instance method. Instead of passing our callback function directly to getJSON(), we instead pass it to the then() method. When the HTTP response arrives, the body of that response is parsed as JSON, and the resulting parsed value is passed to the function that we passed to then().

You can think of the then() method as a callback registration method like the addEventListener() method used for registering event handlers in client-side JavaScript. If you call the then() method of a Promise object multiple times, each of the functions you specify will be called when the promised computation is complete.

It is also idiomatic to name functions that return Promises and functions that use the results of Promises with verbs, and these idioms lead to code that is particularly easy to read.

// Suppose you have a function like this to display a user profile
function displayUserProfile(profile) { /* implementation omitted */ }

// Here's how you might use that function with a Promise.
// Notice how this line of code reads almost like an English sentence:
getJSON("/api/user/profile").then(displayUserProfile);

Handling errors with Promises

Asynchronous operations, particularly those that involve networking, can typically fail in a number of ways, and robust code has to be written to handle the errors that will inevitably occur.

getJSON("/api/user/profile").then(displayUserProfile, handleProfileError);

A Promise represents the future result of an asynchronous computation that occurs after the Promise object is created. Because the computation is performed after the Promise object is returned to us, there is no way that the computation can traditionally return a value or throw an exception that we can catch

The functions that we pass to then() provide alternatives. When a synchronous computation completes normally, it simply returns its result to its caller. When a Promise-based asynchronous computation completes normally, it passes its result to the function that is the first argument to then().

In practice, it is rare to see two functions passed to then(). There is a better and more idiomatic way of handling errors when working with Promises. To understand it, first consider what happens if getJSON() completes normally but an error occurs in displayUserProfile(). That callback function is invoked asynchronously when getJSON() returns, so it is also asynchronous and cannot meaningfully throw an exception.

getJSON("/api/user/profile").then(displayUserProfile).catch(handleProfileError);

With this code, a normal result from getJSON() is still passed to displayUserProfile(), but any error in getJSON() or in displayUserProfile() (including any exceptions thrown by displayUserProfile) get passed to handleProfileError(). The catch() method is just a shorthand for calling then() with a null first argument and the specified error handler function as the second argument.

Chaining Promises

One of the most important benefits of Promises is that they provide a natural way to express a sequence of asynchronous operations as a linear chain of then() method invocations, without having to nest each operation within the callback of the previous one.

fetch(documentURL)                      // Make an HTTP request
    .then(response => response.json())  // Ask for the JSON body of the response
    .then(document => {                 // When we get the parsed JSON
        return render(document);        // display the document to the user
    })
    .then(rendered => {                 // When we get the rendered document
        cacheInDatabase(rendered);      // cache it in the local database.
    })
    .catch(error => handle(error));     // Handle any errors that occur

This code illustrates how a chain of Promises can make it easy to express a sequence of asynchronous operations.

That promise is fulfilled when the HTTP response begins to arrive and the HTTP status and headers are available.

fetch("/api/user/profile").then(response => {
    // When the promise resolves, we have status and headers
    if (response.ok &&
        response.headers.get("Content-Type") === "application/json") {
        // What can we do here? We don't actually have the response body yet.
    }
});

When the Promise returned by fetch() is fulfilled, it passes a Response object to the function you passed to its then() method. This response object gives you access to request status and headers, and it also defines methods like text() and json(), which give you access to the body of the response in text and JSON-parsed forms, respectively. But although the initial Promise is fulfilled, the body of the response may not yet have arrived. So these text() and json() methods for accessing the body of the response themselves return Promises. Here’s a naive way of using fetch() and the response.json() method to get the body of an HTTP response.

fetch("/api/user/profile").then(response => {
    response.json().then(profile => {  // Ask for the JSON-parsed body
        // When the body of the response arrives, it will be automatically
        // parsed as JSON and passed to this function.
        displayUserProfile(profile);
    });
});

This is a naive way to use Promises because we nested them, like callbacks, which defeats the purpose. The preferred idiom is to use Promises in a sequential chain with code like this.

fetch("/api/user/profile")
    .then(response => {
        return response.json();
    })
    .then(profile => {
        displayUserProfile(profile);
    });

Resolving Promises

While explaining the URL-fetching Promise chain with the list in the last section, we talked about promises 1, 2, and 3. But there is actually a fourth Promise object involved as well, and this brings us to our important discussion of what it means for a Promise to be “resolved.”

Remember that fetch() returns a Promise object which, when fulfilled, passes a Response object to the callback function we register. This Response object has .text(), .json(), and other methods to request the body of the HTTP response in various forms. But since the body may not yet have arrived, these methods must return Promise objects.

Let’s rewrite the URL-fetching code one more time in a verbose and nonidiomatic way that makes the callbacks and promises explicit

function c1(response) {               // callback 1
    let p4 = response.json();
    return p4;                        // returns promise 4
}

function c2(profile) {                // callback 2
    displayUserProfile(profile);
}

let p1 = fetch("/api/user/profile");  // promise 1, task 1
let p2 = p1.then(c1);                 // promise 2, task 2
let p3 = p2.then(c2);                 // promise 3, task 3

Promises in Parallel

We’ve spent a lot of time talking about Promise chains for sequentially running the asynchronous steps of a larger asynchronous operation. Sometimes, though, we want to execute a number of asynchronous operations in parallel. The function Promise.all() can do this. Promise.all() takes an array of Promise objects as its input and returns a Promise. The returned Promise will be rejected if any of the input Promises are rejected. Otherwise, it will be fulfilled with an array of the fulfillment values of each of the input Promises. So, for example, if you want to fetch the text content of multiple URLs, you could use code like this.

// We start with an array of URLs
const urls = [ /* zero or more URLs here */ ];
// And convert it to an array of Promise objects
promises = urls.map(url => fetch(url).then(r => r.text()));
// Now get a Promise to run all those Promises in parallel
Promise.all(promises)
    .then(bodies => { /* do something with the array of strings */ })
    .catch(e => console.error(e));

Promise.all() is slightly more flexible than described before. The input array can contain both Promise objects and non-Promise values. If an element of the array is not a Promise, it is treated as if it is the value of an already fulfilled Promise and is simply copied unchanged into the output array.

promise resource

https://www.buymeacoffee.com/digomicortU

Asynchronous Programming in javascript(Callbacks)

diego michel — Tue, 31 May 2022 17:01:15 +0000

A callback is a function that you write and then pass to some other function. That other function then invokes your function when some condition is met or some event occurs. The invocation of the callback function you provide notifies you of the condition or event, and sometimes, the invocation will include function arguments that provide additional details.

This is easier to understand with some concrete examples, and the subsections that follow demonstrate various forms of callback-based asynchronous programming using both client-side JavaScript and Node.

Timers

One of the simplest kinds of asynchrony is when you want to run some code after a certain amount of time has elapsed, you can do this with the setTimeout() function.

setTimeout(checkForUpdates, 60000);

The first argument to setTimeout() is a function and the second is a time interval measured in milliseconds. In the preceding code, a hypothetical checkForUpdates() function will be called 60,000 milliseconds (1 minute) after the setTimeout() call.

setTimeout() calls the specified callback function one time, passing no arguments, and then forgets about it. If you are writing a function that really does check for updates, you probably want it to run repeatedly. You can do this by using setInterval() instead of setTimeout():

// Call checkForUpdates in one minute and then again every minute after that
let updateIntervalId = setInterval(checkForUpdates, 60000);

// setInterval() returns a value that we can use to stop the repeated
// invocations by calling clearInterval(). (Similarly, setTimeout()
// returns a value that you can pass to clearTimeout())
function stopCheckingForUpdates() {
    clearInterval(updateIntervalId);
}

Events

Client-side JavaScript programs are almost universally event driven: rather than running some kind of predetermined computation, they typically wait for the user to do something and then respond to the user’s actions. The web browser generates an event when the user presses a key on the keyboard, moves the mouse, clicks a mouse button, or touches a touchscreen device. Event-driven JavaScript programs register callback functions for specified types of events in specified contexts, and the web browser invokes those functions whenever the specified events occur.

// Ask the web browser to return an object representing the HTML
// <button> element that matches this CSS selector
let okay = document.querySelector('#confirmUpdateDialog button.okay');

// Now register a callback function to be invoked when the user
// clicks on that button.
okay.addEventListener('click', applyUpdate);

applyUpdate() is a hypothetical callback function that we assume is implemented somewhere else. The call to document.querySelector() returns an object that represents a single specified element in the web page. We call addEventListener() on that element to register our callback.

Network Events

Another common source of asynchrony in JavaScript programming is network requests. JavaScript running in the browser can fetch data from a web server with code like this

function getCurrentVersionNumber(versionCallback) { // Note callback argument
    // Make a scripted HTTP request to a backend version API
    let request = new XMLHttpRequest();
    request.open("GET", "http://www.example.com/api/version");
    request.send();

    // Register a callback that will be invoked when the response arrives
    request.onload = function() {
        if (request.status === 200) {
            // If HTTP status is good, get version number and call callback.
            let currentVersion = parseFloat(request.responseText);
            versionCallback(null, currentVersion);
        } else {
            // Otherwise report an error to the callback
            versionCallback(response.statusText, null);
        }
    };
    // Register another callback that will be invoked for network errors
    request.onerror = request.ontimeout = function(e) {
        versionCallback(e.type, null);
    };
}

Client-side JavaScript code can use the XMLHttpRequest class plus callback functions to make HTTP requests and asynchronously handle the server’s response when it arrives.

The getCurrentVersionNumber() function defined here makes an HTTP request and defines event handlers that will be invoked when the server’s response is received or when a timeout or other error causes the request to fail.

Callbacks and Events in Node

The Node.js server-side JavaScript environment is deeply asynchronous and defines many APIs that use callbacks and events. The default API for reading the contents of a file, for example, is asynchronous and invokes a callback function when the contents of the file have been read.

const fs = require("fs"); // The "fs" module has filesystem-related APIs
let options = {           // An object to hold options for our program
    // default options would go here
};

// Read a configuration file, then call the callback function
fs.readFile("config.json", "utf-8", (err, text) => {
    if (err) {
        // If there was an error, display a warning, but continue
        console.warn("Could not read config file:", err);
    } else {
        // Otherwise, parse the file contents and assign to the options object
        Object.assign(options, JSON.parse(text));
    }

    // In either case, we can now start running the program
    startProgram(options);
});

Node’s fs.readFile() function takes a two-parameter callback as its last argument. It reads the specified file asynchronously and then invokes the callback. If the file was read successfully, it passes the file contents as the second callback argument. If there was an error, it passes the error as the first callback argument.

Node also defines a number of event-based APIs. The following function shows how to make an HTTP request for the contents of a URL in Node. It has two layers of asynchronous code handled with event listeners

const https = require("https");

// Read the text content of the URL and asynchronously pass it to the callback.
function getText(url, callback) {
    // Start an HTTP GET request for the URL
    request = https.get(url);

    // Register a function to handle the "response" event.
    request.on("response", response => {
        // The response event means that response headers have been received
        let httpStatus = response.statusCode;

        // The body of the HTTP response has not been received yet.
        // So we register more event handlers to to be called when it arrives.
        response.setEncoding("utf-8");  // We're expecting Unicode text
        let body = "";                  // which we will accumulate here.

        // This event handler is called when a chunk of the body is ready
        response.on("data", chunk => { body += chunk; });

        // This event handler is called when the response is complete
        response.on("end", () => {
            if (httpStatus === 200) {   // If the HTTP response was good
                callback(null, body);   // Pass response body to the callback
            } else {                    // Otherwise pass an error
                callback(httpStatus, null);
            }
        });
    });

    // We also register an event handler for lower-level network errors
    request.on("error", (err) => {
        callback(err, null);
    });
}

How Iterators Work in javascript

diego michel — Mon, 23 May 2022 00:19:27 +0000

The term “iteration” is derived from the Latin itero, meaning “repeat” or “do again.” In the context of software, “iteration” means repetitively performing a procedure multiple times, in sequence, and usually with an expectation of termination

let sum = 0;
for(let i of [1,2,3]) { // Loop once for each of these values
    sum += i;
}
sum   // => 6

Iterators can also be used with the ... operator to expand or “spread” an iterable object into an array initializer or function invocation

let chars = [..."abcd"]; // chars == ["a", "b", "c", "d"]
let data = [1, 2, 3, 4, 5];
Math.max(...data)        // => 5

//Iterators can be used with destructuring assignment:

let purpleHaze = Uint8Array.of(255, 0, 255, 128);
let [r, g, b, a] = purpleHaze; // a == 128

When you iterate a Map object, the returned values are [key, value] pairs, which work well with destructuring assignment in a for/of loop

let m = new Map([["one", 1], ["two", 2]]);
for(let [k,v] of m) console.log(k, v); // Logs 'one 1' and 'two 2'
If you want to iterate just the keys or just the values rather than the pairs, you can use the keys() and values() methods:

[...m]            // => [["one", 1], ["two", 2]]: default iteration
[...m.entries()]  // => [["one", 1], ["two", 2]]: entries() method is the same
[...m.keys()]     // => ["one", "two"]: keys() method iterates just map keys
[...m.values()]   // => [1, 2]: values() method iterates just map values

How Iterators Work

The for/of loop and spread operator work seamlessly with iterable objects, but it is worth understanding what is actually happening to make the iteration work.

There are three separate types that you need to understand to understand iteration in JavaScript. First, there are the iterable objects: these are types like Array, Set, and Map that can be iterated. Second, there is the iterator object itself, which performs the iteration. And third, there is the iteration result object that holds the result of each step of the iteration.

An iterable object is any object with a special iterator method that returns an iterator object. An iterator is any object with a next() method that returns an iteration result object.

And an iteration result object is an object with properties named value and done. To iterate an iterable object, you first call its iterator method to get an iterator object. Then, you call the next() method of the iterator object repeatedly until the returned value has its done property set to true.

The tricky thing about this is that the iterator method of an iterable object does not have a conventional name but uses the Symbol Symbol.iterator as its name. So a simple for/of loop over an iterable object iterable could also be written the hard way, like this:

let iterable = [99];
let iterator = iterable[Symbol.iterator]();
for(let result = iterator.next(); !result.done; result = iterator.next()) {
    console.log(result.value)  // result.value == 99
}

The iterator object of the built-in iterable datatypes is itself iterable. (That is, it has a method named Symbol.iterator that just returns itself.) This is occasionally useful in code like the following when you want to iterate though a “partially used” iterator:

let list = [1,2,3,4,5];
let iter = list[Symbol.iterator]();
let head = iter.next().value;  // head == 1
let tail = [...iter];          // tail == [2,3,4,5]

Implementing Iterable Objects

In order to make a class iterable, you must implement a method whose name is the Symbol Symbol.iterator. That method must return an iterator object that has a next() method. And the next() method must return an iteration result object that has a value property and/or a boolean done property.

//An iterable numeric Range class

/*
 * A Range object represents a range of numbers {x: from <= x <= to}
 * Range defines a has() method for testing whether a given number is a member
 * of the range. Range is iterable and iterates all integers within the range.
 */
class Range {
    constructor (from, to) {
        this.from = from;
        this.to = to;
    }

    // Make a Range act like a Set of numbers
    has(x) { return typeof x === "number" && this.from <= x && x <= this.to; }

    // Return string representation of the range using set notation
    toString() { return `{ x | ${this.from} ≤ x ≤ ${this.to} }`; }

    // Make a Range iterable by returning an iterator object.
    // Note that the name of this method is a special symbol, not a string.
    [Symbol.iterator]() {
        // Each iterator instance must iterate the range independently of
        // others. So we need a state variable to track our location in the
        // iteration. We start at the first integer >= from.
        let next = Math.ceil(this.from);  // This is the next value we return
        let last = this.to;               // We won't return anything > this
        return {                          // This is the iterator object
            // This next() method is what makes this an iterator object.
            // It must return an iterator result object.
            next() {
                return (next <= last)   // If we haven't returned last value yet
                    ? { value: next++ } // return next value and increment it
                    : { done: true };   // otherwise indicate that we're done.
            },

            // As a convenience, we make the iterator itself iterable.
            [Symbol.iterator]() { return this; }
        };
    }
}

for(let x of new Range(1,10)) console.log(x); // Logs numbers 1 to 10
[...new Range(-2,2)]

In addition to making your classes iterable, it can be quite useful to define functions that return iterable values. Consider these iterable-based alternatives to the map() and filter() methods of JavaScript arrays

// Return an iterable object that iterates the result of applying f()
// to each value from the source iterable
function map(iterable, f) {
    let iterator = iterable[Symbol.iterator]();
    return {     // This object is both iterator and iterable
        [Symbol.iterator]() { return this; },
        next() {
            let v = iterator.next();
            if (v.done) {
                return v;
            } else {
                return { value: f(v.value) };
            }
        }
    };
}

// Map a range of integers to their squares and convert to an array
[...map(new Range(1,4), x => x*x)]  // => [1, 4, 9, 16]

// Return an iterable object that filters the specified iterable,
// iterating only those elements for which the predicate returns true
function filter(iterable, predicate) {
    let iterator = iterable[Symbol.iterator]();
    return { // This object is both iterator and iterable
        [Symbol.iterator]() { return this; },
        next() {
            for(;;) {
                let v = iterator.next();
                if (v.done || predicate(v.value)) {
                    return v;
                }
            }
        }
    };
}

// Filter a range so we're left with only even numbers
[...filter(new Range(1,10), x => x % 2 === 0)]  // => [2,4,6,8,10]

Functional Programming in javascript

diego michel — Sun, 08 May 2022 22:09:42 +0000

JavaScript is not a functional programming language like Lisp or Haskell, but the fact that JavaScript can manipulate functions as objects means that we can use functional programming techniques in JavaScript. Array methods such as map() and reduce() lend themselves particularly well to a functional programming style.

Processing Arrays with Functions

Suppose we have an array of numbers and we want to compute the mean and standard deviation of those values. We might do that in nonfunctional style like this

let data = [1,1,3,5,5];  // This is our array of numbers

// The mean is the sum of the elements divided by the number of elements
let total = 0;
for(let i = 0; i < data.length; i++) total += data[i];
let mean = total/data.length;  // mean == 3; The mean of our data is 3

// To compute the standard deviation, we first sum the squares of
// the deviation of each element from the mean.
total = 0;
for(let i = 0; i < data.length; i++) {
    let deviation = data[i] - mean;
    total += deviation * deviation;
}
let stddev = Math.sqrt(total/(data.length-1));  // stddev == 2

We can perform these same computations in concise functional style using the array methods map() and reduce() like this

// First, define two simple functions
const sum = (x,y) => x+y;
const square = x => x*x;

// Then use those functions with Array methods to compute mean and stddev
let data = [1,1,3,5,5];
let mean = data.reduce(sum)/data.length;  // mean == 3
let deviations = data.map(x => x-mean);
let stddev = Math.sqrt(deviations.map(square).reduce(sum)/(data.length-1));
stddev  // => 2

This new version of the code looks quite different than the first one, but it is still invoking methods on objects, so it has some object-oriented conventions remaining. Let’s write functional versions of the map() and reduce() methods

const map = function(a, ...args) { return a.map(...args); };
const reduce = function(a, ...args) { return a.reduce(...args); };

With these map() and reduce() functions defined, our code to compute the mean and standard deviation now looks like this

const sum = (x,y) => x+y;
const square = x => x*x;

let data = [1,1,3,5,5];
let mean = reduce(data, sum)/data.length;
let deviations = map(data, x => x-mean);
let stddev = Math.sqrt(reduce(map(deviations, square), sum)/(data.length-1));
stddev  // => 2

Higher-Order Functions

A higher-order function is a function that operates on functions, taking one or more functions as arguments and returning a new function.

// This higher-order function returns a new function that passes its
// arguments to f and returns the logical negation of f's return value;
function not(f) {
    return function(...args) {             // Return a new function
        let result = f.apply(this, args);  // that calls f
        return !result;                    // and negates its result.
    };
}

const even = x => x % 2 === 0; // A function to determine if a number is even
const odd = not(even);         // A new function that does the opposite
[1,1,3,5,5].every(odd)         // => true: every element of the array is odd

This not() function is a higher-order function because it takes a function argument and returns a new function. As another example, consider the mapper() function that follows. It takes a function argument and returns a new function that maps one array to another using that function. This function uses the map() function defined earlier, and it is important that you understand how the two functions are different.

// Return a function that expects an array argument and applies f to
// each element, returning the array of return values.
// Contrast this with the map() function from earlier.
function mapper(f) {
    return a => map(a, f);
}

const increment = x => x+1;
const incrementAll = mapper(increment);
incrementAll([1,2,3])  // => [2,3,4]

Here is another, more general, example that takes two functions, f and g, and returns a new function that computes f(g())

// Return a new function that computes f(g(...)).
// The returned function h passes all of its arguments to g, then passes
// the return value of g to f, then returns the return value of f.
// Both f and g are invoked with the same this value as h was invoked with.
function compose(f, g) {
    return function(...args) {
        // We use call for f because we're passing a single value and
        // apply for g because we're passing an array of values.
        return f.call(this, g.apply(this, args));
    };
}

const sum = (x,y) => x+y;
const square = x => x*x;
compose(square, sum)(2,3)  // => 25; the square of the sum

Partial Application of Functions

The bind() method of a function f returns a new function that invokes f in a specified context and with a specified set of arguments. We say that it binds the function to an object and partially applies the arguments. The bind() method partially applies arguments on the left—that is, the arguments you pass to bind() are placed at the start of the argument list that is passed to the original function.

// The arguments to this function are passed on the left
function partialLeft(f, ...outerArgs) {
    return function(...innerArgs) { // Return this function
        let args = [...outerArgs, ...innerArgs]; // Build the argument list
        return f.apply(this, args);              // Then invoke f with it
    };
}

// The arguments to this function are passed on the right
function partialRight(f, ...outerArgs) {
    return function(...innerArgs) {  // Return this function
        let args = [...innerArgs, ...outerArgs]; // Build the argument list
        return f.apply(this, args);              // Then invoke f with it
    };
}

// The arguments to this function serve as a template. Undefined values
// in the argument list are filled in with values from the inner set.
function partial(f, ...outerArgs) {
    return function(...innerArgs) {
        let args = [...outerArgs]; // local copy of outer args template
        let innerIndex=0;          // which inner arg is next
        // Loop through the args, filling in undefined values from inner args
        for(let i = 0; i < args.length; i++) {
            if (args[i] === undefined) args[i] = innerArgs[innerIndex++];
        }
        // Now append any remaining inner arguments
        args.push(...innerArgs.slice(innerIndex));
        return f.apply(this, args);
    };
}

// Here is a function with three arguments
const f = function(x,y,z) { return x * (y - z); };
// Notice how these three partial applications differ
partialLeft(f, 2)(3,4)         // => -2: Bind first argument: 2 * (3 - 4)
partialRight(f, 2)(3,4)        // =>  6: Bind last argument: 3 * (4 - 2)
partial(f, undefined, 2)(3,4)  // => -6: Bind middle argument: 3 * (2 - 4)

These partial application functions allow us to easily define interesting functions out of functions we already have defined.

const increment = partialLeft(sum, 1);
const cuberoot = partialRight(Math.pow, 1/3);
cuberoot(increment(26))  // => 3

Partial application becomes even more interesting when we combine it with other higher-order functions. Here, for example, is a way to define the preceding not() function just shown using composition and partial application

const not = partialLeft(compose, x => !x);
const even = x => x % 2 === 0;
const odd = not(even);
const isNumber = not(isNaN);
odd(3) && isNumber(2)  // => true

We can also use composition and partial application to redo our mean and standard deviation calculations in extreme functional style

// sum() and square() functions are defined above. Here are some more:
const product = (x,y) => x*y;
const neg = partial(product, -1);
const sqrt = partial(Math.pow, undefined, .5);
const reciprocal = partial(Math.pow, undefined, neg(1));

// Now compute the mean and standard deviation.
let data = [1,1,3,5,5];   // Our data
let mean = product(reduce(data, sum), reciprocal(data.length));
let stddev = sqrt(product(reduce(map(data,
                                     compose(square,
                                             partial(sum, neg(mean)))),
                                 sum),
                          reciprocal(sum(data.length,neg(1)))));
[mean, stddev]  // => [3, 2]

Notice that this code to compute mean and standard deviation is entirely function invocations; there are no operators involved, and the number of parentheses has grown so large that this JavaScript is beginning to look like Lisp code.

Again, this is not a style that I advocate for JavaScript programming, but it is an interesting exercise to see how deeply functional JavaScript code can be.

support me for more content

Understanding closures in JavaScript

diego michel — Thu, 05 May 2022 04:04:45 +0000

Closures are functions that have access to variables from another function's scope. This is often accomplished by creating a function inside a function.

function createComparisonFunction(propertyName) {         
 return function(object1, object2) {
  let value1 = object1[propertyName];
  let value2 = object2[propertyName];

  if (value1 < value2) {
   return -1;
  } else if (value1> value2) {
   return 1;
  } else {
   return 0;
  }
 };
}

The highlighted lines in this example are part of the inner function (an anonymous function) that is accessing a variable (propertyName) from the outer function. Even after the inner function has been returned and is being used elsewhere, it has access to that variable. This occurs because the inner function's scope chain includes the scope of createComparisonFunction().

The activation object for the function is initialized with values for arguments and any named arguments. The outer function's activation object is the second object in the scope chain. This process continues for all containing functions until the scope chain terminates with the global execution context.

As the function executes, variables are looked up in the scope chain for the reading and writing of values.

function compare(value1, value2) {
 if (value1 < value2) {
  return -1;
 } else if (value1> value2) {
  return 1;
 } else {
  return 0;
 }
}

let result = compare(5, 10);

This code defines a function named compare() that is called in the global execution context. When compare() is called for the first time, a new activation object is created that contains arguments, value1, and value2. The global execution context's variable object is next in the compare() execution context's scope chain, which contains this, result, and compare.

The this Object

Using the this object inside closures introduces some complex behaviors. When a function is not defined using the arrow syntax, the this object is bound at runtime based on the context in which a function is executed: when used inside global functions, this is equal to window in nonstrict mode and undefined in strict mode, whereas this is equal to the object when called as an object method.

Anonymous functions are not bound to an object in this context, meaning the this object points to window unless executing in strict mode. Because of the way closures are written, however, this fact is not always obvious.

window.identity = 'The Window';

let object = {
 identity: 'My Object',      
 getIdentityFunc() {
  return function() {
   return this.identity;
  };
 }
};

console.log(object.getIdentityFunc()()); // 'The Window'

Remember that each function automatically gets two special variables as soon as the function is called: this and arguments. An inner function can never access these variables directly from an outer function. It is possible to allow a closure access to a different this object by storing it in another variable that the closure can access.

window.identity = 'The Window';

let object = {
 identity: 'My Object',      
 getIdentityFunc() {
  let that = this;
  return function() {
   return that.identity;
  };
 }
};

console.log(object.getIdentityFunc()()); // 'My Object'

It's unlikely that you'll intentionally use the patterns in lines two or three, but it is helpful to know that the value of this can change in unexpected ways when syntax is changed slightly.

[this link for more information about closures]https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

support me for more content

15 Essential GitHub Repos for Web Developers

diego michel — Sat, 30 Apr 2022 19:26:23 +0000

## 1. getify / You-Dont-Know-JS
A repo dedicated to the well-known You Don't Know JS book series by Kyle Simpson.

## 2. sindresorhus / awesome
An ultimate list of resources for all kinds of developers. From JavaScript to Fortran and from Docker to Rails.

## 3. EbookFoundation / free-programming-books
A giant list of completely free programming books in different languages.

## 4. kamranahmedse / developer-roadmap
Official repo of a roadmap.sh project. Highly recommend it for people who are only taking the first steps in IT.

### 5. anuraghazra / github-readme-stats
A very useful repo in order to bring your GitHub Readme to the next level.

### 6. jlevy/the-art-of-command-line
All you need for mastering the command line on one page.

### 7. mbeaudru/modern-js-cheatsheet
A modern cheatsheet for the JavaScript knowledge you will frequently encounter in your projects.

### 8. airbnb/javascript
JavaScript Style Guide from Airbnb. Also available on

### 9. thedaviddias/Front-End-Checklist
An exhaustive list of all the elements you need to have before launching your website to production.

### 10). ryanmcdermott/clean-code-javascript
The must-know Clean Code principles adapted for the JavaScript world.

### 11. bradtraversy/design-resources-for-developers
A curated and frequently updated collection of design resources for developers. Graphics, Fonts, Logos, Icons, you name it.

### 12. trekhleb/javascript-algorithms
Algorithms and data structures implemented in JavaScript with explanations and links to further readings.

### 13. microsoft/Web-Dev-For-Beginners
A 12-week, 24-lesson Web Dev curriculum made by Microsoft.

### 14. sdmg15/Best-websites-a-programmer-should-visit
A truly impressive list of all kinds of websites every programmer should visit.

### 15. FrontendMasters/learning-roadmap
A broad learning roadmap from Frontend Masters.

I hope you help me to continue uploading content
https://www.buymeacoffee.com/digomicortU

what is an object in javascript?

diego michel — Tue, 19 Apr 2022 03:50:59 +0000

An object is an unordered collection of properties, each of which has a name and a value. Property names are usually strings, so we can say that objects map strings to values. This string-to-value mapping goes by various names—you are probably already familiar with the fundamental data structure under the name “hash,” “hashtable,” “dictionary,” or “associative array.

Creating Objects
Objects can be created with object literals, with the new keyword, and with the Object.create() function. The subsections below describe each technique.

Object Literals
The easiest way to create an object is to include an object literal in your JavaScript code. an object literal is a comma-separated list of colon-separated name:value pairs, enclosed within curly braces.

let empty = {};                          // object with no properties
let point = { x: 0, y: 0 };              // Two numeric properties
let p2 = { x: point.x, y: point.y+1 };   // More complex values
let book = {
    "main title": "JavaScript",          // These property names include spaces,
    "sub-title": "The Definitive Guide", // and hyphens, so use string literals.
    for: "all audiences",                // for is reserved, but no quotes.
    author: {                            // The value of this property is
        firstname: "David",              // itself an object.
        surname: "Flanagan"
    }
};

Creating Objects with new
The new operator creates and initializes a new object.

let o = new Object();  // Create an empty object: same as {}.
let a = new Array();   // Create an empty array: same as [].
let d = new Date();    // Create a Date object representing the current time
let r = new Map();     // Create a Map object for key/value mapping

Prototypes
Almost every JavaScript object has a second JavaScript object associated with it. This second object is known as a prototype, and the first object inherits properties from the prototype.

All objects created by object literals have the same prototype object, and we can refer to this prototype object in JavaScript code as Object.prototype

Object.create()
Object.create() creates a new object, using its first argument as the prototype of that object.

const person = {
  isHuman: false,
  printIntroduction: function() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

Deleting Properties
The delete operator removes a property from an object. Its single operand should be a property access expression

delete book.author;          // The book object now has no author property.
delete book["main title"];   // Now it doesn't have "main title", either.

Testing Properties
JavaScript objects can be thought of as sets of properties, and it is often useful to be able to test for membership in the set—to check whether an object has a property with a given name

Serializing Objects
Object serialization is the process of converting an object’s state to a string from which it can later be restored. The functions JSON.stringify() and JSON.parse() serialize and restore JavaScript objects.

Object Methods
The toString() Method

The toString() method takes no arguments; it returns a string that somehow represents the value of the object on which it is invoked. JavaScript invokes this method of an object whenever it needs to convert the object to a string

This occurs, for example, when you use the + operator to concatenate a string with an object or when you pass an object to a method that expects a string

let s = { x: 1, y: 1 }.toString();  // s == "[object Object]"

Because this default method does not display much useful information, many classes define their own versions of toString() For example, when an array is converted to a string, you obtain a list of the array elements, themselves ea ch converted to a string, and when a function is converted to a string, you obtain the source code for the function. You might define your own toString() method like this:

let point = {
    x: 1,
    y: 2,
    toString: function() { return `(${this.x}, ${this.y})`; }
};
String(point)    // => "(1, 2)": toString() is used for string conversions

toLocaleString() Method
In addition to the basic toString() method, objects all have a toLocaleString(). The purpose of this method is to return a localized string representation of the object. The default toLocaleString() method defined by Object doesn’t do any localization itself: it simply calls toString() and returns that value

let point = {
    x: 1000,
    y: 2000,
    toString: function() { return `(${this.x}, ${this.y})`; },
    toLocaleString: function() {
        return `(${this.x.toLocaleString()}, ${this.y.toLocaleString()})`;
    }
};
point.toString()        // => "(1000, 2000)"
point.toLocaleString()  // => "(1,000, 2,000)": note thousands separators

The valueOf() Method
The valueOf() method is much like the toString() method, but it is called when JavaScript needs to convert an object to some primitive type other than a string—typically, a number. JavaScript calls this method automatically if an object is used in a context where a primitive value is required

let point = {
    x: 3,
    y: 4,
    valueOf: function() { return Math.hypot(this.x, this.y); }
};
Number(point)  // => 5: valueOf() is used for conversions to numbers
point > 4      // => true
point > 5      // => false
point < 6      // => true

toJSON() Method
Object.prototype doe not actually define a toJSON() method, but the JSON.stringify() method looks for a toJSON() method on any object it is asked to serialize. If this method exists on the object to be serialized, it is invoked, and the return value is serialized, instead of the original object.

let point = {
    x: 1,
    y: 2,
    toString: function() { return `(${this.x}, ${this.y})`; },
    toJSON: function() { return this.toString(); }
};
JSON.stringify([point])   // => '["(1, 2)"]'

Extended Object Literal Syntax
Shorthand Properties
Suppose you have values stored in variables x and y and want to create an object with properties named x and y that hold those values.

let x = 1, y = 2;
let o = {
    x: x,
    y: y
};

In ES6 and later, you can drop the colon and one copy of the identifier and end up with much simpler code:

let x = 1, y = 2;
let o = { x, y };
o.x + o.y  // => 3v

Computed Property Names
Sometimes you need to create an object with a specific property, but the name of that property is not a compile-time constant that you can type literally in your source code. Instead, the property name you need is stored in a variable or is the return value of a function that you invoke.

const PROPERTY_NAME = "p1";
function computePropertyName() { return "p" + 2; }

let o = {};
o[PROPERTY_NAME] = 1;
o[computePropertyName()] = 2;

It is much simpler to set up an object like this with an ES6 feature known as computed properties that lets you take the square brackets from the preceding code and move them directly into the object literal:

const PROPERTY_NAME = "p1";
function computePropertyName() { return "p" + 2; }

let p = {
    [PROPERTY_NAME]: 1,
    [computePropertyName()]: 2
};

p.p1 + p.p2 // => 3

Symbols as Property Names
The computed property syntax enables one other very important object literal feature. In ES6 and later, property names can be strings or symbols. If you assign a symbol to a variable or constant, then you can use that symbol as a property name using the computed property syntax:

const extension = Symbol("my extension symbol");
let o = {
    [extension]: { /* extension data stored in this object */ }
};
o[extension].x = 0; // This won't conflict with other properties of o

Spread Operator
you can copy the properties of an existing object into a new object using the “spread operator” ... inside an object literal:

let position = { x: 0, y: 0 };
let dimensions = { width: 100, height: 75 };
let rect = { ...position, ...dimensions };
rect.x + rect.y + rect.width + rect.height // => 175

If the object that is spread and the object it is being spread into both have a property with the same name, then the value of that property will be the one that comes last:

let o = { x: 1 };
let p = { x: 0, ...o };
p.x   // => 1: the value from object o overrides the initial value
let q = { ...o, x: 2 };
q.x   // => 2: the value 2 overrides the previous value from o.

Shorthand Methods
When a function is defined as a property of an object, we call that function, you would define a method in an object literal using a function definition expression just as you would define any other property of an object:

let square = {
    area: function() { return this.side * this.side; },
    side: 10
};
square.area() // => 100

the object literal syntax has been extended to allow a shortcut where the function keyword and the colon are omitted, resulting in code like this:

let square = {
    area() { return this.side * this.side; },
    side: 10
};
square.area() // => 100

5 good computer science books to start if you don't know how to start

diego michel — Sat, 09 Apr 2022 22:08:20 +0000

Computer science is the study of computers and computational systems. It is also a branch of engineering, mathematics, and science.

Computer scientists research and develop new computer technologies. They design software, networks, and other computer-based tools for people to use. Computer scientists may develop programs that help solve specific problems or automate processes. They may create games or other types of entertainment software that people can use to have fun on their own or with others.

Some computer scientists work on the design of chips (the microchips that are found in devices like laptops). They may work in teams to develop new chips for smartphones or tablets. Other computer scientists work on improving the security features of computers and networks so they can help protect information from being stolen by hackers.

1_ How Computers Really Work

How Computers Really Work is a hands-on guide to the computing ecosystem: everything from circuits to memory and clock signals, machine code, programming languages, operating systems, and the internet.

But you won’t just read about these concepts, you’ll test your knowledge with exercises, and practice what you learn with 41 optional hands-on projects. Build digital circuits, craft a guessing game, convert decimal numbers to binary, examine virtual memory usage, run your own web server, and more.

Explore concepts like how to:

•Think like a software engineer as you use data to describe a real world concept
•Use Ohm’s and Kirchhoff’s laws to analyze an electrical circuit
•Think like a computer as you practice binary addition and execute a program in your mind, step-by-step

*2_ Introduction to Computer Organization *

Introduction to Computer Organization gives programmers a practical understanding of what happens in a computer when you execute your code. You may never have to write x86-64 assembly language or design hardware yourself, but knowing how the hardware and software works will give you greater control and confidence over your coding decisions. We start with high level fundamental concepts like memory organization, binary logic, and data types and then explore how they are implemented at the assembly language level.

The goal isn’t to make you an assembly programmer, but to help you comprehend what happens behind the scenes between running your program and seeing “Hello World” displayed on the screen. Classroom-tested for over a decade, this book will demystify topics like:

•How to translate a high-level language code into assembly language
•How the operating system manages hardware resources with exceptions and interrupts
•How data is encoded in memory
•How hardware switches handle decimal data
•How program code gets transformed into machine code the computer understands
•How pieces of hardware like the CPU, input/output, and memory interact to make the entire system work.

3_ Complete A+ Guide to IT Hardware and Software

This is your all-in-one, real-world, full-color guide to connecting, managing, and troubleshooting modern devices and systems in authentic IT scenarios. Its thorough instruction built on the CompTIA A+ Core 1 (220-1001) and Core 2 (220-1002) exam objectives includes coverage of Windows 10, Mac, Linux, Chrome OS, Android, iOS, cloud-based software, mobile and IoT devices, security, Active Directory, scripting, and other modern techniques and best practices for IT management.

Award-winning instructor Cheryl Schmidt also addresses widely-used legacy technologiesmaking this the definitive resource for mastering the tools and technologies youll encounter in real IT and business environments. Schmidts emphasis on both technical and soft skills will help you rapidly become a well-qualified, professional, and customer-friendly technician.

Learning Objectives and chapter opening lists of CompTIA A+ Certification Exam Objectives make sure you know exactly what youll be learning, and you cover all you need to know

Hundreds of photos, figures, and tables present information in a visually compelling full-color design

Practical Tech Tips provide real-world IT tech support knowledge

4_ Computer Science Illuminated, 7th Edition

Fully revised aDesigned for the introductory computing and computer science course, the student-friendly Computer Science Illuminated, Seventh Edition provides students with a solid foundation for further study, and offers non-majors a complete introduction to computing. Fully revised and updated, the Seventh Edition of this best-selling text retains the accessibility and in-depth coverage of previous editions, while incorporating all-new material on cutting-edge issues in computer science. Authored by the award-winning team Nell Dale and John nd updated, the Seventh Edition of the best-selling text Computer Science Illuminated retains the accessibility and in-depth coverage of previous editions, while incorporating all-new material on cutting-edge issues in computer science. Authored by the award-winning Nell Dale and John Lewis, Computer Science Illuminated’s unique and innovative layered approach moves through the levels of computing from an organized, language-neutral perspective.

5_ Computer Systems, 5th Edition

Computer Systems, Fifth Edition provides a clear, detailed, step-by-step introduction to the central concepts in computer organization, assembly language, and computer architecture. It urges students to explore the many dimensions of computer systems through a top-down approach to levels of abstraction. By examining how the different levels of abstraction relate to one another, the text helps students look at computer systems and their components as a unified concept.

5 books to learn algorithms and Data Structures

diego michel — Wed, 30 Mar 2022 22:21:54 +0000

What is an Algorithm?
an algorithm (from the Latin, Dixit algorithms and this from the Greek arithmos, which means “number”, perhaps also influenced by the name of the Persian mathematician Al-Khuarismi) 1 is a set of defined and unambiguous instructions or rules, ordered and finite that allows, typically, to solve a problem, perform a computation, process data and carry out other tasks or activities.2 Given an initial state and an input, following the successive steps a final state is reached and a solution is obtained. Algorithms are the object of study of algorithm

1- 40 Algorithms Every Programmer Should Know

Algorithms have always played an important role in both the science and practice of computing. Beyond traditional computing, the ability to use algorithms to solve real-world problems is an important skill that any developer or programmer must-have. This book will help you not only to develop the skills to select and use an algorithm to solve real-world problems but also to understand how it works.

You’ll start with an introduction to algorithms and discover various algorithm design techniques, before exploring how to implement different types of algorithms, such as searching and sorting, with the help of practical examples. As you advance to a more complex set of algorithms, you’ll learn about linear programming, page ranking, and graphs, and even work with machine learning algorithms, understanding the math and logic behind them.

Further on, case studies such as weather prediction, tweet clustering, and movie recommendation engines will show you how to apply these algorithms optimally. Finally, you’ll become well versed in techniques that enable parallel processing, giving you the ability to use these algorithms for compute-intensive tasks.

2-Advanced Algorithms and Data Structures

Advanced Algorithms and Data Structures introduces a collection of algorithms for complex programming challenges in data analysis, machine learning, and graph computing. You’ll discover cutting-edge approaches to a variety of tricky scenarios. You’ll even learn to design your own data structures for projects that require a custom solution.

3- Learning Algorithms

When it comes to writing efficient code, every software professional needs to have an effective working knowledge of algorithms. In this practical book, author George Heineman (Algorithms in a Nutshell) provides concise and informative descriptions of key algorithms that improve coding.

Software developers, testers, and maintainers will discover how algorithms solve computational problems creatively.

Each chapter builds on earlier chapters through eye-catching visuals and a steady rollout of essential concepts, including an algorithm analysis to classify the performance of every algorithm presented in the book.

At the end of each chapter, you’ll get to apply what you’ve learned to a novel challenge problem — simulating the experience you might find in a technical code interview.

4- Grokking Algorithms

Grokking Algorithms is a friendly take on this core computer science topic. In it, you’ll learn how to apply common algorithms to the practical programming problems you face every day.

You’ll start with tasks like sorting and searching. As you build up your skills, you’ll tackle more complex problems like data compression and artificial intelligence. Each carefully presented example includes helpful diagrams and fully annotated code samples in Python.

By the end of this book, you will have mastered widely applicable algorithms as well as how and when to use them.

5- Dive Into Algorithms

Dive Into Algorithms is a wide-ranging, Pythonic tour of many of the world’s most interesting algorithms. With little more than a bit of computer programming experience and basic high-school math, you’ll explore standard computer science algorithms for searching, sorting, and optimization; human-based algorithms that help us determine how to catch a baseball or eat the right amount at a buffet; and advanced algorithms like ones used in machine learning and artificial intelligence.

You’ll even explore how ancient Egyptians and Russian peasants used algorithms to multiply numbers, how the ancient Greeks used them to find greatest common divisors, and how Japanese scholars in the age of samurai designed algorithms capable of generating magic squares.

You’ll explore algorithms that are useful in pure mathematics and learn how mathematical ideas can improve algorithms. You’ll learn about an algorithm for generating continued fractions, one for quick calculations of square roots, and another for generating seemingly random sets of numbers.

Codeless Data Structures and Algorithms : Learn DSA Without Writing a Single Line of Code

In the era of self-taught developers and programmers, essential topics in the industry are frequently learned without a formal academic foundation. A solid grasp of data structures and algorithms (DSA) is imperative for anyone looking to do professional software development and engineering, but classes in the subject can be dry or spend too much time on theory and unnecessary readings.

Regardless of your programming language background,Codeless Data Structures and Algorithms has you covered.

In everyday life, algorithms are frequently used to solve certain problems. Some examples are user manuals, which show algorithms for using a device, or instructions that a worker receives from his employer.

Some examples in mathematics are the multiplication algorithm, to calculate the product, the division algorithm to calculate the quotient of two numbers, the Euclid algorithm to obtain the greatest common divisor of two positive integers, or the Gaussian method to solve a system of linear equations.

In programming terms, an algorithm is a sequence of logical steps that allows you to solve a problem.

The 5 Best Programming Languages To Learn To Program

diego michel — Mon, 28 Mar 2022 01:59:24 +0000

If you are looking to write your first line of code, you are probably wondering which are the most widely used programming languages or how many programming languages exist. If you want to enter this world or open up to better job fields, you must know which are the best programming languages and, thus, decide what technology to learn, especially if you are starting your career in the web development industry.

Today, more than ever, you will find many programming language options for creating large software and hardware projects. Some will help you more than others, but this will depend on what you are looking to solve.

1. Python
Created by Guido Van Rossum in the 90s, this multi-paradigm and multipurpose language was conceived as a “side-project” like many technologies on this list of most used programming languages. Python has gained a lot of relevance in very popular industries such as Artificial Intelligence, Machine Learning, among others. In 2008 it had a great growth when big changes and new functionalities were introduced in its version Python 3. In fact, the popularity of Python has increased by 30.17% in 2021 compared to 2020, according to the PYPL index. Therefore, we will continue to see great advances and projects brought to reality thanks to this programming language .

2. Javascript
If you are already in the world of web programming, you will surely know that this is one of the most powerful and flexible programming languages. It was created 25 years ago during the “war of web browsers” by employees of the Netscape company.

According to the TIOBE Index, JavaScript has consistently ranked in the top 10 most used programming languages worldwide and one of the most popular for several years. This object-oriented, prototyping, and multiparadigm programming language is interpreted, that is, it does not require compilation, since it is designed to run in the browser.

And it is worth mentioning that JavaScript is supported by a huge community. It is the most widely used web programming language in the world, since practically all websites — even if they were built with another language — have some JavaScript in them.

That is why its great relevance when we talk about the front-end. In addition, large companies have led efforts creating frameworks such as ReactJS from Facebook, AngularJS from Google or NodeJS, which allow code is written in JavaScript to run on the server side, that is, designed for the back-end.

3. Java
Java is one of the most disruptive programming languages in history, since in the 90s many companies developed their tools mainly in C ++, which was complicated and dependent on the platform on which it was developed. James Gosling and his team created technology that promised to be easier to learn. That is why it is one of the most widely used programming languages today.

This is an object-oriented programming language independent of its platform, so the code that has been written on one machine will also run on another, even with different operating systems thanks to the Java Virtual Machine (or JVM for its acronym).

4. TypeScript
The growth of TypeScript was exponential in 2020 since Stack Overflow studies at the beginning of that year showed that this relatively new language would be located in the last places of popularity, but at the end of the year, it was among the first 5 most used programming languages in the world.

This language compiles into native JavaScript and becomes TypeScript code, going through the same JS processes without the browser ‘finding out that this happened. In addition, this programming language offers a complete description of each component of the code and can be used to develop large applications with strict syntax and fewer errors.

This technology created in 2012 by Microsoft has many functionalities or mechanisms of object-oriented programming, making any application or site built with this programming language more scalable.

5. PHP
This great multipurpose programming language was created in the 90s, initially thought of as a Common Input Interface (or CGI) by Greenlander Rasmus Lerdorf, who used it to maintain his own website (hence the name of this language: “personal homepage”). Since then, PHP has evolved to become the programming language that it is today, used mainly to develop applications on the server-side, guaranteeing stable web pages with good performance.

Today we see PHP in sixth place in this 2021 programming language ranking, as its popularity has been declining since the arrival of JavaScript in the same decade. However, we must thank this programming language very much, since it has been the technology that has given life to many great tools and platforms that we continue to use today, such as WordPress, Facebook, Gmail, Wikipedia, among others.