Guide JavaScript Partie 3: Variables, types de données, expressions, objets

Aujourd'hui, dans la troisième partie de la traduction du manuel JavaScript, nous allons parler de différentes façons de déclarer des variables, des types de données, des expressions et des fonctionnalités de travail avec des objets.

→ Partie 1: premier programme, fonctionnalités linguistiques, normes
→ Partie 2: style de code et structure du programme
→ Partie 3: variables, types de données, expressions, objets
→ Partie 4: caractéristiques
→ Partie 5: tableaux et boucles
→ Partie 6: exceptions, points-virgules, littéraux génériques
→ Partie 7: mode strict, ce mot-clé, événements, modules, calculs mathématiques
→ Partie 8: Présentation des fonctionnalités d'ES6
→ Partie 9: Présentation des normes ES7, ES8 et ES9

Variables

Une variable est un identificateur auquel est affectée une valeur. La variable est accessible dans le programme, fonctionnant ainsi avec la valeur qui lui est affectée.

Une variable en JavaScript elle-même ne contient pas d'informations sur le type de valeurs qui y seront stockées. Cela signifie qu'en écrivant dans une variable, par exemple une chaîne, vous pouvez plus tard y écrire un nombre. Une telle opération ne provoquera pas d'erreur dans le programme. C'est pourquoi JavaScript est parfois appelé le langage «non typé».

Avant d'utiliser une variable, elle doit être déclarée à l'aide du mot clé var ou let . Lorsqu'il s'agit de constante, le mot clé const est utilisé. Déclarer une variable et lui affecter une certaine valeur est possible sans utiliser ces mots clés, mais il n'est pas recommandé de le faire.

▍ Mot-clé var

Avant la norme ES2015, l'utilisation du mot-clé var était le seul moyen de déclarer des variables.

 var a = 0 

Si var omis dans cette construction, la valeur sera affectée à une variable non déclarée. Le résultat de cette opération dépend du mode dans lequel le programme s'exécute.

