Whether you’re coming to JavaScript from another language, or you’re learning JavaScript as your first language, the way scope works — that is, when and where your variables are defined — might surprise you.
In this instalment of Head First JavaScript Programming Teasers, you’ll learn about the basics of scope, why it’s important to limit the number of global variables, how functions create scope, what “hoisting” is, and how to know where your variables are defined.
You can buy Head First JavaScript Programming here
http://goo.gl/91YPqn
– Don’t miss an upload! Subscribe! http://goo.gl/szEauh –
Stay Connected to O’Reilly Media. Visit http://oreillymedia.com
Sign up to one of our newsletters – http://goo.gl/YZSWbO
Follow O’Reilly Media:
http://plus.google.com/+oreillymedia
https://www.facebook.com/OReilly
Tweets by OReillyMedia
Original source
7 responses to “The Basics of Scope in JavaScript”
very good! thank you!
it reminds me of schools where "teachers" speak as robot; not quite understanding what s/he is talking about.
4.40 Why? also, why is she using == and not ===? Sorry, I'm currently learning by myself.
Excellent tutorial. I knew about how scope and hoisting in JavaScript worked but it's still a good refresher. The only part that had me stumped a bit was from 6:10 to 6:47. For the life of me I couldn't figure out how name was being evaluated to Frodo. It seemed like the conditional in the IF statement was assigning the value as well as checking to see if it was assigned! lol
Only after a minute or so did I realize that part of the code (the assignment of Frodo to avatarName) wasn't being shown in that segment of the video. (If the top of the video is closely examined, just the bottom edge of the assignment can be seen.)
Let's say you have a function:
function foo(a) {
if (a === true) {
var one = "icecream";
} else {
var two = "cookie";
}
console.log("One is ", one);
console.log("Two is ", two);
}
Local scope is created by a function. This is true in JavaScript and in other languages (like C or Java (in a method)). So here, the variable a has "local scope" – it's scope is the entire function. You can access a anywhere in the function and not get a Reference Error.
In a language like C or Java, the if statement creates block scope: one of the two "blocks" (the true block or the false/else block) will execute, and there will be a scope created by that block. In the true block the variable one will be declared and assigned a value. In the false block the variable two will be declared and assigned a value. But, in Java or C, if you try to access the variable one outside the true block, or the variable two outside the false block, you'll get a reference error. Those variables simply don't exist at the local scope level; they only exist at the block scope level.
However, in JavaScript, one and two do exist at the local scope level. Even if the false block is never executed, the variable two will be declared (but not assigned a value). And likewise, even if the true block is never executed, the variable one will be declared (but not assigned a value). And in either case, you can access either variable outside the if statement and not get a reference error. Try running the code:
foo(true)
One is icecream
Two is undefined
foo(false)
One is undefined
Two is cookie
You do NOT get a reference error! You see that one of the variables is not defined depending on what you pass in. If JavaScript had block scope, then you would get a reference error if you tried to access either variable outside the if statement.
Hope this answers your question Stephen!
I love these videos.
This video never starts for me. Is anyone else experiencing this problem?