What is the purpose of these superfluous curly braces?

Question

So I have recently started at a new place of employment and I have run across a format of javascript which makes me question its purpose. ( in particular the brackets {})

var _occurrences = getOccurrences($('#ddlTours').val());
{
    var _occurrence = getObjectByValue(_occurrences, 'tourID', booking.tourID);
    {
        _occurrenceID = _occurrence.occurrenceID;
    }
}

To me it almost looks like an attempted object construction. i.e.

var _occurrences : // Ignoring = getOccurrences($('#ddlTours').val());
{
    _occurrence : // Ignoring getObjectByValue(_occurrences, 'tourID', booking.tourID);
    {
        _occurrenceID : _occurrence.occurrenceID;
    }
}

But as I understand it will execute it like.

var _occurrences = getOccurrences($('#ddlTours').val());
var _occurrence = getObjectByValue(_occurrences, 'tourID', booking.tourID);
_occurrenceID = _occurrence.occurrenceID;

Or is it so _occurrence gets delete and does not sit around as its encapsulated and we assign a var that outside of the encapsulation. Does that actually work as a performance improvement? i.e.

Global var a = 1
{
    b = someFunction()  // After execution because of encapsulation it poofs???
    for(var c in b)
    {
        a += c.somefunction()
    }
}

Another option is that its just bad code?

Or perhaps its meant as a logical separation of code to help the dev?

I was just wondering if someone could shed some light on this for me :)

Answer 1

You are right to question those curly braces. They don't do anything at all. The code inside the braces executes just the same as it would if the braces weren't there. It's clearly a mistake to have them there like that.

As you mentioned, it looks like somebody could have thought that the curly braces would introduce a block scope, perhaps causing a variable to go out of scope after the braces are closed. But JavaScript doesn't have block scope for var variables! (It does have block scope for let, but only in the newer JavaScript engines that support let.)

Or maybe they just thought it would be a good way to document where the variables are used. It's not.

Adding to the humor here, the code appears to be missing the var for _occurrenceID entirely - so it's probably creating a global variable unintentionally!

The way you rewrote the code without the curly braces is indeed how it will actually execute. It is a better representation of what the code actually does and is how the code should be written. (Fixing the missing var of course...)

Answer 2

Or perhaps its meant as a logical separation of code to help the dev?

I'm going to make 2 assumptions here:

1. the developer was not incompetent
2. you left out a lot of lines between the curlies

(if 1 is not true then all bets are off)

Do-nothing curly-bracket blocks do have a purpose - in various text editors they mark sections that can be collapsed and thus removed from sight. I often do this if I have 50+ lines that I know work but I have to constantly scroll past. Put curlies around the content (mind the nesting), click the "collapse/fold" icon in the gutter -> code disappears. My particular editor will remember folded blocks so I don't need to re-fold each time.

Answer 3

As far as I can tell the braces are only a hint to the developer who is reading the code.

My guess is the braces and nesting are only to illustrate that the list contains an item which contains an id. This might be intended to help the reader understand that if they edit any of that code, or move it, then also edit the inner code to match.

Answer 4

These braces are just to make code more readable that's what some programmers thinks. The braces has nothing to do with any kind of other functionality. People do code wired. Cheers for a new kinda experience. :-P

Answer 5

See the code with compiler view.

Curly brackets are just to define scope. Not else more.

Consider, here is a example.

for(var c in b)
{
    a += c.somefunction();
}

This code is similar to

for(var c in b)
    a += c.somefunction();

i.e. by default for loop has scope till next statement.

Similarly,

var _occurrences = getOccurrences($('#ddlTours').val());
{
    var _occurrence = getObjectByValue(_occurrences, 'tourID', booking.tourID);
    {
        _occurrenceID = _occurrence.occurrenceID;
    }
}

This is just defining scope and adding statements inside that scope. Though you declare variable in that scope, the Hoisting concept will bubble up all variable to top.

Declaring variable inside a scope is just like;

if(true){
 var _occurrence = getObjectByValue(_occurrences, 'tourID', booking.tourID);
}

.

In simple words,

var _occurrences = getOccurrences($('#ddlTours').val());
{
    var _occurrence = getObjectByValue(_occurrences, 'tourID', booking.tourID);
    {
        _occurrenceID = _occurrence.occurrenceID;
    }
}

is equal to:

var _occurrences = getOccurrences($('#ddlTours').val());
if(true){
    var _occurrence = getObjectByValue(_occurrences, 'tourID', booking.tourID);
    if(true){
        _occurrenceID = _occurrence.occurrenceID;
    }
}