In Javascript, code blocks are created using curly braces ({}). For example:
someFunction() {
// some code here
}
anotherFunction() {
// some more code here
}
someFunction
and anotherFunction
are two different code blocks. These two different code blocks could also be considered as two different scopes. What that means is that the variables declared in someFunction
only affect that block of code, and those declared in anotherFunction
only affect that block of code. They are "scoped" in that sense. To illustrate:
var name = "Kenny"
someFunction() {
var name = "Kyle"
console.log("someFunction block:", name) // someFunction block: Kyle
}
anotherFunction() {
var name = "Timmy"
console.log("anotherFunction block:", name) // anotherFunction block: Timmy
}
console.log("global", name) // global Kenny
As you can see, the same variable name
retains its global value although it gets redefined within someFunction
and anotherFunction
.
Now here is where it can get a bit tricky. With that knowledge in mind, it is easy to assume that this would always be the case whenever we have code blocks. Except, it doesn't work the same with if/else
statements and for
loops.
var name = "Kenny";
if (name) {
var name = "Kyle";
console.log("if block:", name); // if block: Kyle
}
console.log("global", name); // global Kyle
The name
variable inside the if
block resets the value of name
. The same happens in a for
loop:
var name = "Kenny";
for (var i = 0; i < 1; i++) {
var name = "Kyle";
console.log("for loop block:", name); // for loop block: Kyle
}
console.log("global", name); // global Kyle
The solution is to use the let
keyword instead of var
.
var name = "Kenny";
if (name) {
let name = "Kyle";
console.log("if block:", name); // if block: Kyle
}
console.log("global", name); // global Kenny
var name = "Kenny";
for (var i = 0; i < 1; i++) {
let name = "Kyle";
console.log("for loop block:", name); // for loop block: Kyle
}
console.log("global", name); // global Kenny