Devoxx France 2013 : Javascript pour les développeurs Java

Lors de Devoxx France 2013 j’ai beaucoup apprécié le retour de Florian Boulay intitulé “Javascript pour les développeurs Java : quels sont les pièges à éviter ?” . Dans cette conférence, il nous a fait part des surprises qu’il a rencontré et des solutions qu’il a pu apporter.

Portée des variables

Si on ne met pas var devant une variable celle-ci est alors globale.
Solution : on met toujours var qui force une portée locale.

	var foo = 'global'
	function funct() {
		var foo = 'local';
		bar = 'global';
		console.log(foo); // 'local'
		console.log(bar); // 'global'
	}
	funct();
	console.log(foo); // 'global'
	console.log(bar); // 'global' instanciée depuis funct()

Pour une meilleure lisibilité et pour identifier facilement que l’on utilise bien des variables locales, on peut systématiquement déclarer ses variables en début de méthode.

Isolation du code

Pour éviter de déclarer des méthodes au niveau global, on les isole de la façon suivante :

(function() {
	var foo = 'hello';
	//...
})();

Cela s’appelle le module pattern.
Celui-ci permet d’éviter d’utiliser le namespace global pour la déclaration de la fonction. On évite ainsi les conflits de noms qui pourraient survenir.

Le module pattern permet aussi d’émuler le concept de classe de la manière suivante:

var module = (function() {
	var exposedObject = {},
		privateVariable = 1;

	function privateMethod() {
		// méthode privée
	}
	exposedObject.publicProperty = true;
	exposedObject.publicMethod = function() {
		// méthode exposée
	}
	return exposedObject;
})();

module.publicMethod();

Tout ce qui n’est pas ajouté à l’objet exposedObject reste invisible “à l’extérieur”, c’est ce qui différencie les méthodes privées des méthodes publiques du module.

Objets

Pour la déclaration d’objets, Florian conseille de s’en tenir à la notation littérale pour plus de clarté.

var obj = {
	prop : true,
	funct : function() {
		return 'me';
	}
};

Quand utiliser new ?

Que doit-on utiliser ?

var myvar1 = ApiObject();

ou

var myvar1 = new ApiObject();

La convention (tacite) : il faut utiliser new quand la fonction commence par une majuscule.
Si la méthode utilise this alors il faut utiliser new.
L’objet référencé par this dépend du contexte d’exécution.

Egalité

Lorsque l’on compare 2 objets avec ‘==’, ceux-ci sont éventuellement modifiés afin de pouvoir être comparés. L’intention est bonne mais est source de nombreux problèmes. Afin de lever toute ambiguïté on utilisera ‘===’ (triple égal) qui ne transformera pas les opérandes au préalable. Ainsi, si on compare 2 objets de types différents, on est alors certain que la triple égalité ne renverra jamais true.

typeof versus instanceof

Les 2 opérateurs servent le même but mais:
– typeof renvoie une chaine de caractères
– instanceof renvoie des informations plus complètes sur le type

On utilisera typeof avec les types simples du langage.
On utilisera instanceof avec les types customs

Les Type Wrappers

Ils n’apportent rien et gênent la lisibilité. On leur préférera une écriture claire et concise.

new Object() => {}
new Array() => []
new Number(42) => 42
new String('42') => '42'
new Boolean(true) => true
new Regexp('.*') => /.*/

Convertir un texte en nombre

parseInt peut donner des résultats surprenant en parsant une chaîne de caractères. En effet les lettres sont filtrées de manière transparentes lors de la conversion.
pour lever l’ambiguïté on peut préfixer la chaîne à parser par un +, on aura ainsi davantage de NaN (Not a Number) remontés.
Mon collègue Arthur Weber me signale également qu’on peut préfixer les variables à parser avec ‘~~’ ce qui en cas d’erreur renverra la valeur par défaut 0.

~~'foo'; // 0
parseInt('foo', 10); // NaN

Ce qui évite le type de code suivant

if (x === NaN ) x = 0;

Slides de la présentation : http://www.slideshare.net/FlorianBoulay/javascript-pour-lesdeveloppeursjava

Pour aller plus loin, découvrez notre formation JavaScript : http://www.ippon.fr/formation/javascript

Tweet about this on TwitterShare on FacebookGoogle+Share on LinkedIn

4 réflexions au sujet de « Devoxx France 2013 : Javascript pour les développeurs Java »

  1. Ne pas oublier que toutes les variables déclarées – peu importe où – dans une fonction ont une portée locale à cette fonction. Le coup classique :

    for(var i=o.length-1; i>=0; i–){ console.log(i); };

    ATTENTION: la variable i est globale à la fonction. Du coup, règle primordiale: toujours déclarer les variables au début des fonctions.

    1. mouais, je préfère (même si c’est la même variable i)

      function truc() {

      for (var i=0; i<10; i++) {

      }

      for (var i=0; i<20; i++) { // même i, mais de toute façon on reset la valeur

      }

      }

      que

      function truc() {

      var i;

      for (i=0; i<10; i++) {

      }

      for (i=0; i<20; i++) {

      }

      }

      bon, on peut toujours faire ça, mais ça devient lourd 🙂 :

      function truc() {

      (function(){for (var i=0; i<10; i++) {

      }})();

      (function(){for (var i=0; i<20; i++) {

      }})();

      }

      1. Le cas de la loop “for” était un exemple. Mais cette règle s’applique à toutes les autres structures de contrôle. En effet, en JS, ces structures de contrôles ne créent pas de nouveau scope (comme en Java).

        Donc, à tes risques et périls Arnaud 🙂

        1. Merci, je m’en sorts pas trop mal 😉
          L’intérêt c’est de garder une bonne “localité” des variables, mais tu as raison, c’est vrai qu’il faut faire gaffe du coup (faut dire que les vars en début de fonction, ça fait C du début des années 80 un peu!).
          Sinon en JS moderne il y a “let”.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*