Question about the difference between "var" and "let"

In the Global Scope and Functions lesson, it says:

Variables which are declared without the var keyword are automatically created in the global scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with var .

I think this is mistaken. A variable created with the ‘var’ keyword will belong to the global scope when defined outside a function, the same as with ‘let’. A variable created with the ‘var’ keyword will also belong to the global scope when created inside a function, but the same is not true for a variable defined with ‘let’ inside a function. ← Is this right?

1 Like

The key word here is without.

If a variable is not actually declared, it is automagically declared in the global scope. If a variable is declared with var inside of a function, it has function scope. Outside of a function it has global scope.

let and const have block scope, which basically means the nearest set of enclosing {}s.

If I were to do something like

var x = 8;
x = 6; //I can re-assign the value
var x = 5; 
/*
I can also create a new variable of the same name in the same scope without any errors
*/
let x = 8;
x = 6; //I can re-assign values
var x = 5; 
/*
JavaScript will now yell at me, since I re-declared another variable of the same name in the same scope when I had used let the first time, here I used var x = 5, it would show me a similar error with using let(and const, which FCC will teach you shortly). You can experiment more using your browser console
*/

@JeremyLT
Ho! You can actually define a variable with no keyword before it in JavaScript! I didn’t know that… (too used to C maybe…). Thanks for the clarification!

@brjsh20
Thanks for this! It seems that JavaScript is very flexible… too much maybe :smiley:

I’m fairly certain that you can’t use a variable without explicitly declaring it in C.

Exaclty, that is why I was so confused here in JavaScript.

Ah, I understand now. Yeah, Javascript lets you do some strange things sometimes. It’s best to use strict mode and declare variables only with let and const so that you get less surprising behavior.

1 Like

I wrote some code to check this by myself, and it helped me. I’ll leave it here just in case someone else finds it helpful or needs to be corrected:

/* 
    Scopes of variables with 'var' and 'let' statements and without statement
    in three different scopes:
        - Global
        - Function
        - Block (if...else, for, while, etc.)
    
    Which variables are global? Let's see.
 */

// --- Global scope ---
var myVar1 = 10; // Using the 'var' statement
let myVar2 = 20; // Using the 'let' statement
myVar3 = 30;     // Using no statement

if (true) {
    myVar1 += 5;
    myVar2 += 5;
    myVar3 += 5;
}

console.log("Global scope - Global value after block:", myVar1); // -> Global scope after block: 15
console.log("Global scope - Global value after block:", myVar2); // -> Global scope after block: 25
console.log("Global scope - Global value after block:", myVar3); // -> Global scope after block: 35

function myFunc() {
    myVar1 += 3;
    myVar2 += 3;
    myVar3 += 3;
}
myFunc();

console.log("Global scope - Global value after function:", myVar1); // -> Global scope after function: 18
console.log("Global scope - Global value after function:", myVar2); // -> Global scope after function: 28
console.log("Global scope - Global value after function:", myVar3); // -> Global scope after function: 38

// --- Function scope ---

function myFunc() {
    var myVar4 = 40; // Using the 'var' statement. This variable is only defined inside the function and it will not be accessible on the global scope.
    let myVar5 = 50; // Using the 'let' statement. This variable is only defined inside the function and it will not be accessible on the global scope.
    myVar6 = 60;     // Using no statement. This is a global variable.
}
myFunc();

// console.log("Function scope - Global value after function:", myVar4); // -> ReferenceError: myVar4 is not defined
// console.log("Function scope - Global value after function:", myVar5); // -> ReferenceError: myVar5 is not defined
console.log("Function scope - Global value after function:", myVar6); // -> Function scope - Global value after function: 60

// --- Block scope ---

if (true) {
    var myVar7 = 70;
    let myVar8 = 80;
    myVar9 = 90;
}

console.log("Block scope - Global value after block:", myVar7); // -> Block scope - Global value after block: 70
// console.log("Block scope - Global value after block:", myVar8); // -> ReferenceError: myVar8 is not defined
console.log("Block scope - Global value after block:", myVar9); // -> Block scope - Global value after block: 90
2 Likes