Article original : How to Learn JavaScript Effectively – Tips and Learning Strategies

JavaScript est un langage de programmation largement utilisé qui domine la pile technologique du développement logiciel depuis plus d'une décennie.

On trouve JavaScript dans les applications web, les applications mobiles ou les applications pour votre bureau.

Selon une enquête réalisée par Statista en 2022, les communautés de développeurs JavaScript dans le monde comptent environ 17,4 millions de membres, et elles sont en croissance.

Il existe également un certain nombre de frameworks et de bibliothèques JavaScript, comme React, Angular et Vue, qui résolvent divers cas d'utilisation et problèmes clients. Et il existe de nombreuses ressources disponibles en ligne et dans les manuels pour apprendre JavaScript.

Malgré la grande utilité et la notoriété du langage, de nombreux développeurs JavaScript ont encore besoin d'aide pour apprendre le langage en toute confiance. Ils peuvent être capables d'accomplir leurs tâches de développement quotidiennes en utilisant JavaScript avec un peu d'aide, mais peuvent avoir besoin de clarifications sur les concepts sous-jacents. Et ils peuvent avoir du mal à déboguer les problèmes et à résoudre les problèmes des clients à temps.

Cet article n'a pas pour but de vous enseigner JavaScript. Ce serait merveilleux si vous pouviez réellement apprendre JavaScript à partir d'un article aussi court, n'est-ce pas ?

Au lieu de cela, cet article vise à vous enseigner Comment apprendre JavaScript pour vous aider à devenir un développeur JavaScript confiant. Je parlerai des stratégies et des concepts essentiels à comprendre avant d'apprendre JavaScript pour rendre votre apprentissage plus efficace.

Si vous aimez apprendre à partir de contenu vidéo, cet article est également disponible sous forme de tutoriel vidéo ici : ud83d de42

Retour à la Maternelle

