Vrftsjtryk

I was going through react library code. After going through I found a special piece of code I am unable to understand its significance. Can someone help?

var validateFormat = function () {};



{

  validateFormat = function (format) {

    if (format === undefined) {

      throw new Error('invariant requires an error message argument');

    }

  };

}

Here why react developer has wrapped the validateFormat into curly braces? is there any significance of doing this.

If I do the following it works the same -

var validateFormat = function () {};



validateFormat = function (format) {

   if (format === undefined) {

   throw new Error('invariant requires an error message argument');

   }

};

The block scope is a result of their babel-preset-fbjs. If you look at the original source you'll find that instead, this function is conditionally defined depending on the value of __DEV__, which is optimized out during transpilation since it is equivalent to process.env.NODE_ENV !== 'production'.

let validateFormat = () => {};



if (__DEV__) {

  validateFormat = function(format) {

    if (format === undefined) {

      throw new Error('invariant requires an error message argument');

    }

  };

}

This code makes perfect sense.

var v = function () {};



{

  v = function (format) {

    // actual code

  };

}

The first assignment defines v to an empty placeholder function so that code does not break.

The second assignment contains the actual code of the function. It is inside a block scope, which is a legit JS construct.

But... block scoping does nothing because of variable hoisting, which nullifies any locality contrary to C/C++ adepts' expectations. Many say there is no block scoping in JS, which is false. There is block scoping but it's ineffective (apart from more recent let/const declarations).

So what this code does is abuse the ineffective block syntax to separate visually parts of code.

But (and this is what I think is going on here) what we see here is just an EXAMPLE. I could very well come up with another example that makes perfect sense, such as this:

var v = function () {};



{

  let localValue = 0;



  v = function (format) {

    // actual code using localValue

    localValue = 1;

  };

}

In other words, you may find other examples in the code base which leverages block scoping through let/const and encapsulates the definition as shown. The example you give just doesn't leverage this opportunity but the scoping remains because:

• it does not disrupt or break code;


• uniformity;


• in future may carry more weight adding let/const.

This is all guessing on my part.

Curly braces here are block statement. They don't serve any good purpose in this case and can safely omitted. Block scope doesn't work with var. Even if it was let, block statement wouldn't affect it because validateFormat is already defined outside block statement.

An example where block statement is useful would be:

let validateFormat = function () {};



{

  // doesn't reassign validateFormat from outer scope

  let validateFormat = function (format) {

    if (format === undefined) {

      throw new Error('invariant requires an error message argument');

    }

  };

}

I don't think that there is any sense behind these brackets. In some scenarios, such brackets may have a use when used with let or const variables, however, as mentioned, in this snippet it is useless.