Bases de JavaScript

Cet article explique les bases de JavaScript.

YouTube Video

Exécution de Hello World!

Aperçu de JavaScript

JavaScript est l'un des langages de programmation les plus utilisés dans le développement web. Il est principalement utilisé pour ajouter des éléments dynamiques aux pages web, permettant la manipulation de l'interface utilisateur, la transmission de données et la création d'animations. Il peut fonctionner côté client (dans un navigateur) et côté serveur en utilisant des technologies comme Node.js. En raison de sa simplicité et de sa flexibilité, il est facile à apprendre pour les débutants et est largement utilisé par les développeurs professionnels.

Les variables en JavaScript

Les variables en JavaScript sont comme des conteneurs utilisés pour stocker et réutiliser des données. En utilisant des variables, vous pouvez maintenir et manipuler des valeurs dans votre programme.

Déclaration des variables

En JavaScript, il existe trois mots-clés pour déclarer des variables.

• var : Une ancienne méthode pour déclarer des variables, mais la gestion de sa portée est complexe et exige de la prudence. Elle est basée sur la portée de la fonction.

1var x = 10;

• let : Introduit avec ES6, c'est une manière de déclarer des variables avec une portée de bloc. Elle peut être réassignée mais ne peut pas être redéclarée dans la même portée.

1let y = 20;

• const : Utilisé pour déclarer des variables immuables (constantes). Elles ont une portée de bloc et ne peuvent pas être réassignées ni redéclarées après leur déclaration.

1const z = 30;

Portée

Les variables ont le concept de portée.

Portée Globale

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• Les variables ayant une portée globale sont accessibles de n'importe où. Les variables déclarées avec var ont une portée globale ou de fonction, mais let et const ont une portée de bloc.

Portée de Bloc

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• Portée de bloc : Les variables déclarées avec let ou const sont valables seulement à l'intérieur des {} (accolades).

• Une erreur se produit lors de l'accès en dehors des {} (accolades).

Portée de Fonction

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• Portée de fonction : Les variables et fonctions définies à l'intérieur d'une fonction ne peuvent pas être accessibles de l'extérieur. Les variables déclarées à l'intérieur d'une fonction avec var appartiennent à cette portée.

• Dans cet exemple, la variable functionVar peut être accessible depuis l'extérieur des {} (accolades) tant qu'elle est dans la portée de la fonction. En revanche, accéder à la variable functionScoped depuis l'extérieur de la portée de la fonction entraîne une erreur.

Ainsi, les variables déclarées avec var n'ont qu'une portée de fonction et aucune portée de bloc, posant un risque d'utilisation dans des plages inattendues. Il est préférable d'utiliser const pour les variables qui ne changent pas et d'utiliser généralement let, en évitant autant que possible l'utilisation de var.

Types de Données

Les variables JavaScript peuvent stocker des valeurs de différents types de données. Il existe string pour gérer le texte et number pour gérer les valeurs numériques.

Les principaux types de données sont les suivants :.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• Types Primitifs :
  • number : Gère les valeurs numériques (entiers et nombres à virgule flottante).
  • string : Gère les chaînes de caractères.
  • boolean : Gère les valeurs booléennes true ou false.
  • null : Représente explicitement une valeur de 'rien'.
  • undefined: Une valeur automatiquement attribuée aux variables qui n'ont pas été initialisées.
  • Symbol : Un type de données utilisé pour créer des valeurs uniques.

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• Types d'objets :
  • Objet : Une structure de données avec plusieurs propriétés.
  • Tableau : Une liste contenant plusieurs valeurs.
  • Fonction : Un objet fonction.

Affectation et réaffectation aux variables

Les variables déclarées avec let ou var peuvent être réaffectées, mais const ne peut pas être réaffecté une fois déclaré.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

Remontée des variables (hoisting)

En JavaScript, il existe un phénomène où les déclarations de variables sont « levées » en haut de leur portée. Les variables déclarées avec var sont remontées, mais utiliser let ou const avant leur déclaration provoque une erreur.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• Dans ce cas, les variables déclarées avec var sont remontées et leurs valeurs sont affichées.

1console.log(b); // ReferenceError
2let b = 20;

• Les variables déclarées avec let ne sont pas remontées, ce qui entraîne une erreur.

Bonne utilisation des variables

Prenez en compte les points suivants pour une bonne utilisation des variables.

• Préférez utiliser const et évitez d'utiliser var.
• Suivez les conventions de nommage des variables.
  • Utilisez le camelCase, comme userName ou totalPrice.
  • Évitez les noms ambigus comme data ou value et utilisez des noms significatifs pour améliorer la lisibilité.
  • Un nom de variable ne peut pas commencer par un chiffre, donc des noms comme 1variable ne sont pas autorisés.
