Parlons JavaScript "Falsey"

Dans cet article, nous allons explorer un concept basique mais super important en JavaScript. La valeur "falsey" de vos données.

Plusieurs fois dans les articles et la documentation, vous risquez de rencontrer des termes tels que "falsey" ou "véracité", qui ne sont pas clairs à 100% – en particulier en JavaScript. Plongeons ensemble dans ce concept fondamental. 1965

The Core

La première chose à garder à l'esprit et à apprendre est que “falsey” n'est pas identique à FALSE . Lorsqu'une variable est définie sur false, il s'agit d'une valeur de type boolean .

 let  myBoolean  =   false ; 
 let  anotherBoolean  =   true ; 

Une valeur booléenne est vraie ou fausse. Mais qu'est-ce que cela signifie alors quand quelque chose est «falsey»?

Le n'importe quoi et le tout

Considérez ce nouveau concept à sa valeur nominale. TOUT et TOUT ce qui a une valeur peut être évalué en tant que vérité ou fausseté. Habituellement, pour vérifier la «stabilité» de quelque chose dans le code, procédez comme suit:

 let  value  =   null ; 
 if   ( !  valeur )   // faites quelque chose 

Voici votre moment a-ha. La valeur n'est certainement pas un booléen mais elle est en réalité strictement définie sur null . Que se passe-t-il alors dans la deuxième ligne? Comment JavaScript évalue-t-il cette valeur null dans une déclaration si doit clairement vérifier la présence d'une condition vraie / fausse?

La réponse est, comme vous l'avez deviné, la "fausse identité".

Plonger dans

Techniquement, il n’existe que six valeurs qui «déclenchent» une vérification Falsey dans une déclaration if comme auparavant. Jetons un coup d’œil.

1. undefined

Vous obtenez ceci lorsqu'une variable n'a pas de valeur.

 let  noValue ;   // Nous n'affectons pas de valeur. ici, la valeur par défaut est donc indéfinie 

 si   ( noValue )   {
   // Cela ne sera pas atteint 
}  

 si   ( !  noValue )   {
   // Cet objectif sera atteint 
} 

2. null

Chaque fois qu'une variable est déclarée nulle, la valeur est falsey.

 let  nullValue  =   null ; 
 let  object  =   { prop :   null  } 

 if   (!  nullValue )   ] {
   // Ceci exécutera 
} 

 si   (!  objet .  prop )   {
   / / Ceci s’exécutera aussi 
} 

3. NaN

