Des concepts JavaScript sympas que vous trouverez également sympas

Après quelques années de travail avec JavaScript, j'ai réalisé que bon nombre des problèmes auxquels je faisais face devenaient difficiles simplement parce que je ne connaissais pas certains concepts essentiels. Si j'avais maîtrisé ces sujets plus tôt, j'aurais certainement évité un certain stress.

J'ai donc apporté 4 concepts qui me sont restés en tête et que j'étais simplement EXCITÉ lorsque j'ai appris et je recommande de jeter un œil et de comprendre comment travailler avec JavaScript, en particulier pour les personnes qui débutent et qui ont déjà au moins le concepts de base de la langue.

1. Fermetures

Les fermetures sont l'un des concepts les plus puissants et souvent déroutants de JavaScript, lié à la portée. Ils permettent à une fonction de "se souvenir" de l'environnement dans lequel elle a été créée, même après que cet environnement ne fonctionne plus. Ceci est utile pour créer des variables "privées" et gérer l'état sans polluer la portée globale.

Exemple :

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

Dans l'exemple ci-dessus, la fonction interne accède à la variable compteur, qui appartient à la fonction externe, même après que myCounter a déjà renvoyé des valeurs en utilisant soit obtenirValor, soit l'incrémenter. Cela est possible grâce à la fermeture.

2. Héritage prototype

Bien que JavaScript supporte les classes et l'héritage de classes (un concept bien établi dans des langages comme Java ou C), il se différencie en adoptant nativement un modèle d'héritage basé sur un prototype. En JavaScript, chaque objet possède un « prototype », qui sert en quelque sorte de modèle (modèle), permettant de partager des propriétés et des méthodes entre les objets. Ce modèle d'héritage prototypique est l'une des caractéristiques les plus fondamentales du langage, le rendant plus flexible par rapport à l'héritage traditionnel basé sur les classes.

Exemple :

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

Ici, camaro hérite de la méthode Horn du prototype Carro, démontrant l'idée d'héritage en JavaScript. Grâce à la chaîne de prototypes, nous sommes capables de partager des comportements entre différents objets sans avoir besoin de dupliquer le code.

3. Curry

Le currying est une technique qui transforme une fonction qui prend plusieurs arguments en une série de fonctions qui prennent un seul argument à la fois. Cette approche est utile pour créer des fonctions réutilisables et composer de nouvelles fonctions de manière plus flexible.

Exemple :

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

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

Dans l'exemple, add(5) renvoie une nouvelle fonction qui prend le deuxième argument, vous permettant de réutiliser la logique dans différentes parties du code.

4. Boucle d'événement et rappels

La boucle d'événement est un concept fondamental pour comprendre comment JavaScript gère les opérations asynchrones - et bon sang, comprendre cela a changé la donne dans mon apprentissage de JavaScript. Ce qu'il fait essentiellement, c'est surveiller la pile d'appels (où le code synchrone est exécuté) et la file d'attente d'événements (où les tâches asynchrones, telles que les rappels, les événements et les promesses, sont stockées). Lorsque la pile d'appels est vide, la boucle d'événements prend les tâches de la file d'attente d'événements et les place sur la pile pour être exécutées. Cela garantit que JavaScript peut continuer à exécuter le code sans bloquer d'autres opérations, ce qui est essentiel pour maintenir la fluidité des applications qui gèrent les événements d'E/S, les minuteries et les interactions avec le DOM.
Exemple :

console.log('Início');

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

console.log('Fim');

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

Même si setTimeout est défini sur 0 milliseconde, il est placé dans la file d'attente des événements et ne sera exécuté qu'après le traitement du code synchrone (tel que console.log).
J'ai l'intention de détailler cela plus en détail et avec des images dans un autre article axé sur ce concept, car pour moi c'était très important de comprendre et je suis sûr que ce sera la même chose pour beaucoup de gens.

Vous souhaitez en savoir plus sur l’un de ces concepts ou vous avez des questions spécifiques ? Laissez-le dans les commentaires et j'y jetterai un œil !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!