1 / 26

Understanding var, let, const, and the Temporal Dead Zone in JavaScript

This article provides an in-depth explanation of var, let, const, and the Temporal Dead Zone in JavaScript. It covers their differences, scope, and common errors to avoid. The article also includes examples and useful resources.

tomlinson
Télécharger la présentation

Understanding var, let, const, and the Temporal Dead Zone in JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Var, let, const and the temporal dead zone 24 Avril 2017

  2. Introduction Quid: • Les apports des opérateurs let et const • La Temporal Dead Zone et les erreurs à éviter Sommaire: • L’opérateur var, let, const • Temporal Dead Zone et autres erreurs • Support

  3. L’instruction var

  4. L’instruction var: généralités vara = 1; vara, b = 2, c = 3; Que dire? • Portée: contexte d’exécution ou global • Re-déclaration sans perte de valeur • Chaîne de ‘scope’ • etc … Lien documentation MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

  5. L’instruction var: hoisting functionfn() { console.log(a); vara = 1; } functionfn() { vara; console.log(a); a = 1; }

  6. L’instruction let

  7. L’instruction let: généralités leta = 1; leta, b = 2, c = 3; leta = 0; console.log(a); // 0 console.log(this.a); // undefined

  8. L’instruction let: portée functionvarTest() { varx = 1; if (true) { varx = 2; } // Ici x == 2 } functionletTest() { letx = 1; if (true) { letx = 2; } // Ici x == 1 }

  9. L’instruction let: portée au sein d’une boucle varlist = document.getElementById('list'); for (vari = 1; i <= 5; i++) { letitem = document.createElement('li'); item.appendChild(document.createTextNode('Item '+i)); item.onclick = function(ev) { console.log('Item ' + i + ' is clicked.'); }; list.appendChild(item); } varlist = document.getElementById('list'); for (leti = 1; i <= 5; i++) { letitem = document.createElement('li'); item.appendChild(document.createTextNode('Item '+i)); item.onclick = function(ev) { console.log('Item ' + i + ' is clicked.'); }; list.appendChild(item); }

  10. L’instruction let: émulation private/static varSomeConstructor = (function () { varprivateScope = {}; varconstructor = functionSomeConstructor() { this.someProperty = 'foo'; privateScope.hiddenProperty = 'bar'; }; constructor.prototype.showPublic = function() { console.log(this.someProperty); // foo }; constructor.prototype.showPrivate = function() { console.log(privateScope.hiddenProperty); // bar }; returnconstructor; })(); varmyInstance = new SomeConstructor(); varSomeConstructor; { letprivateScope = {}; SomeConstructor = functionSomeConstructor() { this.someProperty = 'foo'; privateScope.hiddenProperty = 'bar'; } SomeConstructor.prototype.showPublic = function() { console.log(this.someProperty); // foo } SomeConstructor.prototype.showPrivate = function() { console.log(privateScope.hiddenProperty); // bar } } varmyInstance = new SomeConstructor();

  11. L’instruction let: redéclaration if (x) { letfoo; letfoo; // SyntaxError } switch(x) { case0: letfoo; break; case1: letfoo; // SyntaxError break; }

  12. L’instruction let: argument de fonctions functionfunc(arg) { letarg; // Uncaught SyntaxError } functionfunc(arg) { { letarg; // Variable 'privée' } }

  13. L’instruction const

  14. L’instruction const: généralités consta = 1; constb = 2, c = 3; constd; //Uncaught SyntaxError consta = 4; //Uncaught SyntaxError constf = 0; console.log(f); // 0 console.log(this.f); // undefined

  15. L’instruction const: immutabilité/redéclaration constmyObj = {}; myObj.a = 1; constmyArray = []; myArray.push(1); consta = 1; vara; //Uncaught SyntaxError leta; //Uncaught SyntaxError

  16. L’instruction const: portée consta = 1; if (true) { consta = 2; console.log(a); // 2 } console.log(a) // 1 if (true) { consta = 1; if (true) { vara = 2; //Uncaught SyntaxError } }

  17. Temporal Dead Zone

  18. Temporal Dead Zone: l’erreur { there = 'far away'; // ReferenceError: there is // not defined letthere = 'dragons'; } functionreadThere () { returnthere } console.log(readThere()) // ReferenceError: there is not // defined letthere = 'dragons' { letthere = 'dragons'; there = 'far away'; // Valide }

  19. Temporal Dead Zone: Cycle de vie

  20. Temporal Dead Zone: Temporalité ‘Base on time’ not ‘Base on space’ functionreadThere () { returnthere } console.log(readThere()) // ReferenceError: there is not // defined letthere = 'dragons'

  21. Le mot de la fin Le pourquoi de la temporal dead zone: • Permettre de détecter des erreurs de programmations rapidement • Pour faciliter la mise en place de l’opérateur ‘const’

  22. Support navigateurs

  23. Support : let

  24. Support : const

  25. Sources • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const • https://ponyfoo.com/articles/es6-let-const-and-temporal-dead-zone-in-depth • http://2ality.com/2015/02/es6-scoping.html • http://2ality.com/2015/10/why-tdz.html • https://esdiscuss.org/topic/performance-concern-with-let-const • https://rainsoft.io/variables-lifecycle-and-why-let-is-not-hoisted/ • https://blog.wax-o.com/2014/09/comment-le-hoisting-fonctionne-en-javascript-et-pourquoi/

  26. Des questions?

More Related