Curly Brackets

in JavaScript

This is an entry in Marek's JavaScript Compendium. Last updated 2020-01-22.

Curly brackets are punctuation marks in JavaScript, consisting of the opening curly bracket { and closing curly bracket }. They are also known as braces.

{ }

Curly brackets have multiple meanings in JavaScript. Because of this, in order to figure out what a curly bracket means in a particular piece of code, you have to look at what comes before and after it.

To read JavaScript code quickly, it's useful to get very familiar with the different meanings of curly brackets so that you can identify them fast.

Matching brackets

When you have an opening bracket, you always need a corresponding closing bracket. If you're missing any closing bracket in your code, you get a syntax error.

The concept of "corresponding" (or "matching") bracket is important. It means that as the parser scans through the code, it matches every closing bracket with the last seen opening bracket.

This means that when you open a bracket block, then you have to close the block before you close any other, earlier, blocks.

Under the hood: How it's implemented

As the parser reads the code, it keeps a stack of opened bracket blocks in memory. At the top of the stack, it keeps the most recently opened block.

When the parser sees a closing bracket, it checks that it matches the type of bracket at the top of the stack. If it does, then the syntax is correct.

If the bracket doesn't match the top of the stack, then it means that it's a mis-matched closing bracket and it's a syntax error.

If there's nothing on the stack when it sees the closing bracket, then it means that the closing bracket doesn't have a corresponding opening bracket (i.e. there is an extra closing bracket).

If the parser reaches the end of the file and the stack isn't empty, then it means that an opening bracket doesn't have a corresponding closing bracket (i.e. there is an extra opening bracket somewhere).

Curly brackets for code blocks

Control flow statement, (if, else, for, while) use curly brackets to group blocks of code.

if (score > 100) {
  return "High score";
} else if (score > 20) {
  return "Not a bad score";

Curly brackets in function bodies

In a function definition, the body of the function is surrounded with curly brackets.

Exception: Single-expression arrow functions don't use curly-brackets, because their body is just a single expression.

How to identify

Does the curly bracket come immediately after the function keyword or => (the arrow)?

If so, then it's a function body.

Curly brackets in object literal expressions

When you're creating an object with an object literal expression, the expression is contained in a pair of curly brackets.

How to identify

Is the opening bracket in a place where you would expect an expression?

Inside the brackets, are there name-and-value pairs with a colon? Are the pairs separated by commas?

Often, you see the object expression right after the = sign which is part of an assignment:

const user = {
  name: "marek",
  location: "canada",

It can also be shorter, on a single line:

const user = { name: "marek " };

It's possible to omit the colon by replacing name: name with just name inside of the object literal expression. So you'll sometimes see an object expression without any colons:

const name = "marek";
const location = "canada";
const user = {

If you're creating a very minimal object with a single shorthand property, then you might see no colons and no commas. It can be just a single name inside of the brackets, like this:

const name = "jon";
const user = { name };

Finally, you can have an empty object. It's the only case that happens in real-world code where you have an empty set of curly brackets (because you almost never see empty function bodies and empty blocks, since they don't serve any purpose).

const alpha = {};

Curly brackets in object de-structuring

When curly brackets appear in an assignment target (the left-hand side in an assignment) then they indicate an object de-structuring.