trucs géniaux en javascript
traduction du billet de Jeffrey Van Binsbergen ( Article published on 8/28/2015 11:42:20 PM http://jeffreyvanbinsbergen.nl/v/awesome-javascript-tricks )
tout comme C-Sharp, javascript possède quelques “trucs” uniques et peux connus. Dans cet article l’auteur partage quelque uns de ces ”trucs” (qui peuvent pour certains nécessiter une version récente de l’un des gros navigateurs actuels).
Object.defineProperty
cette méthode disponible dans tous les navigateurs récents (compatibilité) permet de paramétrer finement vos propriétés. Par exemple, vous pouvez utiliser des Getters et setters :| Code Javascript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var obj = {}; Object.defineProperty(obj, 'myprop', { get: function() { return myprop * 2; }, set: function(value) { console.log('Setting value to '+value); myprop = value; } }); obj.myprop = 5; console.log(obj.myprop); // 10 |
test en ligne
dans cet exemple le descripteur est un descripteur d’accesseur ( il définit un getter et un setter )
Une autre utilisation intéressante de la méthode defineProperty est de pouvoir rendre la valeur d’une propriété constante et ineffaçable (même si l'on utilise à nouveau defineProperty )
| Code Javascript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 | var obj = {}; obj.theAnswer = 42; Object.defineProperty(obj, 'theAnswer', { writable: false, // This makes the value read only configurable: false // This makes this property undeletable }); obj.theAnswer = 5; console.log(obj.theAnswer); // 42 |
test en ligne
Dans cet exemple ci, le descripteur est un descripteur de données ( qui défini une valeur et son accessibilité en écriture). Attention : le descripteur d’une propriété est soit de type descripteur de données soit de type descripteur d’accesseur ( on ne peut pas mixer les deux types).
L’auteur souligne le fait que la méthode defineProperty est particulièrement utile lorsque l’on définit un élément qui doit se comporter comme un élément natif.
on consultera avec intérêt la doc de MDN ( très bien traduite en français)
Arguments en Array
vous pouvez utiliser le mot-clef arguments pour récupérer l’ensemble des paramètres passés à une fonction. Ce qui permet donc l’utilisation de fonctions avec un nombre variable de paramètres| Code Javascript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 | function printf(text) { var i = 0, args = Array.prototype.slice.call(arguments); // Turn the arguments-object into a normal array text = text.replace(/\%s/g, function(a) { return args[++i]; }); return text; } console.log(printf("Hello %s! Your score is %s", "Mr Anderson", 1337)); // Hello Mr Anderson! Your score is 1337 |
on consultera la documentation de MDN
Complément par rapport à l’article original:
Il faut garder à l’esprit que arguments n’est pas un tableau:
- Les valeurs des arguments sont indexés, en commençant à 0,
- Il existe une propriété arguments.length (et c’est tout!!!),
apparemment il y a certaines contraintes quant à l’utilisation de arguments dans la V8 de Chrome ( lire cette page ), on retiendra que sont permis :
- l’utilisation de arguments.length
- l’utilisation de arguments[i] où i est un indice valide
- qu’il faut éviter d’utiliser arguments telquel (comme s’il s’agissait d’un objet Array), par exemple il ne pas passer arguments en arguments d’une autre fonction.
Surcharge des méthodes par défaut
Comme la plupart des autres langages, les objets dans javascript possèdent quelques méthodes par défaut qui peuvent être surchargées.| Code Javascript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 | var TestObject = function() { this.valueOf = function() { return 42; }; this.toString = function() { return "I am a test object"; }; }; var obj = new TestObject(); console.log(obj == 42); // true console.log(obj); // I am a test object |
L’auteur souligne l’utilité de cette technique pour rendre des objets comparables entre eux, ou une aide au debbugage (la surcharge de la méthode .ToString permet d’avoir un console.log(myObject) plus verbeux que le simple [object Object] obtenu par défaut.
Pour plus d’informations on consultera la page MDN concernant les prototypes
Function methods
En javascript, il y a plusieurs manières pour travailler avec les fonctions. L’une des moins connues passent par l’utilisation des méthodes apply (call) et bind:la méthode apply permet entre autre de passer les arguments à une fonction native js sous forme de array :
| Code Javascript : | Sélectionner tout |
alert.apply(this, ["I am a message"]); // Shows 'I am a message'
l’exemple données sur le site MDN, pour l’utilisation de apply sur les fonctions natives, est, il me semble plus parlant :
| Code Javascript : | Sélectionner tout |
var max = Math.max.apply(null, [5, 6, 2, 3, 7]);
qui permet d’utiliser Math.max avec comme arguments un tableau de valeurs.
Function methods
la méthode bind est aussi utile, spécialement lors de l’utilisation de setTimeout
| Code Javascript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 | var TestObject = function() { this.someValue = 100; this.doSomething = function() { alert(this.someValue); }; setTimeout(this.doSomething, 1000); // undefined setTimeout(this.doSomething.bind(this), 2000); // 100 } new TestObject(); |
Opérateur virgule
À côté des opérateurs courants, JavaScript dispose d'un autre opérateur : l’opérateur virgule. Il permet d'effectuer certaines actions avant de retourner une valeur. Cela peut être utile là où JavaScript n'attend qu'une seule valeur.
Avec l'opérateur virgule toutes les expressions sont toujours exécutées, et la dernière (uniquement) est renvoyée. Exemple :
| Code Javascript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function IsAlwaysFalse() { return false; } function IsAlwaysTrue() { return true; } // Continues when the value is not False/Null/0/Undefined console.log(IsAlwaysFalse() && 42); // False console.log(IsAlwaysTrue() && 42); // 42 // Continues when the value is False/Null/0/Undefined console.log(IsAlwaysFalse() || 42); // 42 console.log(IsAlwaysTrue() || 42); // True // Always continues console.log((IsAlwaysFalse(), 42)); // 42 console.log((IsAlwaysTrue(), 42)); // 42 |
voir la documentation MDN.
Scope labels
L’utilisation conjointe de label et break, permet d’après l’auteur, de créer un scope particulier (lié au label) et d'en sortir brutalement en utilisant break| Code Javascript : | Sélectionner tout |
1 2 3 4 5 | myLabel: { console.log('I am shown :)'); break myLabel; console.log('I'm not :('); } |
pour plus d’information on peut lire la doc de MDN concernant : label et break
Scope labels
Multilignes
Et enfin un petit truc pour écrire une chaine de caractères sur plusieurs lignes sans avoir de retour à la ligne:| Code Javascript : | Sélectionner tout |
1 2 3 | var x = "abc\ def"; |
Conclusion
A l’image de C#, javascript est plein de trésors cachés. Les points présentés dans ce billet ne sont que quelques trucs peu connus, mais maîtrisés par l’auteur.si vous même voulez partager vos connaissances, n’hésitez pas à compléter cet article.