Raccourcis et astuces de codage pour javascript

Par Eric - Le
Javascript
Raccourcis et astuces de codage pour javascript

Le site jQuery 4u propose une série de raccourcis et d'astuces d'écriture à connaitre pour améliorer votre technique de développement avec javascript.

Une petite référence pour l'apprentissage des techniques de codage javascript.

Raccourcis et astuces de codage pour javascript

If ... else et opérateur ternaire

Version longue

  1. var big;
  2. if (x > 10) {
  3. big = true;
  4. }
  5. else {
  6. big = false;
  7. }

Version courte

  1. var big = (x > 10) ? true : false;

Vérifier si une variable est vide, nulle ou indéfinie.

Version longue

  1. if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
  2. var variable2 = variable1;
  3. }

Version courte

  1. var variable2 = variable1 || '';

Testez par vous-même l'exemple ci-dessous (copiez-collez ce code dans Firebug et cliquez sur Exécuter):

  1. // null
  2. var variable1 = null;
  3. var variable2 = variable1 || '';
  4. console.log(variable2);
  5. //sortie : '' (vide)
  6.  
  7. // undefined
  8. var variable1 = undefined;
  9. var variable2 = variable1 || '';
  10. console.log(variable2);
  11. //sortie : '' (vide)
  12.  
  13. // normal
  14. var variable1 = 'Bonjour';
  15. var variable2 = variable1 || '';
  16. console.log(variable2);
  17. //sortie : 'Bonjour'

Tableau simple

Version longue

  1. var a = new Array();
  2. a[0] = "string1";
  3. a[1] = "string2";
  4. a[2] = "string3";

Version courte

  1. var a = ["string1", "string2", "string3"];

Tableau associatif

La façon vieille école pour la déclaration d'un tableau est de le créer en le nommant puis d'ajouter chaque élément un par un. Une façon plus rapide et plus lisible consiste à ajouter les éléments en utilisant la notation objet littéral.

Version longue

  1. var arr = new Array();
  2. arr ['Document language'] = 'HTML5';
  3. arr ['Styling language'] = 'CSS3';
  4. arr ['Javascript library'] = 'jQuery';
  5. arr ['Other'] = 'Usability and accessibility';

Version courte

  1. var arr = {
  2. 'Document language' : 'HTML5',
  3. 'Styling language' : 'CSS3',
  4. 'Javascript library' : 'jQuery',
  5. 'Other' : 'Usability and accessibility'
  6. };

Déclaration des variables

Généralement on déclare ses variables au début de la fonction, voici une technique qui permet de gagner du temps et de l'espace lors de la déclaration de plusieurs variables.

Version longue

  1. var x;
  2. var y;
  3. var z = 3;

Version courte

  1. var x, y, z=3;

Les opérateurs / opérations

Version longue

  1. x=x+1;
  2. minCount = minCount - 1;
  3. y=y*10;

Version courte

  1. x++;
  2. minCount --;
  3. y*=10;

Autres exemples (x = 10 et y = 5)

  1. x += y //résultat x=15
  2. x -= y //résultat x=5
  3. x *= y //result x=50
  4. x /= y //résultat x=2
  5. x %= y //résultat x=0

Fonction, variable et argument

Déclaration d'une fonction

  1. function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
  2. // do something...
  3. }
  4. myFunction( "String", 1, [], {}, true );

Et en littéral

  1. function myFunction() {
  2. console.log( arguments.length ); // Retourne 5
  3. for ( i = 0; i < arguments.length; i++ ) {
  4. console.log( typeof arguments[i] ); // Retourne string, number, object, object, boolean
  5. }
  6. }
  7. myFunction( "String", 1, [], {}, true );

Boucles

Version longue

  1. for (var i = 0; i < allImgs.length; i++)

Version courte

  1. for(var i in allImgs)

Sur un objet tableau

  1. function logArrayElements(element, index, array) {
  2. console.log("a[" + index + "] = " + element);
  3. }
  4. [2, 5, 9].forEach(logArrayElements);
  5. // logs:
  6. // a[0] = 2
  7. // a[1] = 5
  8. // a[2] = 9

Chaîne de caractères, méthode charAt()

Vous pouvez utiliser la fonction eval () pour faire cela, mais voici une technique plus propre et plus rapide.

Version longue

  1. "myString".charAt(0); // Retourne 'm'

Version courte

  1. "myString"[0]; // Retourne 'm'

Comparaison

Version longue

  1. if (!(ret == undefined)) {
  2. return ret;
  3. } else{
  4. return fum('g2g');
  5. }

Version courte

  1. return ret || fum('g2g');

Fonction d'appel

Version longue

  1. function x() {console.log('x')};
  2. function y() {console.log('y')};
  3. var z = 3;
  4. if (z == 3)
  5. {
  6. x();
  7. } else
  8. {
  9. y();
  10. }

Version courte

  1. function x() {console.log('x')};
  2. function y() {console.log('y')};
  3. var z = 3;
  4. (z==3?x:y)();