Dans vos premières années, lorsque vous appreniez une langue parlée ou écrite (comme l'anglais, l'espagnol, l'hindi, et autres), avez-vous commencé à former des phrases sans connaître les mots ? Votre enseignant a-t-il essayé de vous faire épeler des mots sans vous enseigner l'alphabet ? Probablement pas !

Il en va de même pour tout langage de programmation. Vous devez savoir comment l'apprendre progressivement. Comment les choses fonctionnent-elles sous le capot ? Pourquoi certains concepts existent-ils ? Sur quoi ne devez-vous pas vous concentrer ? En résumé, vous devez comprendre les concepts fondamentaux.

Tout comme vous devez comprendre les concepts grammaticaux et orthographiques de base pour pouvoir former correctement des phrases dans votre propre langue, les langages de programmation ont également besoin de "quelque chose" pour fonctionner correctement. Les règles et la grammaire d'un langage de programmation sont appelées syntaxe.

Au fait, fait amusant : si vous pensez que le mot Kindergarten dans le titre est une faute d'orthographe, vous vous trompez, comme je l'ai été :

Je souligne cela pour insister sur le fait que la syntaxe est aussi importante que les concepts !

Avec tout cela en tête, concentrons-nous sur l'apprentissage de JavaScript.

Comment utiliser les Bulles de sujets JavaScript

Sans aucun doute, JavaScript est vaste ! En tant que langage de programmation, il couvre tous les aspects essentiels du développement logiciel :

  • Portée
  • Programmation fonctionnelle
  • Types de données
  • Structures de données
  • Opérations
  • Expressions
  • Gestion de la mémoire
  • Réflexion
  • POO
  • API Web
  • Programmation asynchrone
  • Gestion des exceptions
  • Événements
  • Immuabilité
  • DOM
  • Et bien plus encore

La liste s'allongera si nous continuons, mais notre objectif est différent. Vous devez simplement réaliser que le nombre de sujets que vous devrez peut-être apprendre pour maîtriser le langage est assez grand. Mais je n'ai pas l'intention de vous faire peur !

Image Bulles de sujets JavaScript

Si vous êtes un développeur JavaScript débutant, vous vous demandez peut-être :

  • Puis-je le faire ?
  • Combien de cours et de tutoriels devrais-je suivre ?
  • N'est-ce pas trop ?
  • Comment puis-je me souvenir de tout ce que j'apprends ?
  • Dans l'ensemble, comment puis-je réellement apprendre JavaScript ?

Trouvons les réponses ensemble alors que nous lisons la suite.

Présentation d'un modèle d'apprentissage JavaScript

Permettez-moi de vous présenter un modèle conceptuel pour apprendre JavaScript. Le modèle consiste en des stratégies et des concepts que vous devez adopter pour apprendre JavaScript efficacement.

Image Modèle d'apprentissage JavaScript

Le modèle est résumé en ces six points, que je développerai bientôt.

2705 Tout d'abord, vous devez apprendre les Concepts de programmation.

2705 Concepts >>> Syntaxe.

2705 Créez une carte mentale des sujets connexes.

2705 Pratiquez progressivement.

2705 Vous n'avez pas à vous soucier de la plupart des choses étranges de JavaScript.

2705 Construisez des projets qui relient les concepts.

Concepts de programmation vs JavaScript en particulier

Pour commencer, séparez les concepts de programmation de base de JavaScript spécifiquement. Ces concepts de programmation de base sont communs à la plupart des langages de programmation.

Les apprendre correctement vous aidera à assimiler facilement n'importe quel langage de programmation. Certains concepts de programmation fondamentaux sont :

  • Variables : En programmation, les variables sont les noms lisibles par l'homme que vous donnez à un emplacement mémoire qui stocke une valeur. Par exemple, car, students, et oranges sont des noms de variables.
  • Valeurs : Une valeur est quelque chose que nous manipulons généralement, changeons ou utilisons pour créer d'autres valeurs. Nous attribuons des valeurs aux variables. Par exemple, Honda peut être la valeur de la variable car.
  • Types de données : Les types de données indiquent le type particulier d'une valeur comme nombre, chaîne, booléen, et autres.
  • Opérateurs : Les opérateurs en programmation sont des symboles qui nous aident à effectuer des opérations comme l'addition, la soustraction, la multiplication, la concaténation, et ainsi de suite.
  • Conditions et flux de contrôle : Les conditions en programmation sont des instructions qui entraînent certaines actions. C'est comme si cela se produit, alors faites cela, sinon faites autre chose.
  • Boucles : Les boucles en programmation consistent à répéter un ensemble de tâches dans la même séquence sous une condition spécifique. Il existe différentes boucles disponibles dans les langages de programmation, et certaines courantes sont la boucle for, la boucle while, et la boucle do-while.
  • Fonctions : Les fonctions sont un bloc de code que vous souhaitez exécuter encore et encore plutôt que de le répéter partout. Vous créez une fonction en lui donnant un nom et un ensemble d'instructions à exécuter lorsque vous l'invoquez.
  • Environnement : L'environnement de programmation permet aux développeurs de coder, tester, construire et déployer. Le principe de base reste le même pour chaque aspect de l'environnement, mais la technologie peut différer pour différents langages de programmation.
  • Débogage : Le débogage est l'art de trouver et de corriger les problèmes dans votre code. Vous devez savoir comment déboguer du code, quel que soit le langage dans lequel le code a été écrit.

Tous les points mentionnés ci-dessus sont des concepts de programmation de base. En tant que développeur JavaScript, vous devez être familier avec ces concepts.

Concepts >>> Syntaxe

Nous avons discuté des différences entre les concepts de programmation et la syntaxe de programmation. Les deux sont importants. Mais, comprendre les concepts nous aide mieux que mémoriser la syntaxe.

Prenons un exemple de problème que nous pourrions résoudre en codant.

L'énoncé du problème : Si la variable couleur a la valeur "red", retournez une balle rouge. Sinon, retournez une balle verte.

Le code JavaScript pour résoudre ce problème est assez simple :

if (color === "red") {
    // return a red ball 
} else if(color === "green") {
    // return a green ball
}

Mais si vous mémorisez la syntaxe ci-dessus et n'essayez pas de comprendre les concepts qui la sous-tendent, vous pourriez avoir des problèmes à l'avenir. Si quelqu'un modifie légèrement l'énoncé du problème, votre syntaxe de code mémorisée peut ne pas fonctionner pour produire les résultats attendus.

Dans cet énoncé de problème, le concept de programmation utilisé est le contrôle de flux. Donc, si vous dessinez le contrôle de flux sous forme de diagramme et l'associez à votre syntaxe de code, vous imprégnerez la logique dans votre cerveau de manière plus permanente. Voici à quoi cela ressemblerait :

Image Diagramme montrant le concept de flux de contrôle. Rappelez-vous : Concept d'abord, Syntaxe ensuite.

Si l'énoncé du problème change, vous changez le flux, le redessinez et le mappez à votre code.

La Carte Mentale des Sujets JavaScript

Lorsque vous choisissez un sujet JavaScript à apprendre, vous commencez par parcourir les ressources que vous trouvez utiles. C'est une excellente première étape, mais ce n'est pas suffisant pour un apprentissage efficace.

La méthode efficace consiste à créer une carte mentale des sujets JavaScript et à guider votre apprentissage. Cela vous aidera à bien comprendre le concept et à vous familiariser avec les concepts connexes. Un autre avantage des cartes mentales est qu'avec plusieurs sujets, vous formez une intersection de sous-sujets communs à parcourir plusieurs fois.

Voici un exemple de carte mentale pour apprendre le mot-clé this en JavaScript. Comme vous pouvez le voir, le flux des sujets évolue logiquement à travers des concepts progressifs pour vous aider à obtenir une compréhension fondamentale du mot-clé this en JavaScript.

Image Carte Mentale - Le mot-clé 'this'

Un autre exemple pourrait être la compréhension des promesses JavaScript. Il serait utile de commencer par les fonctions, puis la pile d'appels et le contexte d'exécution, puis d'apprendre les files d'attente de tâches et de travaux et enfin les promesses.

Image Carte Mentale - Les promesses

Cela peut sembler un processus chronophage, mais suivre l'approche de la carte mentale pour apprendre les fondamentaux vous fera gagner beaucoup de temps à long terme.

Pratiquez Progressivement

La pratique fait de vous un meilleur programmeur. À mesure que vous commencez à comprendre les concepts JavaScript, vous devez les pratiquer. Pratiquez progressivement pour rendre votre apprentissage engageant et continu. Mais que signifie la pratique progressive ?

Dans une stratégie de pratique progressive, vous commencez par un exemple de code pratique d'un concept. Lorsque vous passez au concept suivant dans la carte mentale, vous construisez votre prochain exemple de code pratique sur la base de l'exemple précédent.

Supposons que vous appreniez les fonctions JavaScript et que vous pratiquiez en créant des extraits de code. Ensuite, lorsque vous apprenez la portée ou la chaîne de portée, étendez le même exemple que vous avez utilisé pour les fonctions et injectez les concepts de portée et de chaîne de portée.

Par exemple, vous apprenez à écrire une fonction qui additionne deux nombres. Vous pourriez créer une fonction sum() comme ceci :

var sum = function(a,b) {
  return a + b;
}

En créant cette fonction, vous aurez appris :

  • Comment créer une fonction
  • Comment passer des paramètres à une fonction
  • Comment retourner un résultat d'une fonction
  • Comment utiliser une fonction comme expression

Ensuite, une étape logique sera d'appeler/invoquer la fonction.

sum(2,3); // produit 5 comme résultat

Super ! Maintenant, lorsque vous apprenez la portée, vous pouvez utiliser la même fonction pour pratiquer la portée fonctionnelle.

Jetez un coup d'œil à l'exemple ci-dessous. Ici, la fonction calc() utilise la même fonction sum() que nous avons apprise il y a un moment.

function calc() {
  var extra = 5;
  var sum = function(a,b) {
    return a + b;
  }
  let total = extra + sum(2,3);
}
console.log(extra); // extra est-il accessible ici ?
calc();
console.log(total); // total est-il accessible ici ?

Dans la fonction calc(), nous essayons d'expérimenter avec la portée de quelques variables. De la même manière, vous pouvez maintenant écrire un exemple de chaîne de portée en utilisant la même fonction calc() (et je vous laisse le soin de laisser libre cours à votre créativité).

Cette stratégie présente quelques avantages :

  • Comme vos concepts sont connectés dans une carte mentale, vos exemples sont également connectés sujet par sujet.
  • À l'avenir, lorsque vous rafraîchirez votre mémoire en regardant l'un des exemples, il vous sera plus facile de naviguer en avant et en arrière pour relier les points.

Relier les Concepts aux Projets

Tout en pratiquant les concepts de manière progressive, il est essentiel de créer des projets. Lorsque vous suivez un cours ou un tutoriel, vous avez l'occasion de pratiquer le projet exact que votre instructeur enseignera. C'est bien, mais cela peut être mieux.

Après avoir suivi l'instructeur et terminé le projet, essayez de faire une pause. Réfléchissez, que pouvez-vous construire d'autre avec le concept que vous venez d'apprendre ? Vous êtes sur la bonne voie si vous pouvez penser à une idée ou à un cas d'utilisation à construire en utilisant le concept. Ensuite, essayez de le mettre en œuvre.

Vous pouvez rencontrer des difficultés lors de la phase de mise en œuvre. Revenez à vos cartes mentales de sujets. Trouvez les concepts que vous devez réviser pour éliminer les blocages. Lisez ces concepts, pratiquez-les progressivement et revenez au projet. C'est ainsi que vous apprenez efficacement !

Voici quelques idées de projets à réaliser pour vous lancer pendant que vous apprenez :

JavaScript est-il étrange ?

Les rumeurs disent que JavaScript est étrange ! Eh bien, cela peut être le cas, surtout lorsque vous voyez du code comme ces exemples :

+[] == +![]; // retourne true

Number([]); // retourne 0

null >= 0; // retourne true

0.1 + 0.2 == 0.3 // Qui pourrait le croire, cela retourne false !

[10, 1, 3].sort() // Retourne, [1, 10, 3]

Comment pouvez-vous expliquer cela ? La seule façon d'expliquer ces particularités est d'expliquer leurs concepts sous-jacents. En dehors de quelques petites choses étranges (par exemple, le type de null est toujours un object en JavaScript), vous pouvez expliquer la plupart des syntaxes en comprenant les concepts sous-jacents. Vous devrez essayer de le faire pour comprendre ces choses étranges.

Alors, que faire ensuite ?

J'espère que cet article fournit des informations et un chemin moins intimidant pour apprendre JavaScript efficacement. Je travaille sur JavaScript et les frameworks/bibliothèques basés sur celui-ci depuis plus d'une décennie. Tout ce que j'ai partagé ici provient de mon expérience dans l'apprentissage approfondi du langage.

Essayez de suivre les six points que vous avez appris sur le modèle d'apprentissage JavaScript. N'hésitez pas à les ajuster en fonction de vos besoins. Si vous avez d'autres questions, n'hésitez pas à me contacter.

Restez en contact.

  • ABONNEZ-VOUS à ma chaîne YouTube si vous souhaitez apprendre JavaScript, ReactJS, Node.js, Git, et tout sur le développement web de manière pratique.
  • Suivez-moi sur Twitter et LinkedIn si vous ne voulez pas manquer la dose quotidienne de conseils en développement web et en programmation.
  • Suivez-moi sur Showwcase pour un apprentissage basé sur la communauté.
  • Vous pouvez me contacter pour un appel.

À bientôt avec mon prochain article. En attendant, prenez soin de vous et restez heureux.