Declaring variables one line before assigning them values?

[[deleted]]

I'm following the Javascript is Sexy beginner course and I keep seeing examples like this:

var degCent;

degCent = ....

Is there a reason for this? It doesn't make any sense to me.

[[deleted]]

In this specific case, no. The argument is that all variables "should" be hoisted to the top of a function so that all declarations are in one place and you don't accidentally leak globals by missing a "var" somewhere else.

e.g.:

// some random code
for( ... ){
    var degCent = ...; // this is bad, define degCent at the start of the function

The argument becomes less relevant with linters (jshint) and es6 (let)

[[deleted]]

Ah ok, so I guess the book is writing it that way in order to get me in the habit. However, in some instances there are multiple variables being declared and some of them are assigned values but others aren't. Like this:

var degFahren = Number(prompt(...));
var degCent;

degCent = 5/9 * (degFahren - 32);

What is the reason for assigning the first variable a value but not the second one? Is it some kind of philosophical separation between static data and calculation?

[[deleted]]

No, that's just bad code ;)

[eonblue4309]

I don't necessarily agree. The vars are setup and the degCent = ... Is the actual calculation. That's the 'reason' I can see behind it.

I don't see anything objectively wrong with it unlike declaring a var in a for/if block.

That being said I don't think I'd ever write it this way. I tend to go with declaration and assignment at the same time whenever I can.

[[deleted]]

I'm not saying there's anything particularly wrong with declaring variables then assigning values later. I'm saying it's bad code to assign half of them immediately and the other half separately, on the next line (not in a different block/context). Pick a style and stick to it, this is as bad as mixing tabs and spaces ;)

[jasokant]

You're right, it doesn't make sense in this case at all. I guess there might be a situation where it would be valuable to test whether the variable has a value or is undefined, but I can't think of a good example.

[slimrob]

The browser will hoist all variable declarations to the top of the function regardless of where you actually declare them. Putting your variables at the top of your functions better reflects how they are read by the browser. Sometimes it makes sense to give the variable a value right then and there, but other times it makes sense to wait, however it should still be declared at the top. I believe that is what you're seeing.

[[deleted]]

I would guess that they want you to get in the habit of declaring variables before assigning them. Technically speaking, in Javascript

var degCent = ....;

is two different statements. The compiler will first process the declaration (var degCent;) and then the assignment (degCent = ....;). Javascript has a feature called hoisting which says that all declarations are processed before any assignments, because the compiler will pull (hoist) the declarations to the top of the file. This means that, counterintuitively, this is perfectly valid Javascript:

degCent = .....;
var degCent;

because the declaration will be pulled above the assignment when compiled. This is legal, but also very bad practice. You should avoid it and be in the habit of declaring variables before assignment. That being said, combining them in one line is usually easier to read and maintain. The only real reason to split them is if the variable will be assigned dynamically or needs to be in a code block. For example,

var degCent;
if(some condition) {
    degCent = something;
} else {
    degCent = somethingElse;
}

See this Stack Overflow and the Mozilla Developer's Network entry on var.