What will 'console.log(1 + '2' + '3')' output in JavaScript?

Understanding JavaScript Type Coercion with console.log Method

In JavaScript, the 'console.log()' function is a valuable tool for debugging and understanding the functionality of the code. Let's take the case of 'console.log(1 + '2' + '3')' and understand why the correct answer is '123' and not '6', '15', or an error.

The expression ‘console.log(1 + '2' + '3')’ involves the use of both numbers and strings, and the '+' operator, which can either perform numeric addition or string concatenation, depending on the context. In this case, JavaScript employs a concept known as 'type coercion' to resolve the ambiguity.

'Type coercion' is the process of converting value from one type to another (such as string to number, object to boolean, and so on). Now, in our example, the expression is evaluated from left to right.

First, we have the operation 1 + '2' occurring. Here JavaScript coerces the number 1 to a string due to the presence of the string '2', resulting in the string '12'. Next, we concatenate '12' with '3', yielding '123'.

console.log(1 + '2' + '3'); // Outputs: '123'

It’s important to note that JavaScript prioritizes string concatenation over numeric addition when the '+' operator is used with strings and numbers.

In scenarios where clarity is paramount and you want to prevent type coercion, it's a best practice to explicitly convert (or 'cast') the data types.

For instance, if you wanted this operation to output the number 6, you should parse the strings '2' and '3' as integers:

console.log(1 + parseInt('2') + parseInt('3')); // Outputs: 6

In conclusion, understanding type coercion and its implications is crucial to successfully navigating the flexible, dynamic world of JavaScript and avoiding unexpected results. JavaScript can be both powerfully flexible and maddeningly unpredictable, and the behaviour of the '+' operator is a great illustration of this dichotomy.

Do you find this helpful?