Dyrk.org - Do You Really Know

[Javascript] – 3 cas impossibles que Javascript rend Possible !

Publié le 9 novembre 2017 par #Ro0t

 

Salut à tous,

Aujourd’hui je vais m’adresser aux développeurs, cependant je ferais un effort pour que même les non-développeurs puissent comprendre en quoi ce que je vais vous montrer est vraiment fun !

Ce que j’aime avant tout avec Javascript, c’est la souplesse de ce langage !
Tout est objet … et donc tout est customisable et gérable à l’extrême.

Je suis donc tout récemment tombé sur un challenge plutôt sympa, fourni par CodeWars … ou je vous avouerais que j’ai pas mal transpiré .. et que je ne suis pas reparti sans quelques connaissances d’ailleurs ;)

Pour ceux qui sont aussi des fans de codeWars, je me suis remis dessus il y a quelques jours sous le compte suivant : https://www.codewars.com/users/SpiderBoy

Pour tous les développeurs, je vous invite vraiment à aller vous challenger sur ce site, c’est vraiment un bon gros défi algorithmique qui s’offrira à vous ! En vous rendant la vie de plus en plus dur, au fur et à mesure que vous avancerez ;)

 

Mettre un objet en lecture seule !

Prenez quelques minutes pour regarder le code de cette fonction

function challenge( obj ) {
obj.key = 42;
if (obj.key === 43)
return "Bravo !"
return "Perdu"
}

Ici il est question de savoir quoi envoyer à la fonction « challenge » … pour réussir ce défi …
challenge doit recevoir un objet comme cela :

obj = {
key : 43
}

Sauf que … forcément vous avez vu que dans la fonction challenge … quelle que soit la valeur de key … elle sera remplacée par 42 !

obj.key = 42

et donc …  obj.key … ne sera pas égal à 43 !

if (obj.key === 43)

Mais alors … comment peut-on relever ce défi impossible

Javascript Powwwerrrr !

Il est possible en Javascript de mettre en « lecture seule » un objet.
C’est à dire de créer un objet qui ne pourra être modifié …
Tout cela, à l’aide de la méthode « freeze » d’un « Objet » !

Un objet qui n’est pas en lecture seule se comporte ainsi :

la valeur de obj.key, initialement à 43 … est modifié en 42
Mais si je le freeze

La valeur de « obj.key » initialement à 43 n’a pas changé, malgré une tentative !

Ainsi donc :

Je parviens sans problème à passer la tentative de modification de mon objet !

 

Falsifier la valeur d’un tableau !

Lorsque j’additionne 2 (ou plus) tableaux en Javascript, j’obtiens une concaténation

En réalité … lorsque vous utilisez un opérateur  :

  • +
  • ==
  • !=
  • <
  • >
  • etc …

Javascript va interroger la propriété « valueOf » de l’élément que vous voulez traiter

Whaouuu ! C’est beau …

Les tableaux en Javascript sont de type « Array » !
Lorsque nous souhaitons modifier un comportement sur tous les tableaux nous utilisons ce que l’on appelle des « prototype » …

Donc si je voulais modifier le retour de la fonction « valueOf » pour tous mes tableaux …

je ferais ceci :

Array.prototype.valueOf = function(arr){  /* mon code */ return 42;  }

 

Attention place à la magie …

 

Dernier tour de magie … qu’est-ce qui est à la fois supérieur et inférieur à 10 ?

 

Si vous avez bien compris mon dernier exemple des pouvoirs de Javascript, alors vous ne serez pas étonné par ce code

 

function challenge( val ){
if (val < 10 && val > 10)
return "Bravo";
return "Perdu";
}

Nous avons ici le devoir de créer un chiffre … capable d’être à la fois supérieur à 10 et inférieur à 10 !

What The Hell ?!?

 

Okey les boyz et les girlz on se calme tout est sous contrôle, point de panique !
Nous avons la possibilité de créer de simuler un objet « Number » …
Comme je vous l’ai dit … lorsque « comparaison » il y a … qu’est-ce qu’on appelle ?

La propriété « valueOf » ! C’est très bien, je vois que tout le monde a suivi ;)

Okey donc si je vous montre ceci :

val = (function() {
v = 7
return {
valueOf: function() {
return v+=2
}
}
})()

On voit que je crée un objet que j’exécute illico !
sa première valeur sera v (7) …
Mais à chaque appelle … v s’incrémentera de 2 …
Donc
Premier appel dans le

if ( val < 10 …

hop val sera égale à 9 (7+2)
deuxième appelle:

&& val > 10)

val passera à 11 … (9+2)