JS: "let" not working to assign a value in a variable, only "var"

Question

:)

I'm doing a little "Calories calculator" to put in practice what I've learnt in JS.

I come across something I'd like to understand, here is a snippet of my HTML code :

<select id="sex">
        <option>Femme</option>
        <option>Homme</option>
 </select>

And here a snippet of my JS code :

const sex = document.getElementById('sex').value;

// Basal Metabolism depending sex
if (sex == "Femme"){
    var metabolism = (9.740 * weight + 172.9 * height - 4.737 * age + 667.051).toFixed(0);
}
else {
    var metabolism = (13.707 * weight + 492.3 * height - 6.673 * age + 77.607).toFixed(0);
}


// Output for end user
console.log("Basal metabolism for " + sex + " : " + metabolism);
}

This is working perfectly fine, but I had to replace my "let" by "var" inside my "if" statements in my JS file. How comes this is only working with "var" ? I thought it was better to use "let" or "const" from now on ?

I'd really appreciate someone to take the time to explain this to me, thanks by advance.

It's because `var` gets [hoisted](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) and `let` or `const` don't, More info in [this post](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var) — Reyno, Oct 07 '20 at 10:46
`let` is block scoped, `var` is function scoped. I.e. the `let` declarations are only visible inside the `if` and `else` blocks. — Felix Kling, Oct 07 '20 at 10:48

wiredmartian · Accepted Answer · 2020-10-07T10:49:16.310

1

It's a scope thing. var has a global scope and let has a block scope. Which means let and const variables are only accessible within the block they are declared. The below should work fine.

const sex = document.getElementById('sex').value;

    // Basal Metabolism depending sex
let metabolism;
    if (sex == "Femme"){
        metabolism = (9.740 * weight + 172.9 * height - 4.737 * age + 667.051).toFixed(0);
    }
    else {
        metabolism = (13.707 * weight + 492.3 * height - 6.673 * age + 77.607).toFixed(0);
    }
    
    
    // Output for end user
    console.log("Basal metabolism for " + sex + " : " + metabolism);
    }

edited Oct 07 '20 at 10:49

answered Oct 07 '20 at 10:48

wiredmartian

477
5
17

4

`var` has function scope. (sure, if there is no function then it must be in global scope, but that also applies to `let` and `const`). – Felix Kling Oct 07 '20 at 10:48

Maaz Ahmad Khan · Answer 2 · 2020-10-07T10:55:07.113

define metabolism outside the "if" block.

let metabolism;
if (sex == "Femme"){
    metabolism = (9.740 * weight + 172.9 * height - 4.737 * age + 667.051).toFixed(0);
}
else {
    metabolism = (13.707 * weight + 492.3 * height - 6.673 * age + 77.607).toFixed(0);
}

Explanation :

When you wrote :-

if (sex == "Femme"){

    let metabolism = (9.740 * weight + 172.9 * height - 4.737 * age + 667.051).toFixed(0);
}
else {

    let metabolism = (13.707 * weight + 492.3 * height - 6.673 * age + 77.607).toFixed(0);
}

this defined two metabolism variables in "if" block and other one in "else" block. No metabolism variable was available outside the "if" or "else" block. So you must have gotten a Reference Error.

But with "var", var doesn't respect block scope, so when you defined var in "if" block, it was available outside "if", inside "if" and inside "else" as well. it was defined in global scope.

Thank you very much guys ! And sorry for the noob question. I've learnt this over my theorical course, but it seems I needed to have a real life example to truly rembmer it. I won't forget next time, thx ! — AlexBack, Oct 07 '20 at 12:34

JS: "let" not working to assign a value in a variable, only "var"

2 Answers2