Learning a foreign language usually begins with acquiring basic vocabulary. As our level of proficiency grows, we gradually start to explore its more complex aspects, exceptions, and oddities - in other words, its grammar.

Programming languages also have their own grammar, which is nothing more than the syntactic correctness of the code we write. So what is code made of? The answer is, in fact, quite simple: expressions and statements. Expressions in code are the counterparts of sentences. I will even venture to say that writing a program is much like telling a story. The better the sentences, the more engaging the story becomes.

In natural languages, to achieve the intended effect, we rely on punctuation and stylistic devices such as metaphors and paraphrases, and we divide a narrative into paragraphs and chapters. In code, we can find many similar analogies: classes and objects as chapters, blocks as paragraphs, and semicolons and braces as punctuation marks.

I could probably write quite a lot about syntax in general, but today I would like to focus on a single type of symbol used in JavaScript code - namely, curly braces.

Famous Curly Braces

I wouldn’t be myself if I didn’t start this story at the very beginning - that is, in the 1960s. Up until that decade, code was written using only two kinds of brackets: round () and square []. Quite quickly, this became problematic, as programs grew increasingly complex and the code itself started to become confusing.

The first language to introduce a new punctuation symbol, {}, was BCPL (Basic Combined Programming Language). BCPL was designed in 1967 by Martin Richards at the University of Cambridge. The language laid the foundations for B, which emerged a few years later. This is particularly interesting because, alongside the development of B, the C programming language appeared - a language from which JavaScript drew quite heavily.

Object Literals

A classic example of using curly braces in JavaScript is the object literal. In JavaScript, objects can be created in several ways: by using the new keyword, by calling the built-in static method Object.create, or by using an object literal {}. By far the most common way to create new objects is through object literals. Take a look at the code below:

It is worth paying attention to the notation itself - in the example above, we create a new object that contains two properties: name and age. The rule is straightforward: the property name comes first, followed by a colon, then the assigned value, and finally a comma, which is required if the property being added is not the last one in the object.

Retrieving values from such an object is very simple. We can use dot notation, for example:

Objects created using object literals can store values of any data type. The object itself can also be accessed via the this keyword, provided that the function added to the object is not an arrow function.

Blocks

Using curly braces to create objects is very natural in JavaScript. The other possible uses are less commonly discussed, which does not mean they are any worse. Curly braces in JavaScript appear in one more important context. Let’s take a look at the examples below:

The example above demonstrates another use of curly braces - as blocks. So what exactly is a block? A code block is simply a group of statements that can follow any keyword such as if, else, for, while, and so on. The boundaries of a block are defined by curly braces.

The statements inside the show function are contained within that function’s block. Similarly, assigning a value to the result variable and returning it from the function both take place inside the block of the conditional statement.

Both examples - the block and the object literal - are fairly intuitive and logical. Let’s now take a look at a different kind of block:

The most interesting braces in the example above are the curly braces that wrap the entire piece of code. These braces indicate that the code has been enclosed in a block, not in an object. This is made clear by the syntax being used. Notice that a construct like the one shown in the example below would not be valid.

So what happens if we write the example above in a slightly different way?

This form is perfectly valid! But why? The answer is simple… labels.

Labels

One of the lesser-known features of JavaScript is so-called labels. Labels are used to mark statements with an identifier. They can be useful in combination with the break and continue keywords, which allow us to jump between statements that have been marked with a label. In the last example, we created two statements inside a block, labeled a and brespectively.

Why did b: 1 throw an error, while b: b = 1 did not? The reason is simple: 1 on its own is not a statement - it is a value. Assigning the value 1 to the variable b (global in this case), however, is a statement.

The syntax of a label looks like this: <label> : <statement>

So now it’s time for a challenge. What value will be printed to the console?

Of course, 10. The break myLabel; statement stopped further execution of the block, so the subsequent value assignments never took place.

Destructuring

Another place where we encounter curly braces is object destructuring expressions, both in function arguments and outside of them.

Destructuring allows us to gain direct access to values. In the example const { name, age } = obj;, the variables name and age are created and assigned the corresponding values from the properties of the destructured object. The property names become the variable names. In the whoIs function, however, we are not dealing, contrary to appearances, with an object literal or a code block. The mechanism is exactly the same as in the case of variables.

Summary

Curly braces have been with us since the late 1960s. They have become a permanent fixture of high-level programming languages, forming an essential part of their grammar. In JavaScript, they are responsible for many mechanisms, the most interesting of which are object literals, destructuring, and blocks.

I hope I managed to clarify a few things today. Grammar is inherently difficult (and in natural languages, even more so), but by learning its rules well, we can create truly valuable things without falling into the strange traps of programming languages — such as the JavaScript labels discussed today.