[Article] Trois fondamentaux de JavaScript

:salut:

Jean-Pierre Vincent vous propose un nouvel article : Trois fondamentaux de JavaScript.

Au-delà de rappeler certains aspects importants de JavaScript, l'article présente des notions relativement avancées de programmation JavaScript.

:fleche: Trois fondamentaux de JavaScript

:merci: à lui !

Citation:

---

Envoyé par Jean-Pierre Vincent

Code:

---

1 2 3 4 5 6 7 8

function genericFunctionName() { for(i = 0; i < myArray.length; i++) { console.log(i); } } for(i = 0; i < 10; i++) { genericFunctionName(); }

---

Nous avons simplement une fonction qui parcourt un tableau fictif, puis nous appelons cette fonction 10 fois. N'exécutez surtout pas cela dans votre navigateur, car c'est une boucle infinie !

---

Et pourquoi pas ? Ca fait juste planter le navigateur et au moins on s'en rend compte par soit même :P

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

if( 1 == 1 ) { // l'exécution du code passe ici ... function action() { console.log('a == 1'); } } else { // ... pourtant le compilateur se souvient de cette fonction function action() { console.log('a != 1'); } } action(); // a != 1

---

Bizarre le principe des portées en JavaScript. Dans la plupart des langages mainstream (Java, C, C++...) une portée est définie par :

Code:

---

1 2 3 4

{ une nouvelle portée }

---

En JavaScript, la seule façon de créer une nouvelle portée est donc de faire ça :

Code:

---

1 2 3

(function() { }())

---

Et donc en quelque sorte créer un objet portée (ou alors faut-il obligatoirement un appel à new pour créer un objet ?).

Code:

---

1 2 3 4 5 6 7 8 9

myClass.prototype = { decrement:function() { console.log( --this.publicVariable ); }, increment:function() { console.log( ++this.publicVariable ); } };

---

Ne peut-on pas plutôt écrire:

Code:

---

1 2 3 4 5 6 7

myClass.decrement = function() { console.log( --this.publicVariable ); }; myClass.increment = function() { console.log( ++this.publicVariable ); };

---

dont la syntaxe parait plus lisible ?

Merci Pour cette article très instructif sur ce qu'il faut faire et ce qu'il ne faut pas faire (et que je faisais dans mes rares développement Javascript) :ccool:

Citation:

---

Envoyé par atha2

Bizarre le principe des portées en JavaScript. Dans la plupart des langages mainstream (Java, C, C++...) une portée est définie par :

Code:

---

1 2 3 4

{ une nouvelle portée }

---

En JavaScript, la seule façon de créer une nouvelle portée est donc de faire ça :

Code:

---

1 2 3

(function() { }())

---

Et donc en quelque sorte créer un objet portée (ou alors faut-il obligatoirement un appel à new pour créer un objet ?).

---

En fait, une portée, c'est

Code:

---

1 2	function() { PORTÉE }

---

et c'est tout. new n'y change rien, le fait que ça soit auto-exécuté non plus (les parenthèses après la définition de la fonction)

Article très instructif :)

c'est typiquement le genre de briques qu'il me manquait pour comprendre correctement les codes que je rencontre fréquement. Même si je comprenais le côté fonctionnel de ce que je devais lire, ces astuces syntaxiques me faisaient mal aux yeux à chaque fois et je ne pouvais pas m'empêcher de me demander "à quoi pensait le type qui a écrit ça???? pourquoi déclarer une fonction anonyme et l'exécuter juste derrière, au lieu de faire du code inline???".

Maintenant, je sais :)

Encore un bon article de base pour les débutants.

Un petit mot quand même sur une nouvelle fonctionnalité de javascript.
Le mot clé let permet maintenant de déclarer et limiter la porté d'une variable dans un bloc d’exécution plus classique , à savoir {}. Comme en java...

Concernant le nommage des fonctions. Outre pour le débogage, cette notation est surtout utile , est a été mise en place, pour la récursivité, en permettant de déclarer et d'implémenter le fonction d'un coup, limitant un peu le code à écrire

par exemple au lieu de faire :

Code:

---

1 2 3 4 5 6

var maFn = function(){ if(truc) setTimeout(maFn , 1000); }; setTimeout(maFn , 1000);

---

On peux faire

Code:

---

1 2 3 4 5

setTimeout(function maFn (){ if(truc) setTimeout(maFn , 1000); }, 1000);

---

@kimjoa : effectivement, vu qu'en ecmascript 5 en mode strict les choses du genre arguments.callee sera interdit, ta notation sera intéressante.

Code:

---

1 2 3 4

setTimeout(function maFn (){ if(truc) setTimeout(maFn , 1000); }, 1000);

---

Sinon aujourd'hui, sans le mode strict pour les settimeout récursifs on utilise plutôt

Code:

---

1 2 3 4

setTimeout(function (){ if(truc) setTimeout(arguments.callee , 1000); }, 1000);

---