What is the significance of "{" "}" braces around this react library code?

user_9269538 0
Viewed 1001

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');
   }
};
reactjs ecmascript-6 javascript
3 Answers

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');
    }
  };
}
user_15415630

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.

user_32274030

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');
    }
  };
  // validateFormat from block scope is used here
}

// validateFormat from outer scope is used here

The answer provides technically correct explanation. The real problem here is that the question contains wrong code that doesn't make sense because if (...) statement was omitted when the code was pasted, as accepted answer shows.

user_37315010
Related