About curly braces {}

JavaScript
1

Hello, I have a question about curly braces, especially when to use them.

const array = [null,'',1,2,3]
console.log(countTruthy(array));

function countTruthy(array){
   let count = 0;
   for (let value of array)
      if (value) count++;

      return count;
}

In this case, it will return 3, which is correct, the array has 3 truthy.
However, if I put curly braces after for(let value of array), like below, it returns 0.

const array = [null,'',1,2,3]
console.log(countTruthy(array));

function countTruthy(array){
   let count = 0;
   for (let value of array){
      if (value) count++;

      return count;
   }
}

OR

const array = [null,'',1,2,3]
console.log(countTruthy(array));

function countTruthy(array){
   for (let value of array){
      let count = 0;
      if (value) count++;

      return count;
   }
}

Another example, there are curly braces after for (let i = 0; i<=limit; i++), it shows the result correctly with all the numbers and the even/odd message.

showNumbers(10);

function showNumbers(limit){
   for (let i = 0; i<=limit; i++){
      const message = (i % 2 === 0) ? 'EVEN' : 'ODD';

      console.log(i,message);
   }
}

However, if I remove the curly braces like below, it will return error message: unexpected token ‘const’.

showNumbers(10);

function showNumbers(limit){
   for (let i = 0; i<=limit; i++)
      const message = (i % 2 === 0) ? 'EVEN' : 'ODD';

      console.log(i,message);
}

Why is it?

2

If you omit the curly braces, it effectively puts braces around the next complete statement (which must be exactly one line long). You can only omit the curly braces if you have exactly one statement. You are probably coming from Python if you expected indentation to determine which statements form the body of the expression (if statement / for loop). This is actually extremely unusual about Python and almost all other programming languages use braces.

The Oracle documentation for Javascript is explicit about the need to enclose multi-line statements in brackets (at least for if and else):

If you want to use more than one statement after an if or else statement, you must enclose the statements in curly braces, {}.

Source: Oracle’s documentation

So looking at your first example, the braces are effectively this:

const array = [null,'',1,2,3]
console.log(countTruthy(array));

function countTruthy(array) {
   let count = 0;
   for (let value of array) {
     if (value) { count++; }
   }

   return count;
}

See how the return statement is after the for loop? In both of your other examples for countTruthy you put the return statement inside the for loop which has incorrect behavior (returning after processing the first item in the array - null).

That last example effectively has the following brackets:

function showNumbers(limit){
  for (let i = 0; i<=limit; i++) {
    const message = (i % 2 === 0) ? 'EVEN' : 'ODD';
  }
  console.log(i,message);
}

See how the console.log is outside of the body of the loop?

The explicit braces make the const expression allowed. It would appear that the Javascript interpreter does not consider const to be valid for a single line expression since it cannot possibly be used for anything.

This kind of confusion is the exact reason why many style guides require brackets even when they could be omitted. For example, Google’s JavaScript style guide:

Braces are required for all control structures (i.e. if , else , for , do , while , as well as any others), even if the body contains only a single statement.

1 Like
3

Love your explanation, easy to understand. Thank you jmrunkle!

1 Like