In this tutorial, you will learn about the concept of coercion in the JavaScript programming language.

What is JavaScript Coercion?

To understand JavaScript coercion, we must first understand the ! character in JavaScript, which is often verbally referred to as the bang operator.

Simply put, the ! character is used to change a boolean value to the opposite value.

Here is an example of the ! character in action:

const var1 = true;

console.log(!var1);

//Logs false to the console

The ! operator can also be used to perform coercion, which is when you force a variable of one data type (like string or number) to be a different data type (specifically, a boolean data type).

The best way to understand JavaScript coercion is through an example. Consider the following code:

myName = 'Nick'

console.log(!myName);

In this case, what do you think gets logged to the console? Is it a boolean value? An error? Or something else?

In this case, here's what would be logged to the console:

false

Why is this? It's because a non-empty string is a truthy variable in JavaScript. The ! operator works on truthy and falsy values as well as real true and false booleans, so in this case it transforms the truthy string to a false booleans.

The bang operator can also be used to transform a truthy or falsy value into the corresponding true or false boolean. To do this, you simply need to add the bang operator twice at the start of a variable.

Here are a few examples:

const var1 = "This is a string!";

const var2 = "";

console.log(!var1);

//Logs false to the console

console.log(!!var1);

//Logs true to the console

console.log(!var2);

//Logs true to the console

console.log(!!var2);

//Logs false to the console

To summarize JavaScript coercion, it is the concept of using the bang operator (another name for the ! character) to transform a truthy or falsy value into a real true or false boolean value.

What is a JavaScript Ternary Operator?

A JavaScript ternary operator is a shorthand way to create an if statement in the JavaScript programming language. The ternary operator is also called the conditional operator, and is notable for its use of the ? character.

As an example, consider the following JavaScript if statement;

numberOfCats = 2;

let catWord;

if (numberOfCats === 1){

	catWord = 'cat';

} else {

	catWord = 'cats';

}

This is a basic if statement that tells JavaScript to use the word "cat" if you have only one cat, and to use the plural word "cats" if you have multiple cats.

Since the logic of this if statement is actually fairly simple, it is an excellent candidate to be refactored into a statement that uses a ternary operator instead.

Here's how this statement could be refactored into a new statement with the ternary operator:

const catWord = numberOfCats === 1 ? 'cat' : 'cats';

Everything to the right of the single = character is a conditional operator statement. You can see that it has a condition (numberOfCats === 1), a value if that condition if true ('cat'), and a value of the condition is false ('cats').

More generally, here is the simplified syntax of a JavaScript statement that uses the ternary operator:

condition ? valueIfTrue : valueIfFalse;

Ternary operators are a very useful tool that allow you to replace if statement - which typically require multiple lines - with a single-line conditional operator statement. This makes your code more readable to other developers later on.

Ternary operators can also be used without assigning the output to a variable.

As an example, here's how you can pair the ternary operator with the console.log method to print a different sentence to the console depending on whether its a weekday or not:

isWeekday = true;

console.log(isWeekday ? 'I have to work today' : 'I do not have to work today');

You can also use methods and functions directly in the valueIfTrue and valueIfFalse sections of a ternary operator statement.

As an example, the following code has identical functionality to our last code block:

isWeekday = true;

isWeekday ? console.log( 'I have to work today') : console.log('I do not have to work today');

Another important concept to understand with ternary operators is how to make them do nothing if the condition evaluates to a specific value.

For example, there are many cases where you will want nothing to happen if the condition evaluates to false - which, interestingly, is equivalent logic to an if statement with no else if or else clause.

To do this, the most common practice among JavaScript developers is to use the null keyword as the valueIfFalse. Here's an example, following the same train of thought as our last few code snippets:

isWeekday = true;

isWeekday ? console.log( 'I have to work today') : null;

Final Thoughts

In this tutorial, you were introduced to the concept of coercion in the JavaScript programming language.

Here is a brief summary of what we discussed in this tutorial:

• A quick review of the ! character (also called the bang operator) in JavaScript
• How to use coercion to turn truthy and falsy values into real true and false boolean variables