Type conversion in JavaScript

Introduction

JavaScript is a loosely typed language, which means that it does not require you to clearly declare the data type when declaring a variable. In JavaScript, the type of a variable is implicitly declared by associating a specific value with the given variable.
Javascript is also a language of dynamic types because it is possible to change the type during the execution of the program. The result of the conversion is always some primitive value, ie. there is no conversion that results in some complex value (such as an object or function). Unlike JavaScript, TypeScript (a JavaScript superset language) is a “strongly typed” language that requires a type to be defined when declaring a variable and does not allow implicit type changes.

Explicit conversion

When we want to change the data type of a variable, it is called explicit (obvious) conversion of types and is done using one of the built-in conversion functions:

• Convert to “string”: “String()” or “toString()”
• Convert to “number”: “Number()” or “parseFloat()” or “parseInt()”
• Convert to “boolean”: “Boolean()”

Implicit (hidden) type conversion

Implicit (hidden) type conversion refers to conversions that are not obvious, and are performed by the JavaScript engine on the fly as a side effect of some other actions. Implicit conversion most often occurs when a value of a type is used in a way that automatically causes its conversion.

Table of implicit conversions

Reasons for implicit conversion

The most common reasons for implicit conversion are comparison or some other mathematical operation between different types of variables. In addition to this, implicit conversion also occurs due to the need to calculate a condition. I will list conditions that require a boolean value to resolve the condition, which may require conversion to a boolean type:

• condition in the if (..)

statement

• condition (second condition) in the loop for (.. ; .. ; ..)
• condition in loops while(..)
• condition (first provision) in ternary expressions ..?.. :..
• operands as condition with logical operators && or ||see more about this here.

a) Abstract comparison “==”

One of the most famous examples of implicit conversion is the “comparison to equality”, after which a logical value is obtained. The algorithm for determining the logical value is as follows:

Algorithm for abstract comparison “x==y”

1. If they are of the same type => perform a strict comparison “===”
2. If variable “x” is null or undefined =>returns True
3. If the variable “x” is undefined and the variable “y” is null =>returns True
4. If the variable “x” is Number and the variable “y” is String then it returns the result of the comparison x ==ToNumber(y)
5. If variable “x” is String and variable “y” is Number then returns result of comparison ToNumber(x)=y
6. If the variable “x” is Boolean and the variable “y” is Number then it returns the result of the comparison ToNumber(x)=y
7. If variable “x” is Number and variable “y” is Boolean then returns result of comparison x=ToNumber(y)
8. If variable “x” is Number or String or Symbol and variable “y” is Object then returns result of comparison x ==ToPrimitive(y)
9. If the variable “x” is an Object and the variable “y” is a Number or String or Symbol then it returns the result of the comparison ToPrimitive(x)=y
10. If it is none of the above, it returns False

NOTE:
For all requests to change a specific type, consult the previous implicit conversion table

b) Strict comparison “===”

Algorithm for strict comparison “x===y”

1. If “x” is NaN returns False
2. If “y” is NaN returns False
3. If “x” is the same number as “y” returns True
4. If “x” is +0 and “y” -0 returns True
5. If “x” is -0 and “y” +0 returns True
6. None of the above returns False

c) Relational comparison “<" or ">” or “>=” or “<="

Algorithm for relational comparison

1. If one of the operands is an “object”, it is first attempted to be “converted” to a primitive value by calling nekiObjekat.valueOf(), then if possible it is attempted to be transformed to a “Number” type
   

   Example

   var oVal1 = { valueOf: function() { return 1; } }; console.log(oVal1 > null) var oVal0 = { toString: function() { return "0"; } }; console.log(oVal0 < true); //prints true

   1 2 3 4 5

   var oVal1 = { valueOf: function() { return 1; } }; console.log(oVal1 > null)   var oVal0 = { toString: function() { return "0"; } }; console.log(oVal0 < true);         //prints true

2. If both types are String => an “alphabet comparison”
   is performed
   

   Example

   "a" < "b" // ReturnsTRUE "a" < "aa" // ReturnsTRUE

   1 2	"a" < "b" // ReturnsTRUE "a" < "aa"  // ReturnsTRUE

3. If one of the variables is not of type “Number” and the other is, then an implicitconversion to Number
   

   Example

   When comparison operators are used where one of the operands is a logical value and the other is of type Number, a conversion of the logical value into a number occurs. The logical value TRUE is converted to the number 1, and the logical value FALSE is converted to zero.

   FALSE < 1 // First, the conversion to a number is done, so we get "0 < 1" after which it returns "TRUE"

   1	FALSE < 1 // First, the conversion to a number is done, so we get "0 < 1" after which it returns "TRUE"

   Note:
   If a NaN is obtained during the conversion (e.g. during the conversion of undefined to number or unsuccessful conversion of String to Number), the comparison always returns FALSE.

4. If both are of type Number => standard comparison is performed

d) Operation “+” and one of the operands is a string

This conversion occurs when using the “+” operator, when one of the operands is a string. The rule is that the operand (the element on which the operation is performed) whose type is not “string” is converted to a string and then the two strings are joined (joining character strings).

Example

Example

e) Multiplication, division and subtraction operations

Operators for subtraction (–), multiplication (*) and division (/) intended only for working with numbers, therefore one of the operands is not a number, there is an implicit conversion to a number. Numbers are also needed when comparison operators (“==” or “<" ...) are used, so there is also a conversion to a number.

Example: String to number

Example: Array to string and then to number

When converting strings to numbers, first the string is converted to a string (an intermediate step), and then the strings are converted to numbers.

f) Using unary operators

Using unary operators (+ or -) in front of some data, the operator will try to convert it to a number!

g) Using the operators && and || when calculating conditions

When one or even both operands are not of logical type when using operators && and ||, conversion to logical type occurs, but after resolving the condition they do not return a logical value, but return the value of one of the two operands. What will be the result of the conditions is determined according to the following rules:

• For the operator || after the conversion of “not logical” type to logical when solving the condition, the following applies:
  if the final solution of the operator condition is TRUE, it returns the value of the first operand, and in the case of FALSE, it returns the value of the second operand.
  
  console.log(3 || true); //rezultat je 3 console.log(3 || false); //rezultat je 3 console.log(true || 3); //rezultat je TRUE console.log(false || 3); //rezultat je 3

  1 2 3 4

  console.log(3 || true);  //rezultat je 3 console.log(3 || false); //rezultat je 3 console.log(true || 3);  //rezultat je TRUE console.log(false || 3); //rezultat je 3

• For the operator && after the conversion of “not logical” type to logical when solving the condition, the following applies:
  if the final solution of the operator condition is TRUE, it returns the value of the second operand and vice versa.
  
  console.log(3 && true); //rezultat je true console.log(3 && false); //rezultat je false console.log(true && 3); //rezultat je 3 console.log(false && 3); //rezultat je false

  1 2 3 4

  console.log(3 && true); //rezultat je true console.log(3 && false); //rezultat je false console.log(true && 3);  //rezultat je 3 console.log(false && 3); //rezultat je false