Le

Les bases en JavaScript

3 exercices

À propos de Les bases

JavaScript est un langage dynamique, basé sur les prototypes. Il possède quelques primitives, et tout le reste est considéré comme un objet.

Bien qu'il soit surtout connu comme langage de script pour les pages web, de nombreux environnements autres que les navigateurs l'utilisent aussi, comme Node.js. Le langage est activement développé et, grâce à sa nature multi-paradigme, il permet de nombreux styles de programmation. JavaScript est un langage dynamique, qui prend en charge les styles orienté objet, impératif et déclaratif (par exemple la programmation fonctionnelle).

(Ré)affectation

Il existe plusieurs façons principales d'affecter des valeurs à des noms en JavaScript : avec des variables ou des constantes. Sur Exercism, les variables s'écrivent toujours en camelCase ; les constantes s'écrivent en SCREAMING_SNAKE_CASE. Il n'existe pas de guide officiel à suivre, et les entreprises et organisations ont chacune leurs propres guides de style. Tu peux écrire les variables comme tu veux. L'avantage d'écrire les variables comme les exercices sont préparés, c'est qu'elles seront mises en évidence différemment dans l'interface web et dans la plupart des IDE.

En JavaScript, les variables peuvent être définies à l'aide du mot-clé const, let ou var.

Une variable peut référencer différentes valeurs au cours de sa vie lorsqu'on utilise let ou var. Par exemple, myFirstVariable peut être définie et redéfinie de nombreuses fois à l'aide de l'opérateur d'affectation = :

let myFirstVariable = 1;
myFirstVariable = 'Some string';
myFirstVariable = new SomeComplexClass();

Contrairement à let et var, les variables définies avec const ne peuvent être affectées qu'une seule fois. C'est ainsi que l'on définit des constantes en JavaScript.

const MY_FIRST_CONSTANT = 10;

// Can not be re-assigned.
MY_FIRST_CONSTANT = 20;
// => TypeError: Assignment to constant variable.

Affectation de constante

Le mot-clé const est mentionné à la fois pour les variables et les constantes. Un autre concept souvent évoqué à propos des constantes est l'(im)mutabilité.

Le mot-clé const rend seulement la liaison immuable, c'est-à-dire qu'on ne peut affecter une valeur à une variable const qu'une seule fois. En JavaScript, seules les valeurs primitives sont immuables. En revanche, les valeurs non primitives peuvent encore être mutées.

const MY_MUTABLE_VALUE_CONSTANT = { food: 'apple' };

// This is possible
MY_MUTABLE_VALUE_CONSTANT.food = 'pear';

MY_MUTABLE_VALUE_CONSTANT;
// => { food: "pear" }

Valeur constante (immuabilité)

En règle générale, sur Exercism, comme dans de nombreuses autres organisations et guides de style de projet, on ne mute pas les valeurs qui ressemblent à const SCREAMING_SNAKE_CASE. Techniquement, ces valeurs peuvent être modifiées, mais pour des raisons de clarté et de cohérence sur Exercism, c'est déconseillé. Lorsque cela doit être garanti, utilise Object.freeze(value).

const MY_VALUE_CONSTANT = Object.freeze({ food: 'apple' });

// This silently fails
MY_VALUE_CONSTANT.food = 'pear';

MY_VALUE_CONSTANT;
// => { food: "apple" }

Dans la pratique, il est peu probable de voir Object.freeze partout dans une base de code, mais la règle de ne jamais muter une valeur SCREAMING_SNAKE_CASE est une bonne règle ; elle est souvent appliquée à l'aide d'une analyse automatisée comme un linter.

Déclarations de fonctions

En JavaScript, les unités de fonctionnalité sont encapsulées dans des fonctions, que l'on regroupe généralement dans le même fichier lorsqu'elles vont ensemble. Ces fonctions peuvent prendre des paramètres (arguments) et peuvent renvoyer une valeur à l'aide du mot-clé return. Les fonctions s'invoquent avec la syntaxe ().

function add(num1, num2) {
  return num1 + num2;
}

add(1, 3);
// => 4

💡 En JavaScript, il existe de nombreuses façons différentes de déclarer une fonction. Ces autres façons sont différentes de l'utilisation du mot-clé function. Le parcours essaie de les introduire progressivement, mais si tu les connais déjà, n'hésite pas à en utiliser une. Dans la plupart des cas, utiliser l'une ou l'autre n'est ni mieux ni pire.

Export et import

Les mots-clés export et import sont des outils puissants qui transforment un fichier JavaScript ordinaire en module JavaScript. En plus de permettre au code d'exposer sélectivement des composants, comme des fonctions, des classes, des variables et des constantes, ils activent toute une série d'autres fonctionnalités, telles que :

  • Renommer les exports et les imports, ce qui permet d'éviter les conflits de noms,
  • Les imports dynamiques, qui chargent le code à la demande,
  • Le tree shaking, qui réduit la taille du code final en éliminant les modules sans effet de bord et même le contenu des modules qui ne sont pas utilisés,
  • L'export de live bindings, qui permet d'exporter une valeur qui est mutée partout où elle est importée si la valeur d'origine est mutée.

Un exemple concret est la façon dont les tests fonctionnent dans le parcours JavaScript d'Exercism. Chaque exercice possède au moins un fichier d'implémentation, par exemple lasagna.js, et chaque exercice possède au moins un fichier de test, par exemple lasagna.spec.js. Le fichier d'implémentation utilise export pour exposer l'API publique, et le fichier de test utilise import pour y accéder, ce qui lui permet de tester les résultats de l'implémentation.

// file.js
export const MY_VALUE = 10;

export function add(num1, num2) {
  return num1 + num2;
}

// file.spec.js
import { MY_VALUE, add } from './file';

add(MY_VALUE, 5);
// => 15
Modifie via GitHub Le lien s'ouvre dans une nouvelle fenêtre ou un nouvel onglet

Apprends Les bases