Javascript foundations: scope

1,502 views

Published on

This presentation forms part of a tutorial on learning Javascript foundations. It explains the basic concepts of program scope as it relates to Javascript. Practical examples and real world issues are discussed.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,502
On SlideShare
0
From Embeds
0
Number of Embeds
74
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Javascript foundations: scope

  1. 1. scope Learning Javascript foundations John Hunter 16 June 2008
  2. 2. scope? an area in which something acts or operates or has power or control
  3. 3. In programming scope is an enclosing context where values and expressions are associated.
  4. 4. Javascript scoping is lexical - the scope of a variable is based on where it is placed in the code.
  5. 5. In Javascript there are 2 types of scope: global - the global (window) object functional - local to (inside) a function
  6. 6. var message = 'Hello'; setMessage(); console.log(message); function setMessage () { var message = 'Goodbye'; console.log(message); } Goodbye Hello
  7. 7. Global scope - exists in the var message = 'Hello'; global (window) context setMessage(); console.log(message); function setMessage () { Local scope - exists in the var message = 'Goodbye'; function ‘setMessage’ context console.log(message); } Goodbye Hello
  8. 8. var message = 'Hello'; setMessage('Goodbye'); console.log(message); function setMessage (message) { console.log(message); } Goodbye Hello
  9. 9. var message = 'Hello'; Passed into the function setMessage('Goodbye'); as an argument console.log(message); Local scope - exists in the function setMessage (message) { function ‘setMessage’ context console.log(message); } Goodbye Hello
  10. 10. var message = 'Hello'; console.log(setMessage()); console.log(message); function setMessage () { var message = 'Goodbye'; return message; } Goodbye Hello
  11. 11. var message = 'Hello'; Returned from the function console.log(setMessage()); as a return value console.log(message); function setMessage () { var message = 'Goodbye'; Local scope - exists in the return message; function ‘setMessage’ context } Goodbye Hello
  12. 12. function functionName (arguments) { var localVariable; scope return returnValue; } arguments, local variables and return values are all in the function scope
  13. 13. var message = 'Hello'; setMessage(); console.log(message); function setMessage () { message = 'Goodbye'; console.log(message); } Goodbye Goodbye
  14. 14. now clobbered the global var message = 'Hello'; variable!! setMessage(); console.log(message); function setMessage () { ✖ Implicit global - not message = 'Goodbye'; declared with var statement console.log(message); } Goodbye Goodbye
  15. 15. var message = 'Hello'; global variable now safe setMessage(); console.log(message); function setMessage () { local declared with var message = 'Goodbye'; var statement console.log(message); } Goodbye Hello
  16. 16. always declare variables with var statement
  17. 17. globals are bad
  18. 18. clobbering other code namespace pollution less portable code
  19. 19. what does this mean? function myStuff () { tmp = true; we’re screwed! ... } +4½ more screens of globals
  20. 20. keep global properties to a minimum use modular or object-oriented approaches (more on that later)
  21. 21. use meaningful names if you can’t think of a meaningful name then it doesn’t have a meaningful purpose
  22. 22. Review 2 scope types - global, functional function scope - arguments, local variables, return value make scope explicit - use var when declaring variables minimise use of global variables use meaningful names
  23. 23. Thanks

×