What does a colon (:) do in JavaScript?

# Table of Contents

1. What does a colon (:) do in JavaScript?
2. Using colons to separate key-value pairs in objects
3. Using colons with the ternary operator
4. Using colons with the switch statement
5. Using colons with the label statement
6. Using colons when destructuring nested object properties
7. Using colons with Types in TypeScript

# What does a colon (:) do in JavaScript?

The JavaScript colon is a punctuation mark that is most commonly used to:

• Separate the properties and values of an object literal.
• Separate the return values of the ternary operator.
• Declare a case in a switch statement.
• Destructure nested object properties.

# Using colons to separate key-value pairs in objects

The most common use of the colon in JavaScript is to separate a property and a value in an object.

Copied!
const obj = {
  first: 'bobby',
  last: 'hadz',
  age: 30,
};

console.log(obj);

console.log(obj.first);
console.log(obj.last);

The code sample produces the following output.

Copied!
{ first: 'bobby', last: 'hadz', age: 30 }
bobby
hadz

Notice that each key and value in the object is separated by a colon :.

An object literal is a mapping from keys to values.

You could alternatively, declare an empty object and use dot notation to add key-value pairs.

Copied!
const obj = {};

obj.first = 'bobby';
obj.last = 'hadz';
obj.age = 30;

// 👇️ { first: 'bobby', last: 'hadz', age: 30 }
console.log(obj);

console.log(obj.first); // 👉️ bobby
console.log(obj.last); // 👉️ hadz

The code sample declares the same object as the one from the previous example.

# Using colons with the ternary operator

Colons are also used to separate the success and failure cases of the ternary operator.

Copied!
const num = 100;

const result = num > 5 ? 'success' : 'failure';

console.log(result); // 👉️ success

The ternary operator is very similar to an if/else statement.

If the expression to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise, the value to the right of the colon is returned.

The ternary operator in the example checks if the num variable stores a value that is greater than 5.

You can imagine that the value before the colon is the if block and the value after the colon is the else block.

# Using colons with the switch statement

Colons are also used in switch statements.

Copied!
const num = 2;

switch (num) {
  case 1:
    console.log('Today is Monday.');
    break;
  case 2:
    console.log('Today is Tuesday');
    break;

  default:
    console.log('Today is not Monday or Tuesday');
}

The code sample produces the following output.

Copied!
Today is Tuesday

The switch statement evaluates the expression's value (num in the example) against a series of case clauses.

The num variable is equal to 2, so the case 2: block runs.

A colon is used to specify a block for a case clause.

Once a break statement is encountered, we exit the switch statement.

# Using colons with the label statement

Colons are also used with the label statement.

Copied!
let str = '';

loop1:

for (let i = 0; i < 6; i++) {
  if (i === 1) {
    continue loop1;
  }
  str = str + i;
}

console.log(str); // 👉️ 02345

The loop1: line is a label statement.

The label statement is used with break and continue statements.

It is used to prefix a statement with an identifier that we can refer to.

The line loop1: declares a loop1: identifier and enables us to use the continue loop1; statement.

You won't see labels used often in JavaScript because using them is not recommended.

They generally overcomplicate nested loops and lead to difficult-to-read code.

# Using colons when destructuring nested object properties

Colons are also used when destructuring nested object properties.

Copied!
const emp = {
  name: 'Bobby Hadz',
  address: {
    country: 'Belgium',
    city: 'Example',
  },
};

const {
  address: {country, city},
} = emp;

console.log(country); // 👉️ Belgium
console.log(city); // 👉️ Example

The destructuring assignment syntax is used to assign the values of object properties to variables.

Copied!
const emp = {
  name: 'bobby hadz',
  age: 30,
  country: 'Belgium',
};

const {name, age} = emp;

console.log(name); // 👉️ bobby hadz
console.log(age); // 👉️ 30

You can imagine that the name and age variables got set to the values of the name and age properties from the object.

When you need to destructure from a nested object, you use colons to go one lever deeper.

Copied!
const emp = {
  name: 'Bobby Hadz',
  address: {
    country: 'Belgium',
    city: 'Example',
  },
};

const {
  address: {country, city},
} = emp;

console.log(country); // 👉️ Belgium
console.log(city); // 👉️ Example

# Using colons with Types in TypeScript

You might also see colons used in TypeScript code.

TypeScript is a typed superset of the JavaScript language.

Copied!
type Employee = {
  name: string;
  department: string;
  country: string;
  age: number;
};

const emp: Employee = {
  name: 'Bobby Hadz',
  department: 'accounting',
  country: 'Belgium',
  age: 30,
};

The properties and types in the Employee type are separated by colons.

The Employee type declares a variable that has name, department and country properties of type string and an age property of type number.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Display a Variable value in an Alert box in JavaScript
• How to Append one Array to Another in JavaScript
• Append text or HTML to Element (DIV, SPAN, P) in JavaScript
• Append text to Textarea using JavaScript
• Javascript array/list comprehensions explained with examples
• Get the index of an Object in an Array in JavaScript