JavaScript curly braces with no function or json

Question

Just opened a client's javascript file and the first lines are along the lines of this:

{
    var s_account="blog";
}

Which I don't get. Normally, in my experience, curly braces wrap around a function...

function welcome(){ ...

...or a json JavaScript object

var attributes = { this : "that...

Can anyone tell me why there are curly braces with no text before them or after them? What does it do / what is the point of it?

Answer 1

It's a block and completely pointless unless you label it:

block: {
    var s_account="blog";
    console.log("executed");
    break block;
    console.log("not executed");
}

Answer 2

The only logical reason to do something like this, in my mind, is as an organizational technique.

function banana(){
    // private members
    {
        var foo = "foo",
            bar = "bar",
            baz = "baz";

        function bux(){
            console.log("bux");
        }
    }

    // public members

    this.fin = "fin";
    this.fang = "fang";
    this.foom = "foom";

    this.shamalamadingdong = function(){
        bux();
    };
}

Also, most IDEs will allow you to collapse that "private members" block and get it out of your way.

Answer 3

It's called a block statement. It lets you group expressions. It's normally used with control structures like if and while, but can also be used on its own.

Since JavaScript doesn't have block scope, the code runs in the same scope (as if the {} weren't there).

Example:

{
    var s_account="blog";
}

console.log(s_account);

That works fine.

Answer 4

Can anyone tell me why there are curly braces with no text before them or after them? What does it do / what is the point of it?

There is no significant point to them in Javascript. It will act exactly the same as if the code was just

var  s_account="blog";

Speculation

In other languages which have block scope, this might restrict the scope of the variable, but since JS doesn't have that feature (for better or worse), braces without a control structure or function are essentially meaningless and ignored.

Most likely this code was left over from a deleted function or if statement however. It definitely is not a pattern to be copied.

Answer 5

That's a block statement. Block statements have multiple purposes, none of which are being used by that code (other than perhaps to group the content together as Shmiddty suggested). (In fact, I'd say in that code they're counter-productive, because for the many people coming to JavaScript from languages where all variable declarations are block-scoped, they create the impression that the variable is scoped to the block, which it isn't.)

Uses it can have:

Scoping let, const, and class

If that code were using let, const, or class, the block would scope the resulting identifier because let, const, and class are block-scoped in JavaScript. So this outputs "bar":

{
    var foo = "bar";
}

console.log(foo);

but this throws a ReferenceError because foo is scoped to the block:

{
    let foo = "bar";
}

console.log(foo);

Providing a block to break

As Esailija points out, if it were labelled and using break, the break would exit the block early.

Grouping statements attached to a flow-control statement

The most common use of a block statement is to group together the statements attached to a flow-control statement like if and for. In this fairly typical if:

if (something) {
    doThis();
    doThat();
}

...the {} aren't part of the if (you can write if without using {}), they're a block statement attached to the if.

Answer 6

Quick addition. In some IDE like Visual Code, putting Curly Braces will actually create a visual block with a 'drop-down' arrow, allowing you to completely hide a portion of code with just a click. It helps with code organization. I'm using it when creating HTML element with a lot of CSS. Since it does not affect code execution, this is very useful.