Skip to main content

What Is a Code Block?

A block is a pair of braces ({...}) used to group multiple statements together.

Block typically gets used in JavaScript functions, conditional statements, and CSS rulesets.

Example 1: Use a Code Block to Encase a JavaScript Statement​

{
  var bestColor = "White";
}

The block in the snippet above encased one JavaScript statement.

Example 2: Use a Code Block to Group Four JavaScript Statements​

if (new Date().getHours() < 18) {
  const hourNow = new Date().getHours();
  const minutesNow = new Date().getMinutes();
  const secondsNow = new Date().getSeconds();
  console.log(
    `Check your plans now. The time is ${hourNow}:${minutesNow}:${secondsNow}.`
  );
}

The if condition's code block grouped four JavaScript statements together.

Example 3: Use a Code Block to Group Four CSS Statements​

h1 {
  color: orange;
  text-transform: uppercase;
  text-decoration: underline;
  text-align: center;
}

We used the code block in the CSS ruleset above to group four CSS statements.

Example 4: Use a Code Block to Group Three JavaScript Statements​

class Time {
  hourNow = new Date().getHours();
  minutesNow = new Date().getMinutes();
  secondsNow = new Date().getSeconds();
}

const currentTime = new Time();

console.log(
  `Check your plans now. The time is ${currentTime.hourNow}:${currentTime.minutesNow}:${currentTime.secondsNow}.`
);

The Time class's code block grouped three JavaScript statements.

Note the following:

  • hourNow, minutesNow, and secondsNow are the class fields (properties).
  • The snippet above used the new keyword to construct a new object from the Time class. Therefore, the currentTime object is an instance of the Time constructor class.

Before we wrap up our discussion on code blocks, you should know the difference between a block and an object literal. So, let's talk about that below.

Block vs. Object Literal – What's the Difference?​

A pair of braces ({...}) define a block and an object literal. However, they serve different purposes.

A block groups multiple statements, whereas an object literal is a container used to store one or more properties.

For instance, the pair of braces in the snippet below is a block because we used it to group the function's statements.

function getName() {
  const firstName = "Oluwatobi";
  const lastName = "Sofela";
  return firstName + " " + lastName;
}

However, the pair of braces in the snippet below is an object literal because it encases multiple properties.

const myName = { firstName: "Oluwatobi", lastName: "Sofela" };

Overview​

This article discussed what a block is. We also looked at the difference between a block and an object literal.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article