Cool JavaScript concepts that you'll find cool too

After a few years working with JavaScript, I realized that many of the problems I faced became challenging simply because I didn't know some essential concepts. If I had mastered these topics earlier, I would certainly have avoided some stress.

So I brought 4 concepts that somehow stuck in my head and that I was simply EXCITED when I learned and I recommend taking a look and understanding how to work with JavaScript, especially for people who are starting out and already have at least the basic concepts of the language.

1. Closures

Closures are one of the most powerful and often confusing concepts in JavaScript, related to scope. They allow a function to "remember" the environment in which it was created, even after that environment is no longer running. This is useful for creating "private" variables and managing state without polluting the global scope.

Example:

function criarContador() {
    let contador = 0;

    return {
        incrementar: function() {
            contador++;
            return contador;
        },
        obterValor: function() {
            return contador;
        }
    };
}

const meuContador = criarContador();

console.log(meuContador.obterValor()); // 0
console.log(meuContador.incrementar()); // 1
console.log(meuContador.incrementar()); // 2
console.log(meuContador.obterValor()); // 2

In the example above, the internal function accesses the counter variable, which belongs to the external function, even after myCounter has already returned values ​​using eitherobtainValor or increment it. This is possible thanks to closure.

2. Prototypal Inheritance

Although JavaScript supports classes and class inheritance (a concept well established in languages ​​like Java or C), it differentiates itself by natively adopting a prototype-based inheritance model. In JavaScript, every object has a "prototype", which serves as a kind of blueprint (template), allowing properties and methods to be shared between objects. This prototypical inheritance model is one of the most fundamental features of the language, making it more flexible compared to traditional class-based inheritance.

Example:

function Carro(nome) {
    this.nome = nome;
}

Carro.prototype.buzina = function() {
    console.log(`${this.nome} faz um som de buzina`);
}

const camaro = new Carro('Camaro');
camaro.buzina(); // Camaro faz um som de buzina

Here, camaro inherits the horn method from the Carro prototype, demonstrating the idea of ​​inheritance in JavaScript. Through the prototype chain, we are able to share behaviors between different objects without the need to duplicate the code.

3. Currying

Currying is a technique that transforms a function that takes multiple arguments into a series of functions that take a single argument at a time. This approach is useful for creating reusable functions and composing new functions in a more flexible way.

Example:

function somar(a) {
    return function(b) {
        return a + b;
    }
}

const somarTres = somar(3);
console.log(somarTres(3)); // 6

In the example, add(5) returns a new function that takes the second argument, allowing you to reuse the logic in different parts of the code.

4. Event Loop and Callbacks

The Event Loop is a fundamental concept for understanding how JavaScript handles asynchronous operations — and boy, understanding this was a game changer in my JavaScript learning. What it basically does is monitor the Call Stack (where the synchronous code is executed) and the Event Queue (where asynchronous tasks, such as callbacks, events and promises, are stored). When the Call Stack is empty, the Event Loop takes tasks from the Event Queue and puts them on the stack to be executed. This ensures that JavaScript can continue running the code without blocking other operations, something essential for maintaining the fluidity of applications that deal with I/O events, timers, and interactions with the DOM.
Example:

console.log('Início');

setTimeout(() => {
    console.log('Timer expirou');
}, 0);

console.log('Fim');

// Saída:
// Início
// Fim
// Timer expirou

Even if setTimeout is set to 0 milliseconds, it is placed in the Event Queue and will only be executed after synchronous code (such as console.log) has been processed.
I intend to detail this in more detail and with images in another article focused on this concept, because for me it was very important to understand and I'm sure it will be the same for many people.

Would you like to know more about any of these concepts or do you have specific questions? Leave it in the comments and I'll take a look!

The above is the detailed content of Cool JavaScript concepts that you'll find cool too. For more information, please follow other related articles on the PHP Chinese website!