CODEWITHSUNDEEP
javascriptvariable-declaration
BVernon
BVernon

Reputation: 3747

Standard to declare all javascript variables in first line of code?

We're working with a new company and they have a coding standard where they declare all Javascript variables used in a method immediately in the first line of the method.

I asked if there was a reason they did this and was simply told it was their coding standard, so I googled and apparently it is indeed a recommended standard according to some sites.

My first thought is that if a method is so big that you actually find it helpful to put all variables at the top then your method is too big and needs to be broken up.

So my question is, what is the purpose of declaring the variables at the top as opposed to declaring them when they are first used? Is it just a coding standard designed to help people who write methods that are (in my personal opinion) too long as I presume, or are there other benefits I'm overlooking?

Upvotes: 5

Views: 1401

Answers (2)

Alen.Toma
Alen.Toma

Reputation: 4870

It is very good to sum all your variable at someplace, it easer to understand what variable exist at the begning of your functions.

Say you have two variable in a very very big function. User and Role

the first thing you will see those variable and you know they are available to the user across all your function, and you could call them a global variable in the function.

and then you have the let variable that exist only at someplaces like this for example 

var item;
for (var i = 0; i < arr.length; i++) {
  item = arr[i];
  let x = arr[i]; // this will work.
  item .addEventListener('click', function() {
    var subItem = arr[i]; // this wont work. 
    var subItem = item; // this wont work either
    var subItem = x; // this will work.
  });
}

So the company policy is only good when it come to global variable cases(in the function). You should try to follow them. But programming is a personal thing, so be wise about what to use in each context and try to understand what each case needs.

Upvotes: -2

CertainPerformance
CertainPerformance

Reputation: 370809

It used to be a method to make code clearer, back when we only had var, which gets hoisted. For example, the following is a pretty common error you still see nowadays:

for (var i = 0; i < arr.length; i++) {
  arr[i].addEventListener('click', function() {
    console.log(i);
  });
}

If a coding style or a linter required the var i to be extracted out of the loop and declared at the top of the function, it becomes clearer that there's only one binding of i, and that by the end of the loop, i === arr.length, possibly prompting the coder to fix the logic error before having to run it at all:

var i = 0;
for (; i < arr.length; i++) {
  arr[i].addEventListener('click', function() {
    console.log(i);
  });
}

But now that we have const and let, which are not hoisted out of loops (they have block scope, not function scope), the manual hoisting of the variable declarations to the top of the function has much less utility.

Some might argue that manually hoisting variables to the top of their scope makes things worse nowadays, if one accepts that const is strongly preferable to let (const variables cannot be reassigned; let variables can, making const variables easier for a programmer to internalize while reading code). For example, imagine having variables that depend on the value of other variables: refactoring the following

var startingNum, numMultipliedByTwo, plusOne;
startingNum = 2;
numMultipliedByTwo = startingNum * 2;
plusOne = numMultipliedByTwo + 1;

to ES6+, with manual hoisting, could only be done with let:

let startingNum, numMultipliedByTwo, plusOne;
startingNum = 2;
numMultipliedByTwo = startingNum * 2;
plusOne = numMultipliedByTwo + 1;

But since let doesn't have the same hoisting problems that var does, and since const is preferable to let, one may well conclude that this sort of style doesn't provide any benefit, and instead use:

const startingNum = 2;
const numMultipliedByTwo = startingNum * 2;
const plusOne = numMultipliedByTwo + 1;

Upvotes: 6

Related Questions