scope
Learning Javascript foundations
John Hunter
16 June 2008

scope?
an area in which something
acts or operates or has power
or control

In programming scope is an enclosing context
where values and expressions are associated.

Javascript scoping is lexical -
the scope of a variable is based on
where it is placed in the code.

In Javascript there are 2 types of scope:
global - the global (window) object
functional - local to (inside) a function

var message = 'Hello';
setMessage();
console.log(message);
function setMessage () {
var message = 'Goodbye';
console.log(message);
}
Goodbye
Hello

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

var message = 'Hello';
setMessage('Goodbye');
console.log(message);
function setMessage (message) {
console.log(message);
}
Goodbye
Hello

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

var message = 'Hello';
console.log(setMessage());
console.log(message);
function setMessage () {
var message = 'Goodbye';
return message;
}
Goodbye
Hello

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

function functionName (arguments) {
var localVariable;
scope
return returnValue;
}
arguments, local variables and return
values are all in the function scope

var message = 'Hello';
setMessage();
console.log(message);
function setMessage () {
message = 'Goodbye';
console.log(message);
}
Goodbye
Goodbye

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

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

always declare variables
with var statement

globals are
bad

clobbering other code
namespace pollution
less portable code

what does this
mean?
function myStuff () {
tmp = true; we’re screwed!
...
}
+4½ more screens of globals

keep global properties
to a minimum
use modular or object-oriented approaches
(more on that later)

use meaningful names
if you can’t think of a meaningful name
then it doesn’t have a meaningful purpose

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

Thanks