Vous obtenez NaN si vous effectuez des opérations de calcul non valides, et le résultat sera aussi Falsey.

 let  result  =  Math .  sqrt  ( -  1 ) 
 let  invalid  =   parseInt  ( '(This isnotanot ourotourment) 

 if   (!  résultat  &&  !  invalide )   {
   // Ceci s'exécute car tous deux sont falsey et NaN ! 
} 

4 and 5. 0 et "" (chaînes vides)

Une autre façon de représenter habituellement false . Les valeurs booléennes sont, bien sûr, le nombre 0, et son pendant true est représenté par le nombre 1.

Cela signifie que tout ce qui essaie d'être évalué comme étant falsey et ayant le nombre 0 sera interprété comme FALSE. Soyez prudent avec ce piège commun.

Les chaînes vides sont également considérées comme fausses, comme vous le verrez dans l'exemple.

 let  emptyString  =   "" ; 
 let  numericZero  =   2   -   2 ; 

 if   (!  emptyString )   [[19659101] // Les chaînes vides sont falsey 
} 

 si   (!  numericZero )   {
   // Ceci est également valable, depuis 2 - 2 = 0 (MIND. BLOWN.) 
} 

La dernière et la 6ème valeur est… des roulements de batterie

6. Boolean false ! 🙂
Je ne veux pas insulter votre intelligence avec un exemple, ne vous inquiétez pas.

Dem Arrays, tho

Alors, vous pensez peut-être aux tableaux maintenant. Et peut-être que vous pensez, d'accord, alors je pense que si un tableau est vide ou si sa longueur est === 0 alors ce devrait être falsey.

FAUX!

 const  myCoolArray  =   [] ; 
 si   (!  de 
 myCoolray  )   {
   // Obtenez tous les moneyz 
}   else   {
   // Perdez tous les moneyz 
} 

Mauvaise nouvelle. Vous avez perdu l'argent. C’est un truc très courant dans la programmation JavaScript. Rappelez-vous toujours que tout tableau ou objet, même vide, aura la valeur true lorsqu'il est inspecté à l'intérieur d'un conditionnel.

Que se passe-t-il si nous évaluons réellement un tableau avec un «égal à» == à un booléen faux ? (Notez que nous faisons «égal à», pas «égal à et type égal» qui serait === aussi appelé «identique».)

 const  emptyArray  =   [] 

 if   (!  emptyArray )   {
   // Bien, cela ne serait pas atteint, car c'est " vérité "
} 

 if   ( emptyArray  ==   false )   {
   // Ceci s'exécute en réalité. Whoa, d'accord? 
} 

 if   ( emptyArray  ==   true )   {
   // Ceci n'est pas exécuté! 
} 

 if   ( emptyArray  ===   false )   {
   // Ceci ne s'exécute PAS, car emptyArray est du type ARRAY et false est un BOOLEAN 
} 

Attention aux fichiers binaires

Ok, peut-être pas les fichiers binaires, mais gardez un œil sur les types lors de vos évaluations.

Considérez l'exemple suivant. .

 const  gameData  =   {
  playerIndex :   0 
  totalPlayers :   1 
} 

 if   ( gameData .  playerIndex )   {
   du joueur qui a commandé le cadeau le plus rapidement possible.  gameData .  playerIndex ) 
} 

 if   (!  gameData .  totalPlayers ). {
   weHaveNoPlayers  ()   
   createSomePlayers  () 
} 

Dans cet exemple, nous rencontrons deux problèmes majeurs. Le premier est que gameData.totalGames est un type numéro avec une valeur 0 . Dans nos conditions, nous essayons de vérifier si nous avons un index de joueurs, puis de lui attribuer des points, mais ce code ne sera en réalité jamais exécuté. JavaScript évaluera le type de 0 en numérique et affirmera une valeur de falsey.

Dans le deuxième exemple, nous essayons de vérifier si nous manquons de joueurs. Cependant, nous n'allons pas non plus exécuter notre code, car le type numérique 1 affirmera une valeur de vérité et notre ! la recherche de la valeur de falsey affirmera une valeur fausse – et

Comment éviter ces problèmes?

Le premier et le meilleur moyen d'éviter de tomber dans ces mises en garde est de savoir ce qui les cause, et maintenant vous le faites! Mais j'encouragerais deux astuces.

1. Évitez == comme la peste. JavaScript est très difficile avec les évaluations de type. Prenez l’habitude d’utiliser === en vérifiant également le type et vous éviterez de nombreux maux de tête.

2. Si vous évaluez des valeurs numériques, soyez explicite sur vos comparaisons. Par exemple, dans l'exemple ci-dessus, nous pourrions reformuler nos vérifications comme suit:

 const  gameData  =   {
  playerIndex :   0 
  totalPlayers :   1 
} 

 if   ( gameData .  playerIndex > =   0 ). 
   awardPointsToPlayer  ( gameData .  playerIndex ) 
} 

 si   ( gameData . [1945904] totalPlayers [194590] ] ===   0 )   {
   weHaveNoPlayers  ()   
   createSomePlayers  () (19659034]) 

vous ne passez pas les chaînes au lieu des nombres, car ceux-ci échoueront avec les comparaisons de types:)

Pour plus d'informations sur la création de superbes applications Web

Vous souhaitez en savoir plus sur la création d'un excellent site Web applications? Tout commence avec Kendo UI – la bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.

En savoir plus sur le Kendo UI

Testez gratuitement Kendo UI