Termes JavaScript à connaître en tant que développeur

Par / Développement, Javascript /

Cette article est une traduction de l’article Anglais Terms You Need to Know as a JavaScript Developer, écrit sur medium par Manisha Basra.

Termes à connaître en tant que développeur JavaScript
Image from Tutorialrepublic

Dans cet article, nous nous intéresserons plus particulièrement à ce que vous devez savoir sur JavaScript pour vous mettre au travail en tant que développeur JS.

Valeurs et types

JavaScript est un langage typé de manière dynamique. Cela signifie que les variables peuvent contenir des valeurs de tout type, sans distinction de type. Les types intégrés à JavaScript disponible sont les suivants :

  1. string
  2. number
  3. boolean
  4. null and undefined
  5. object
  6. symbol (nouveau dans ES6)

JavaScript est orienté valeurs typées, est non pas variables typées. Une variable JavaScript peut contenir n’importe quelle données. Une variable peut être à un moment une chaîne, et à un autre moment un nombre.

var a;
typeof a;           // "undefined"

a=5;
typeof a;           // "number"

a="js"
typeof a;           // "string"

typeof null est un cas intéressant, car il renvoie à tort un objet lorsque vous vous attendiez à ce qu’il renvoie null.

Objects

Les objets permettent de stocker des collections de données variées, et d’entités plus complexes. Objets dans lesquelles vous pouvez définir des propriétés qui conservent leurs propres valeurs.
Il est possible d’accéder aux propriétés avec une notation par points (c’est-à-dire obj.a) ou par des crochets (c.-à-d. Obj [« a »]). La notation par points est plus courte et généralement plus facile à lire. Il est donc préférable lorsque cela est possible.

var obj = {
 a: "js",
 b: 2
}

obj.a;             // "js"
obj["b"];          // 2

Array

Un tableau est un objet qui contient des valeurs (de tout type). Pas particulièrement dans les propriétés / clés nommées, mais plutôt dans les positions indexées numériquement. Explication par l’exemple :

var arr = ["js", 2, true];

arr[0];            // "js" 
arr[1];            //  2
arr[2];            //  true

Méthodes de construction

JavaScript fournit différents types de données pour contenir différents types de valeurs. Il existe deux types de types de données en JavaScript :

  1. Valeurs primitives
  2. Valeurs non primitives (références d’objet)

Nous pouvons avoir des propriétés et des méthodes sur une valeur non primitive. Mais comment pouvons-nous utiliser length comme propriété et toUpperCase() comme méthode sur une valeur primitive ?

const a = "hello world";

a.length;                   // 11
a.toUpperCase();            // "HELLO WORLD"
typeof a;                   // "string"

Lorsque vous utilisez une valeur primitive comme un objet, en référençant une propriété ou une méthode (par exemple, a.toUpperCase() dans l’extrait précédent), JS « encadre » automatiquement la valeur à sa contrepartie enveloppante.

L’Encadrement consiste à envelopper un objet autour d’une valeur primitive. Par exemple : new Number(42) crée un objet numérique pour la primitive numéro 42.

True et False

La liste spécifique des valeurs à False en JavaScript est la suivante :

  • “ ”(chaîne vide)
  • 0, -0, NaN (nombre invalide)
  • null, undefined
  • false

Toute valeur qui ne figure pas sur cette liste est considéré comme vrai. Par exemple :

  • []
  • [1,2,3]
  • {}
  • bonjour
  • 2
  • {a: 7}

Égalité

Il existe quatre opérateurs d’égalité: ==, === (égalité), !=, et !== (inégalité).
La différence entre == et === est caractérisée par deux choses :

  • Le double égal (==) vérifie l’égalité des valeurs.
  • Le triple égal (===) vérifie à la fois l’égalité des valeurs et des types.

Cependant, c’est inexact. La manière appropriée de les caractériser est que le double égal (==) vérifie l’égalité de valeur avec une autorisation de conversion, alors que le triple égal (===) vérifie l’égalité de valeur sans permettre la conversion.

Le triple égal (===) est souvent appelée égalité stricte. Le double égal (==) est une égalité lâche.

Cœrcition

La cœrcition est le processus de conversion de valeurs d’un type à un autre (tel que chaîne en nombre, objet en booléen, etc.). Il se présente sous deux formes: explicite et implicite.
Exemple de conversion explicite :

var a = “42”; 
var b = Number( a );
a;          // “42” 
b;         // 42 — the number!

Exemple de coercition implicite :

var a = “42”; 
var b = a * 1;     // “42” implicitly coerced to 42 here
a;  // “42” 
b; // 42 — the number!

Inégalité

Les opérateurs <,>, <= et >= sont utilisés pour les inégalités, appelée dans la spécification comparaison relationnelle.

Ils seront utilisés avec des valeurs comparables, comme des nombres. Mais les valeurs de chaîne JavaScript peuvent également être comparées aussi comme des inégalités.

var a = 42; 
var b = "foo";
var c = "53";
var d = "boo" ;
a < c       // true or false ?
a < b;      // true or false ? 
a > b;      // true or false ?
a == b;     // true or false ?
b > d; // true or false ?

Quelle sont les réponses aux inégalité ci-dessus ? True ou False ?

