12

In my project (browser context only) I want to use a JS code quality tool. I've tried both jslint and eslint. I want linter to help me make my code clean, clear, errorproof and improve its overall quality. What I don't want to do is I don't want to write some dirty hacks or use bad practices just to make linters happy.

I'm concerned about only one issue. Both of them reported a problem that I'm using a function before it was defined. Obviously in the following code snippet bar won't be called before it's definition.

function foo() {
    bar();
}

function bar() {

}

foo();

In this simplest scenario I can just move bar before foo. But there are cases when it's just impossible. First function uses the second, the second uses the third and the third uses the first.

It seems like I can make linters happy by declaring all functions before their definitions like this.

var foo;

var bar;

foo = function() {
    bar();
};

bar = function() {

};

foo();

The questions are:

  • Is the first code snippet broken? I guess - not.
  • Is the first code snippet error-prone? I guess - maybe.
  • Is it a good practice to organize code like the second snippet (declare functions before defining them)?
  • If yes I should stick to this practice, shouldn't I?
  • If no what is the good practice regarding this issue?
  • Is this linter error worth paying attention to or should I just disable it?
Improve this question
7
  • Have you tried switching positions of foo and bar in your code? Commented Aug 10, 2016 at 11:14
  • @Justinas in this simplest scenario I can just move bar before foo. But there are cases when it's just impossible. First function calls the second, the second calls the third and the third calls the first. Commented Aug 10, 2016 at 11:14
  • Maybe as far as I know the first case is very safe compared to the second. Even the lint blame. The reason is that in javascript the functions are executed only when are all defined, so you have a problem only if bar() will never be defined. In second case, you could execute bar() when it is undefined. Just because you call the foo() before the bar() definition. That because in the second case you're assigning functions to variables, that have a different behavior ind declaration/definition. Commented Aug 10, 2016 at 11:23
  • I found here the explanation of the rule, that details better what I was trying to explain in my previous post. Commented Aug 10, 2016 at 11:28
  • 1
    You could look into Hoisting Commented Aug 10, 2016 at 11:55

2 Answers 2

Reset to default
2

No, the snippets are not broken but not best practice either.

var foo = function(){

}

var bar = function(){
  foo();
}

bar();

will actually become: 

var foo, bar;

foo = function(){

}

bar = function(){
  foo();
}

bar();

Hence you should define all variables and functions at the beginning of the scope. JavaScript uses Hoisting which effectively moves all declarations for variables and functions to the top of the scope.

Doing it yourself is considered best practice and increases readability.

Eslint will check against the rule vars-on-top which is defined and documented here

https://www.reddit.com/r/learnjavascript/comments/3cq24a/crockford_says_hoisted_variable_declarations_are/ https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

So the second code snippet is considered a good practice, right?
About Hoisting, i am not expert but in js variable declarations are not moved to the top of the scope, only function declarations. example: function asd(){ console.log('1.: ' + asdvar); var asdvar = 'sir asdalot'; console.log('2.: ' + asdvar); }
@kailnris the declaration is moved, not the asignment ;)
@TimHallyburton yes its true, in this example the variable is created in the local scope: function asd(){ asdvar = 'asd2'; var asdvar; }
So the second code snippet is considered a good practice, right? I realize I'm repeating my earlier comment a little, but no, not really. In this simple case, there's no reason not to use function foo & function bar, I don't think. In the actual case (a calls b, which calls c, which calls a)... JSLint is a linter, and doesn't really intend to be a stand-in for code review, but it does help identify code smell. If you have incestuous calls like that & find yourself performing odd dances to get around rules, consider an overall code review as well.
1
  1. Is the first code snippet broken? no it's not broken.
  2. Is the first code snippet error-prone? No.
  3. Is it a good practice to organize code like the second snippet (declare functions before defining them)? NO there are many other good ways
  4. If yes I should stick to this practice, shouldn't I? Yes
  5. If not what is the good practice regarding this issue? there are many good pattern you can follow
  6. Is this linter error worth paying attention to or should I just disable it? It's good to pay attention for keep your code clean

Use strict mode always. "use strict"

have you functions inside scope like IIFE for not having global's variables

read more about IIFE

function foo() {
    bar();
};

function bar() {

};
Improve this answer

2 Comments

The scope is not the problem. As you can see in his edit that putting the declarations on top of the snippet has solved the problem. It is likely that eshint checked against "vars-on-top" (as linked in my answer)
i understand but that's matter of choice from lint i guess :-) i would prefer to not having vars pre-defined on the top

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.