Why Are There So Many Curly Brackets{} in JavaScript?

If someone reads programs written in JavaScript, one would definitely wonder about the abundance of these symbols in the code . They are literally everywhere. Symbols like these can be used to encase different actions performed by the programming language. In the case of JavaScript, there are quite a few different types. Let’s take a look at a few of them.

There are a few of them in the above example. The most basic one in JavaScript is to use to denote the start and end of a function or statement. The pair on line 53/70 marks the start and end of the function handlemyZipOnly. In JavaScript all conditional codes to be executed must also be encased in these brackets. The pair on 55/57 encases the conditional code for the if condition while 57/59 encases the else code. What about the other two sets on here? They represent two other concepts in JavaScript. The set on line 53 illustrates the concept of de-structuring while the 66/69 pair is a representation of javaScript objects.

Here is another example of de-structuring.

In JavaScript, when dealing with complex objects that contain multiple attributes, we can use de-structuring to access only the items we want to focus on. In the above code, the function handleChange is invoked when a Semantic UI React input box is entered with text. The function is passed the event and data. There may be many attribute in the data object but if we only care about the name and value, we only need say { name, value } while ignoring the rest.

Just like in the preceding example, there is also a setState function here. The pair encases the object that represents the state, which can be identified by the presence of a key (the one suffixed by a “:”) and value (the one follows the “:”).

Here is another example of a JavaScript object. Each pair of the “{}” on line 14 thru 17 represents on object element within an array, encased by the square brackets [] (yet another type of brackets) on line 13/18.

Sometimes there are so many curly brackets on the same line of code, it makes your head spin (…{…{…{…}}}).

In the above example, we have the standard function code encasing brackets (lines 100/108 and 104/107). We also have the object defining sets (the two outer pairs on line 102). Then what is the inner most pair on line 102? That is called interpolation in JavaScript. This allows you to extract value from variables while appending it to text strings. This can normally be identified by a preceding “$”.

Speaking of extracting value, that brings us to our last type.

This is calculated (or derived) value in JSX. Even though it is not JavaScript in its purest form, we are also “extracting” value from something, which can be some variable (line 86) or even conditionals (line 87 and 90/97).

Next time when you see these curly brackets, maybe take a moment to marvel their versatility.