Donc, si le mode dit strict est activé, cela provoquera une erreur. Si le mode strict n'est pas activé, une déclaration de variable implicite se produira et sera affectée à l'objet global. En particulier, cela signifie qu'une variable qui est implicitement déclarée de cette manière dans une certaine fonction sera disponible même après que la fonction aura terminé son travail. Habituellement, on s'attend à ce que les variables déclarées dans les fonctions ne «dépassent» pas leurs limites. Cela ressemble à ceci:

 function notVar() { bNotVar = 1 //    } notVar() console.log(bNotVar) 

1 arrivera à la console, généralement personne ne s'attend à ce comportement du programme, l'expression bNotVar = 1 ne ressemble pas à une tentative de déclarer et d'initialiser une variable, mais comme une tentative d'accéder à une variable située dans une portée externe de la fonction (c'est tout à fait normal). Par conséquent, la déclaration implicite de variables confond celui qui lit le code et peut conduire à un comportement inattendu du programme. Plus tard, nous parlerons des fonctions et des étendues, pour l'instant, essayez toujours d'utiliser des mots clés spécialisés lorsque la signification d'une expression est de déclarer une variable. Si dans cet exemple le corps de la fonction est réécrit sous la forme var bNotVar = 1 , une tentative de démarrage du fragment de code ci-dessus entraînera un message d'erreur (il peut être vu dans la console du navigateur).

Il peut ressembler, par exemple, à ceci: Uncaught ReferenceError: bNotVar is not defined . Sa signification se résume au fait que le programme ne peut pas fonctionner avec une variable inexistante. Il est beaucoup mieux, lorsque vous démarrez le programme pour la première fois, de voir un tel message d'erreur que d'écrire du code incompréhensible qui peut se comporter de manière inattendue.

Si, lors de la déclaration d'une variable, elle n'est pas initialisée, aucune valeur ne lui est affectée, la valeur undefined lui sera automatiquement attribuée.

 var a //typeof a === 'undefined' 

Les variables déclarées à l'aide du mot clé var peuvent être à nouveau déclarées à plusieurs reprises en leur affectant de nouvelles valeurs (mais cela peut dérouter quelqu'un qui lit le code).

 var a = 1 var a = 2 

Vous pouvez déclarer plusieurs variables dans une expression:

 var a = 1, b = 2 

La portée d'une variable est appelée la portée du programme dans lequel cette variable est accessible (visible).

Une variable initialisée avec le mot clé var dehors d'une fonction est affectée à un objet global. Il a une portée mondiale et est accessible de n'importe où dans le programme. Si une variable est déclarée à l'aide du mot-clé var dans une fonction, elle n'est visible qu'à l'intérieur de cette fonction, étant une variable locale pour elle.

Si une variable est déclarée dans une fonction à l'aide de var dont le nom correspond au nom d'une certaine variable de la portée globale, elle "remplace" la variable globale. Autrement dit, lors de l'accès à une telle variable à l'intérieur de la fonction, il utilisera sa version locale.

Il est important de comprendre que les blocs (zones de code entre accolades) ne créent pas de nouvelles zones de visibilité. Une nouvelle étendue est créée lorsque la fonction est appelée. Le mot-clé var a une portée dite fonctionnelle, pas une portée de bloc.

Si une variable est déclarée dans le code de fonction, elle est visible pour tout le code de fonction. Même si une variable est déclarée avec var à la fin du code de fonction, vous pouvez vous y référer au début du code, car le mécanisme de montée des variables (hissage) fonctionne en JavaScript. Ce mécanisme «déclenche» les déclarations de variables, mais pas les opérations de leur initialisation. Cela peut être une source de confusion, alors faites-en une règle pour déclarer des variables au début d'une fonction.

▍ Mot-clé let

Le mot clé let est apparu dans ES2015, qui, en termes simples, peut être appelé la version "bloc" de var . La portée des variables déclarées à l'aide du mot clé let est limitée au bloc, à l'opérateur ou à l'expression dans laquelle il est déclaré, ainsi qu'aux blocs imbriqués.

Si le mot «laisser» lui-même ne semble pas très clair, on peut imaginer que le mot «laisser» est utilisé à la place. Ensuite, l'expression let color = 'red' peut être traduite en anglais comme ceci: "let the color be red", et en russe comme ceci: "let the color be red".

En utilisant le mot clé let , vous pouvez vous débarrasser des ambiguïtés associées au mot clé var (par exemple, vous ne pouvez pas déclarer deux fois la même variable à l'aide de let ). L'utilisation de let outside la fonction, par exemple lors de l'initialisation de boucles, ne crée pas de variables globales.

Par exemple, un tel code provoquera une erreur:

 for (let i = 0; i < 5; i++) {   console.log(i) } console.log(i) 

Si, lorsque la boucle est initialisée, le compteur i sera déclaré à l'aide du mot-clé var , alors i sera disponible en dehors de la boucle une fois terminée.

De nos jours, lors du développement de programmes JS basés sur des normes modernes, vous pouvez complètement abandonner var et utiliser uniquement les mots clés let et const .

▍Mot clé const

Les variables déclarées à l'aide des mots clés var ou let peuvent être écrasées. Si const utilisé à la place de ces mots clés, vous ne pouvez pas attribuer une nouvelle valeur à une constante déclarée et initialisée avec son aide.

 const a = 'test' 

Dans cet exemple, la constante a ne peut pas recevoir de nouvelle valeur. Mais il convient de noter que si a n'est pas une valeur primitive, comme un nombre, mais un objet, l'utilisation du mot clé const ne protège pas cet objet des modifications.

Quand ils disent qu'un objet est écrit dans une variable, ils signifient en fait que la variable fait référence à l'objet. Ce lien ne peut pas être modifié et l'objet auquel le lien mène peut être modifié.

Le mot clé const ne rend pas les objets immuables. Il protège simplement contre les modifications de leurs références écrites dans les constantes correspondantes. Voici à quoi ça ressemble:

 const obj = {} console.log(obj.a) obj.a = 1 // console.log(obj.a) //obj = 5 //  

Dans la constante obj , lors de l'initialisation, un nouvel objet vide est écrit. Tenter d'accéder à sa propriété a , qui n'existe pas, ne provoque pas d'erreur. La console n'est undefined . Après cela, nous ajoutons une nouvelle propriété à l'objet et essayons à nouveau d'y accéder. Cette fois, la valeur de cette propriété - 1 - arrive à la console. Si vous décommentez la dernière ligne de l'exemple, une tentative d'exécution de ce code entraînera une erreur.

Le mot-clé const est très similaire à let , en particulier, il a une portée de bloc.

Dans les conditions modernes, il est parfaitement acceptable d'utiliser le mot-clé const , pour ne recourir à la let que dans des cas particuliers, pour déclarer toutes les entités dont les valeurs ne sont pas prévues pour être modifiées. Pourquoi? Le fait est qu'il est préférable de s'efforcer d'utiliser les constructions les plus simples possibles pour ne pas compliquer les programmes et éviter les erreurs.

Types de données

JavaScript est parfois appelé langage «non typé», mais ce n'est pas vrai. Il est vrai que vous pouvez écrire des valeurs de différents types dans des variables, mais il existe néanmoins des types de données en JavaScript. En particulier, nous parlons de types de données primitifs et d'objets.

Afin de déterminer le type de données d'une certaine valeur, vous pouvez utiliser l'opérateur typeof . Il renvoie une chaîne indiquant le type d'opérande.

▍ Types de données primitifs

Voici une liste de types de données JavaScript primitifs:

• number
• string (chaîne)
• boolean (booléen)
• null (valeur null spéciale)
• undefined (valeur spéciale undefined )
• symbol (symbole, utilisé dans des cas particuliers, apparu dans ES6)

Ici, les noms des types de données sont donnés sous la forme dans laquelle l'opérateur typeof les renvoie.

Parlons des types de données les plus couramment utilisés dans cette liste.

Numéro de type

Les valeurs de type number en JavaScript sont représentées sous forme de nombres à virgule flottante double précision 64 bits.

Dans le code, les littéraux numériques sont représentés sous forme de nombres entiers et fractionnaires dans le système décimal. Vous pouvez utiliser d'autres méthodes pour enregistrer des nombres. Par exemple, si au début d'un littéral numérique il y a un préfixe 0x - il est perçu comme un nombre écrit en notation hexadécimale. Les nombres peuvent également être écrits en notation exponentielle (dans ces nombres, vous pouvez trouver la lettre e ).

Voici des exemples d'entrées entières:

 10 5354576767321 0xCC //   

Voici les nombres fractionnaires.

 3.14 .1234 5.2e4 //5.2 * 10^4 

Les littéraux numériques (ce comportement est également caractéristique de certains autres types primitifs), lorsque vous essayez d'y accéder en tant qu'objets, automatiquement, pendant la durée de l'opération, sont convertis en objets correspondants, appelés «wrappers d'objets». Dans ce cas, nous parlons du Number wrapper d'objet.

Ici, par exemple, ressemble à une tentative d'accès à la variable a , dans laquelle un littéral numérique est écrit, en tant qu'objet, dans la console Google Chrome.


Infobulle d'habillage des objets numériques

Si, par exemple, vous utilisez la toString() d'un objet de type Number , il renverra une représentation sous forme de chaîne du nombre. Cela ressemble à la commande correspondante qui peut être exécutée dans la console du navigateur (et en code normal) comme ceci:

 a.toString() 

Notez les crochets doubles après le nom de la méthode. Si vous ne les mettez pas, le système ne donnera pas d'erreur, mais, au lieu de la sortie attendue, la console aura quelque chose qui ne ressemble pas à une représentation sous forme de chaîne du numéro 5.

L'objet Number global peut être utilisé sous la forme d'un constructeur, créant de nouveaux nombres avec son aide (bien que sous cette forme il ne soit presque jamais utilisé), il peut également être utilisé comme une entité indépendante sans en créer d'instances (c'est-à-dire, certains nombres représentés à partir de lui aide). Par exemple, sa propriété Number.MAX_VALUE contient la valeur numérique maximale qui peut être représentée en JavaScript.

Saisissez une chaîne

Les valeurs de type string sont des séquences de caractères. Ces valeurs sont spécifiées sous forme de littéraux de chaîne entre guillemets simples ou doubles.

 'A string' "Another string" 

Les valeurs de chaîne peuvent être divisées en plusieurs parties à l'aide du caractère barre oblique inverse.

 "A \ string" 

Une chaîne peut contenir des séquences d'échappement dites qui sont interprétées lorsque la chaîne est imprimée sur la console. Par exemple, la séquence \n signifie un caractère de nouvelle ligne. Le caractère barre oblique inverse peut également être utilisé pour ajouter des guillemets aux chaînes contenues dans le même guillemet. L'échappement du caractère guillemet avec \ empêche le système de le percevoir comme un caractère spécial.

 'I\'ma developer' 

Les chaînes peuvent être concaténées à l'aide de l'opérateur + .

 "A " + "string" 

Littéraux de modèle

ES2015 a introduit les soi-disant motifs littéraux ou chaînes de motifs. Ce sont des chaînes entre guillemets ( ` ) et ont des propriétés intéressantes.

 `a string` 

Par exemple, dans les littéraux de modèle, vous pouvez remplacer certaines valeurs résultant de l'évaluation des expressions JavaScript.

 `a string with ${something}` `a string with ${something+somethingElse}` `a string with ${obj.something()}` 

L'utilisation de guillemets arrière facilite l'écriture de littéraux de chaînes multilignes:

 `a string with ${something}` 

Type booléen

JavaScript a quelques mots réservés utilisés lorsque vous travaillez avec des valeurs booléennes - ce sont true (vrai) et false (faux). Les opérations de comparaison, telles que == , === , < , > , retournent true ou false .

Les expressions logiques sont utilisées dans des constructions comme if et while , aidant à contrôler la progression d'un programme.

Il convient de noter que lorsque true ou false est attendu, vous pouvez utiliser d'autres valeurs qui sont automatiquement considérées par le langage comme vraies (véridiques) ou fausses (fausses).

En particulier, les valeurs suivantes sont fausses:

 0 -0 NaN undefined null '' //  

Les valeurs restantes sont vraies.

Tapez null

JavaScript a une valeur null spéciale qui indique l'absence d'une valeur. Des significations similaires sont utilisées dans d'autres langues.

Type non défini

La valeur undefined écrite dans une certaine variable indique que cette variable n'est pas initialisée et qu'il n'y a aucune valeur pour elle.

Cette valeur est automatiquement renvoyée par les fonctions dont les résultats ne sont pas explicitement renvoyés à l'aide du mot clé return . Si la fonction accepte un paramètre qui, une fois appelé, n'est pas spécifié, il est également défini sur undefined .

Afin de vérifier la valeur pour undefined , vous pouvez utiliser la construction suivante.

 typeof variable === 'undefined' 

▍ Objets

Toutes les valeurs qui ne sont pas primitives ont un type d'objet. Nous parlons de fonctions, de tableaux, de ce que nous appelons des "objets" et de nombreuses autres entités. Tous ces types de données sont basés sur le type d' object , et bien qu'ils diffèrent à bien des égards les uns des autres, ils ont beaucoup en commun.

Expressions

Les expressions sont des fragments de code qui peuvent être traités et obtenus sur la base des calculs effectués une certaine valeur. JavaScript a plusieurs catégories d'expressions.

Expressions arithmétiques

Les expressions dont les résultats de calcul sont des nombres entrent dans cette catégorie.

 1 / 2 i++ i -= 2 i * 2 

Expressions de chaîne

Le résultat de l'évaluation de telles expressions est des chaînes.

 'A ' + 'string' 'A ' += 'string' 

Expressions primaires

Les littéraux, les constantes et les références aux identifiants entrent dans cette catégorie.

 2 0.02 'something' true false this // ,     undefined i // i     

Cela inclut également certains des mots clés et des constructions de JavaScript.

 function class function* // yield // /   yield* //     async function* //   await //     /pattern/i //  () // 

Expressions d'initialisation de tableau et d'objet

 [] //  {} //  [1,2,3] {a: 1, b: 2} {a: {b: 1}} 

Expressions logiques

Dans les expressions logiques, des opérateurs logiques sont utilisés, le résultat de leur calcul est des valeurs logiques.

 a && b a || b !a 

Expressions d'accès à la propriété

Ces expressions vous permettent d'accéder aux propriétés et méthodes des objets.

 object.property //   ( )  object[property] object['property'] 

Expressions de création d'objets

 new object() new a(1) new MyRectangle('name', 2, {a: 4}) 

Expressions de déclaration de fonction

 function() {} function(a, b) { return a * b } (a, b) => a * b a => a * 2 () => { return 2 } 

Expressions d'appel

De telles expressions sont utilisées pour appeler des fonctions ou des méthodes d'objets.

 ax(2) window.resize() 

Travailler avec des objets

Nous avons déjà rencontré des objets ci-dessus, parlant de littéraux d'objets, d'appeler leurs méthodes, d'accéder à leurs propriétés. Ici, nous parlons des objets plus en détail, en particulier, considérons le mécanisme d'héritage du prototype et l'utilisation du mot class clé class .

▍ Héritage de prototype

JavaScript se distingue des langages de programmation modernes en ce qu'il prend en charge l'héritage des prototypes. La plupart des langages orientés objet utilisent un modèle d'héritage basé sur les classes.

Chaque objet JavaScript a une propriété spéciale ( __proto__ ) qui pointe vers un autre objet qui est son prototype. Un objet hérite des propriétés et des méthodes du prototype.

Supposons que nous ayons un objet créé à l'aide d'un objet littéral.

 const car = {} 

Ou nous avons créé un objet en utilisant le constructeur d' Object .

 const car = new Object() 

Dans tous ces cas, le prototype de l'objet car sera Object.prototype .

Si vous créez un tableau qui est également un objet, son prototype est un objet Array.prototype .

 const list = [] //  const list = new Array() 

Vous pouvez le vérifier comme suit.

 car.__proto__ == Object.prototype //true car.__proto__ == new Object().__proto__ //true list.__proto__ == Object.prototype //false list.__proto__ == Array.prototype //true list.__proto__ == new Array().__proto__ //true 

Ici, nous avons utilisé la propriété __proto__ , elle n'a pas besoin d'être disponible pour le développeur, mais vous pouvez généralement y accéder. Il convient de noter qu'un moyen plus fiable d'obtenir un prototype d'un objet consiste à utiliser la méthode getPrototypeOf() de l' Object global.

 Object.getPrototypeOf(new Object()) 

Toutes les propriétés et méthodes du prototype sont accessibles à l'objet possédant ce prototype. Ici, par exemple, ressemble à leur liste pour un tableau.


Indice de tableau

Le prototype de base pour tous les objets est Object.prototype .

 Array.prototype.__proto__ == Object.prototype 

Object.prototype pas de prototype.

Ce que nous avons vu ci-dessus est un exemple de chaîne prototype.

Lorsque vous essayez d'accéder à une propriété ou une méthode d'un objet, si l'objet lui-même n'a pas une telle propriété ou méthode, ils sont recherchés dans son prototype, puis dans le prototype de prototype, et ainsi de suite, jusqu'à ce que le résultat souhaité soit trouvé, ou jusqu'à ce que la chaîne prototype ne se terminera pas.

En plus de créer des objets à l'aide du new opérateur et à l'aide de littéraux d'objet ou de littéraux de tableau, vous pouvez créer une instance d'un objet à l'aide de la méthode Object.create() . Le premier argument passé à cette méthode est un objet qui deviendra le prototype de l'objet créé en l'utilisant.

 const car = Object.create(Object.prototype) 

Vous pouvez vérifier si un objet fait partie de la chaîne prototype d'un autre objet à l'aide de la méthode isPrototypeOf() .

 const list = [] Array.prototype.isPrototypeOf(list) 

Fonctions constructeur

Ci-dessus, nous avons créé de nouveaux objets en utilisant les fonctions constructeurs déjà disponibles dans le langage (quand ils sont appelés, le new mot-clé est utilisé). . .

 function Person(name) { this.name = name } Person.prototype.hello = function() { console.log(this.name) } let person = new Person('Flavio') person.hello() console.log(Person.prototype.isPrototypeOf(person)) 

-. , this . name , . . - , name , .

, name , . , , , hello() . , Person hello() ( ).

▍

ES6 JavaScript «».

JavaScript . , JS . , , , « » . , , , , , .

.

 class Person { constructor(name) {   this.name = name } hello() {   return 'Hello, I am ' + this.name + '.' } } 

, new ClassIdentifier() .

constructor , .

. hello() — , , . Person .

 const flavio = new Person('Flavio') flavio.hello() 

,

. , , , , .

, ( ) , , -, .

 class Programmer extends Person { hello() {   return super.hello() + ' I am a programmer.' } } const flavio = new Programmer('Flavio') flavio.hello() 

hello() Hello, I am Flavio. I am a programmer .

(), .

super .

, , , , , . ( static ) , .

JavaScript , (, ) . , , .

, get set . — , , . -, — .

 class Person {   constructor(name) {     this.userName = name   }   set name(value) {     this.userName = value   }   get name() {     return this.userName   } } 

Résumé

, , JavaScript. .

Chers lecteurs! JS, , class.