Avant de chercher la solution, voyons comment deux chaînes (ou nombre et chaîne) peuvent être comparées.

Si les deux valeurs de la comparaison < sont des chaînes, comme c’est le cas avec b>d, la comparaison est faite par ordre alphabétique (c-à-d comme un dictionnaire).

Si l’une, ou les deux valeurs, ne sont pas une chaîne, comme c’est le cas avec a<b, alors les deux valeurs sont forcées d’être des nombres et une comparaison numérique typique est effectuée.

a < c       // true       convert "53" to 53,  42 < 53
a < b;      // false	  convert "foo to NaN, 42 < Nan
a > b;      // false      convert "foo to NaN, 42 >Nan
a == b;     // false      interpreted as 42 == NaN or "42" == "foo"
b > d;      // true       f come after b in alphabetic order

Lors de la conversion de foo en un nombre, nous obtenons une valeur numérique non valide (NaN), et NaN n’est ni supérieur ni inférieur à une autre valeur.

Portées de fonction

Vous utilisez le mot clé var pour déclarer une variable qui appartiendra à l’ensemble de la fonction actuelle ou à l’étendue globale si elle se trouve au niveau global, en dehors de toute fonction.

Nous avons deux autres mots-clés pour la déclaration de variable; let et const. Ils sont la portée de bloc.

Hoisting

Lorsque le JavaScript compile tout le code, toutes les déclarations de variable utilisant sont généré en haut de leur scope :

  • La génération sera locale, si les variables sont déclarées dans une fonction.
  • Génération globale, si les variables sont déclarées en dehors d’une fonction.

C’est la définition du Hoisting.
Les déclarations de fonctions ont la même logique. Mais elles se placent au-dessus de toutes les déclarations de variables.

console.log(myName);    
var myName = ‘Sunil’;

What will be the answer - 
1. Uncaught ReferenceError: myName is not defined
2. Sunil
3. undefined

Dans l’exemple ci-dessus, la réponse sera « undefined ».

Pourquoi ? Parce que les variables sont déplacées en le haut de leur portée lors de la compilation du JS. myName est déplacé vers le haut de sa portée dès la compilation du JS.

A savoir : Ce sont les déclarations de variable qui sont déplacée au sommet du code, et non pas leur valeur réelle.

Closure

La Closure est l’un des concepts les plus importants de JavaScript, et aussi le moins compris. Une Closure est une fonction définie dans une autre fonction (appelée fonction parent) et a accès à la variable déclarée et définie dans le champ d’application de la fonction parent.

La fermeture a accès à la variable dans trois domaines :

  • Avec une déclaration dans son propre scope
  • A une déclaration dans le scope de la fonction parent
  • A une déclaration dans le namespace global
function makeAdder(x) {    
// parameter `x` is an inner variable
// inner function `add()` uses `x`, so   
// it has a "closure" over it    
	function add(y) {        
		return y + x;    
	};
    return add; 
}
var plusTen = makeAdder( 10 );
plusTen( 3 );       // 13 <-- 10 + 3 
plusTen( 13 );      // 23 <-- 10 + 13

Lorsque nous appelons makeAdder(10), nous récupérons une référence à la fonction interne add() qui mémorise x en tant que 10.
Nous appelons cette référence de fonction plusTen(..) – il ajoute son y (3) interne à celui rappelé par x(10).

This

Un autre concept communément mal compris en JavaScript est le mot-clé this.

Si une fonction est à l’intérieur de cette référence, cette référence pointe généralement sur un objet. L’objet indiqué dépend de la méthode d’appel à la fonction.

Il faut réaliser que cela ne fait pas référence à la fonction elle-même, comme on pourrai s’y attendre.

function foo() {    
   console.log( this.bar ); 
}
var bar = "global";
var obj1 = {    
  bar: "obj1",    
  foo: foo 
};
var obj2 = {  
  bar: "obj2" 
};
foo();              // global
obj1.foo();         // "obj1" 
foo.call( obj2 );   // "obj2" 
new foo();          // undefined

Pour comprendre ce que cela indique, vous devez examiner la méthode d’appel à la fonction.

Prototypes

Lorsque vous référencez une propriété sur un objet, et si cette propriété n’existe pas, JavaScript utilisera automatiquement la référence de prototype interne de cet objet pour rechercher un autre objet dans lequel rechercher la propriété. Vous pourriez penser à cela presque comme une solution de secours si la propriété est manquante.

La liaison de référence de prototype interne d’un objet à son repli se produit au moment de la création de l’objet. La fonction a utiliser est la function intégré appelé Object.create (..).

var foo = {
    a: 42 
};
// create `bar` and link it to `foo` 
var bar = Object.create( foo );
bar.b = "hello world";
bar.b;      // "hello world" 
bar.a;      // 42 <-- delegated to `foo`

Tous les termes dont nous avons parlé sont nécessaires pour devenir un bon développeur JS et vous devez vous familiariser avec ces termes.

Vous pouvez également commencer à lire la documentation officielle de JS pour apprendre tous ces concepts en profondeur.

J’espère que cet article vous a été utile. Merci de l’avoir lu et continuez à apprendre !