Where to perform argument validation in JavaScript?

Question

Yeah, read properly. In the last time I saw different patterns of argument validation in JavaScript (functions) and wondered which of them would be best-practice. At first I'll show two example code snippets. The first shows an (in my words) "immediate" argument/condition validation and the second one a "delayed" validation. Each of them affect the appearance of following code in different ways. Up to now I always used the "immediate" validation. But slowly I am getting doubtful if it's reasonable to force the whole following code into such conditional blocks. Please tell me what you think and what might be the "best" pattern.

And what about the place where variables are declared? A few times I read, that ALL variables should be declared on to of the method, before they're actually used. Is this correct? Because I think that it is useless to declare variables before it is sure that they'll be actually used (maybe invalid arguments force the throw of an Exception), I moved the variable-declaration-part beyond the argument/condition validation part. Is this advisable?

Thanks!

First example:

if (   colorStops.constructor === Array 
    && colorStops.length
    && colorStops.every(function(c) {
        return c instanceof ColorStop  
    })) 
{
    var privateVar1 = "foo",
        privateVar2 = "bar",
        privateVar3 = "tutifrutti";

    // here goes the code
}
else {
    throw new TypeError("GradientCanvasFacade: cannot add Colors; " +
        "invalid arguments received");
}

Second example:

if (cg instanceof ColorGradient) {
    throw new TypeError("PresetManager: Cannot add preset; " +
        "invalid arguments received");
}

var privateVar1 = "foo",
    privateVar2 = "bar",
    privateVar3 = "tutifrutti";

// here goes the code
// Here goes the code that get executed when no explicit 
// return took place ==> all preconditions fulfilled

Answer 1

Since JavaScript variables are scoped to the declaring function and not to the block as most other languages, declaring variables at the beginning of the function makes alot of sense.

function someFunc()
{
    if (1==1) 
    {
        var x = 1;
    } 
    else 
    {
        var x = 2;
    } 
    return x
}

Now imagine a function a lot more complex, to me atleast, declaring x at the beginning makes alot of sense. For variables generally bound to a block (like iterator variables or collections) I still declare them in the block though.

I would definitely go for your second example not because it fails earlier, because really it doesn't, but because it's easier to remove and add validations this way without breaking a complicated if structure.

Answer 2

I'd go with the second, simply because it's easier to read. Also, with the first, if your function is very long, someone looking at the bottom, will wonder what that } is for, and have to hop up to the top to see.

Also the scoping of variables is very clear, even for someone who forgets that javascript has weird scoping rules.

Also, as mentioned by Martijn, the second method makes it a lot easier to check for various errors, ie each can have their own if statement and so on.

Answer 3

if (some condition) {
  if (some other condition based in the first) {
    if (another condition based in 1st and 2nd) {
      do_job();
    } else?
  } else?
} else?

Where to put the else block? After every if or after the last?

It seems absolutely more readable the second choise

Answer 4

Okay guys, thanks so far. I decided to use the second style in the future. I think my "question" is answered. ;-9