• L'utilisation excessive de variables globales peut provoquer des ambiguïtés de portée et entraîner des bugs, évitez donc de les utiliser autant que possible.

Résumé

• var : Une ancienne méthode de déclaration de variables avec une portée de fonction.
• let : Une variable à portée de bloc qui peut être réaffectée.
• const : Une variable à portée de bloc qui ne peut pas être réaffectée (constante).
• Il est important d'utiliser les variables en fonction de leurs types de données et d'être attentif à leur portée.

Que sont les caractères d'échappement en JavaScript ?

Les caractères d'échappement sont une méthode utilisée pour représenter des caractères ayant des significations spéciales dans des littéraux de chaînes ordinaires. En JavaScript, les caractères d'échappement sont introduits avec une barre oblique inverse \ pour ajouter des effets spéciaux à une chaîne ou inclure des caractères de contrôle. Les caractères d'échappement sont utiles pour inclure des éléments comme des sauts de ligne, des tabulations ou des guillemets dans une chaîne.

Exemples d'utilisation des caractères d'échappement

Vous trouverez ci-dessous quelques exemples de code utilisant des caractères d'échappement.

Échapper aux guillemets doubles et simples

Utilisez des caractères d'échappement pour représenter des guillemets doubles ou simples dans une chaîne.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

Échapper aux barres obliques inverses

Pour inclure une barre oblique inverse elle-même dans une chaîne, échappez-la avec \.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

Échapper aux sauts de ligne et aux tabulations

Vous pouvez insérer des sauts de ligne et des tabulations pour rendre des chaînes longues plus lisibles.

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

Échapper aux caractères Unicode

L'utilisation de séquences d'échappement Unicode permet de représenter des caractères spécifiques avec des codes hexadécimaux.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

Notes

L'utilisation excessive de caractères d'échappement peut nuire à la lisibilité

L'utilisation excessive de caractères d'échappement peut réduire la lisibilité de votre code. Il est particulièrement important d'utiliser les caractères d'échappement avec parcimonie dans les chaînes longues.

Envisagez d'utiliser des littéraux de gabarit

En JavaScript, les littéraux de gabarit utilisant des accents graves vous permettent d'inclure des sauts de ligne ou des expressions intégrées sans caractères d'échappement.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

Résumé

Les caractères d'échappement sont essentiels pour représenter des caractères spéciaux ou de contrôle dans les chaînes. En échappant les guillemets simples ou doubles et en ajoutant des sauts de ligne ou des tabulations, vous pouvez créer des chaînes plus flexibles. Cependant, l'utilisation excessive de caractères d'échappement peut rendre le code plus difficile à lire, alors envisagez d'utiliser des littéraux de gabarit lorsque cela est approprié.

Versions de JavaScript

JavaScript dispose d'une spécification standard appelée ECMAScript (ES). JavaScript a évolué sur la base de cette norme. Voici une brève description de ses versions majeures.

• ES3 (1999)

  La première version largement adoptée. La syntaxe et les fonctionnalités de base ont été établies.

• ES5 (2009)

  Introduction du strict mode et ajout de nouvelles fonctionnalités comme Array.prototype.forEach, Object.keys, etc.

• ES6 / ES2015 (2015)

  Une mise à jour majeure de JavaScript a été effectuée. De nombreuses fonctionnalités fondamentales pour le JavaScript moderne, telles que let, const, arrow functions, classes, promises, modules, etc., ont été introduites.

• ES7 / ES2016 (2016)

  Array.prototype.includes et l'opérateur d'exponentiation (**) ont été ajoutés.

• ES8 / ES2017 (2017)

  async/await a été introduit, simplifiant l'écriture de processus asynchrones.

• ES9 / ES2018 (2018)

  Des itérateurs asynchrones et les propriétés Rest/Spread ont été ajoutés.

• ES10 / ES2019 (2019)

  flatMap et Object.fromEntries ont été ajoutés.

• ES11 / ES2020 (2020)

  Le chaînage optionnel (?.) et l'opérateur de coalescence des valeurs nulles (??) ont été ajoutés, permettant d'écrire du code de manière plus simple et plus sécurisée.

• ES12 / ES2021 (2021)

  String.prototype.replaceAll et Promise.any, entre autres, ont été ajoutés.

• ES13 / ES2022 (2022)

  Array.prototype.at et les champs private des classes (#field), entre autres, ont été ajoutés.

• ES14 / ES2023 (2023)

  Array.prototype.toSorted et Symbol.prototype.description, entre autres, ont été ajoutés.

• ES15 / ES2024 (2024)

  Promise.withResolvers pour une gestion plus facile des Promise et ArrayBuffer redimensionnable, entre autres, ont été ajoutés.

Le JavaScript actuel est mis à jour chaque année, et de nouvelles fonctionnalités sont ajoutées même dans la version la plus récente.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video